chore: fix time range change race condition

Author: sahar-fehri

app/components/UI/Charts/AdvancedChart/AdvancedChart.tsx

@@ -120,6 +120,8 @@ const AdvancedChart = forwardRef<AdvancedChartRef, AdvancedChartProps>(
     const prevChartTypeRef = useRef(chartType);
     const prevOhlcvDataRef = useRef<OHLCVBar[]>([]);
     const prevOhlcvSeriesKeyRef = useRef<string | undefined>(undefined);
+    /** When non-null, `ohlcvData` is still the previous series' array; skip sync until the hook replaces it. */
+    const ohlcvSeriesStaleSnapshotRef = useRef<OHLCVBar[] | null>(null);
     const tradingViewOpenInterceptRef = useRef(0);
 
     const htmlContent = useMemo(
@@ -141,6 +143,7 @@ const AdvancedChart = forwardRef<AdvancedChartRef, AdvancedChartProps>(
       prevChartTypeRef.current = undefined;
       prevOhlcvDataRef.current = [];
       prevOhlcvSeriesKeyRef.current = undefined;
+      ohlcvSeriesStaleSnapshotRef.current = null;
     }, [htmlContent]); // eslint-disable-line react-hooks/exhaustive-deps
 
     // ---- Helpers ----
@@ -171,6 +174,19 @@ const AdvancedChart = forwardRef<AdvancedChartRef, AdvancedChartProps>(
       }, LAYOUT_SETTLE_FALLBACK_MS);
     }, [isChartReady, clearLayoutSettleTimeout]);
 
+    // WebView remounts when `key` changes; parent state would otherwise still look "ready".
+    // `CHART_READY` clears indicator/position/chart-type refs once the new instance loads.
+    useEffect(() => {
+      if (ohlcvSeriesKey === undefined) {
+        return;
+      }
+      setChartReadyCount(0);
+      setWebViewLoaded(false);
+      setLayoutSettling(false);
+      clearLayoutSettleTimeout();
+      ohlcvSeriesStaleSnapshotRef.current = null;
+    }, [ohlcvSeriesKey, clearLayoutSettleTimeout]);
+
     useEffect(
       () => () => {
         clearLayoutSettleTimeout();
@@ -397,19 +413,23 @@ const AdvancedChart = forwardRef<AdvancedChartRef, AdvancedChartProps>(
     useEffect(() => {
       if (ohlcvData.length === 0 || !webViewLoaded) return;
 
+      if (ohlcvSeriesStaleSnapshotRef.current !== null) {
+        if (ohlcvData !== ohlcvSeriesStaleSnapshotRef.current) {
+          ohlcvSeriesStaleSnapshotRef.current = null;
+        } else {
+          return;
+        }
+      }
+
       const prevData = prevOhlcvDataRef.current;
 
       if (
         ohlcvSeriesKey !== undefined &&
         ohlcvSeriesKey !== prevOhlcvSeriesKeyRef.current
       ) {
         if (prevOhlcvSeriesKeyRef.current !== undefined) {
-          // Time range switch: ohlcvData is still stale from the previous
-          // period (fetch is in progress). Show skeleton, mark the key, and
-          // clear prevData so the fresh data triggers the length-diff branch
-          // on arrival — avoiding sending stale data to the WebView which
-          // causes a resolution race condition in TradingView.
           beginFullOhlcvLayoutSettle();
+          ohlcvSeriesStaleSnapshotRef.current = ohlcvData;
           prevOhlcvSeriesKeyRef.current = ohlcvSeriesKey;
           prevOhlcvDataRef.current = [];
           return;
@@ -561,6 +581,7 @@ const AdvancedChart = forwardRef<AdvancedChartRef, AdvancedChartProps>(
       <View style={styles.container}>
         <View style={styles.chartSurface}>
           <WebView
+            key={`advanced-chart-${ohlcvSeriesKey ?? ''}`}
             ref={webViewRef}
             source={{ html: htmlContent, baseUrl: CHARTING_LIBRARY_BASE_URL }}
             style={styles.webview}

app/components/UI/Charts/AdvancedChart/__tests__/AdvancedChart.test.tsx

@@ -115,8 +115,20 @@ describe('AdvancedChart', () => {
 
     expect(getByTestId('advanced-chart-skeleton')).toBeOnTheScreen();
 
+    const webViewAfterRerender = getByTestId('mock-webview');
     act(() => {
-      webView.props.onMessage({
+      webViewAfterRerender.props.onLoadEnd();
+    });
+    act(() => {
+      webViewAfterRerender.props.onMessage({
+        nativeEvent: {
+          data: JSON.stringify({ type: 'CHART_READY', payload: {} }),
+        },
+      });
+    });
+
+    act(() => {
+      webViewAfterRerender.props.onMessage({
         nativeEvent: {
           data: JSON.stringify({ type: 'CHART_LAYOUT_SETTLED', payload: {} }),
         },
@@ -201,6 +213,22 @@ describe('AdvancedChart', () => {
     );
     expect(setOhlcvCallsAfterKeyChange).toHaveLength(0);
 
+    // Series key remounts the WebView; load must finish before sync runs. Stale wait still applies.
+    const webViewAfterKeyChange = getByTestId('mock-webview');
+    act(() => {
+      webViewAfterKeyChange.props.onLoadEnd();
+    });
+
+    expect(
+      mockPostMessage.mock.calls.filter((call) => {
+        try {
+          return JSON.parse(call[0] as string).type === 'SET_OHLCV_DATA';
+        } catch {
+          return false;
+        }
+      }),
+    ).toHaveLength(0);
+
     // Fresh data arrives (same key, different bars) — NOW it should send
     mockPostMessage.mockClear();
     rerender(<AdvancedChart ohlcvData={freshBars} ohlcvSeriesKey="range-b" />);