chore(predict): implement sequential refresh pattern for order preview (#22499)

caieu · web-flow · commit d4803d4ebbe7 · 2025-11-11T23:24:42.000Z
## **Description** Changes the auto-refresh behavior in usePredictOrderPreview from interval-based to sequential pattern. The timer now waits for the preview response before starting the timeout countdown, preventing overlapping requests. Key changes: - Replace setInterval with recursive setTimeout pattern - Add scheduleNextRefresh function to trigger after response - Schedule next refresh after both successful and error responses - Clear pending timers on unmount and parameter changes - Update tests to verify sequential refresh behavior This ensures the autoRefreshTimeout is a delay AFTER each response completes, rather than a fixed interval that could cause overlapping requests when API response times exceed the timeout value.  ## **Changelog**  CHANGELOG entry: null ## **Related issues** Fixes: [PRED-299](https://consensyssoftware.atlassian.net/browse/PRED-299?atlOrigin=eyJpIjoiOTQwNThkMTg4N2UzNDQ1MjljZTEyNGM0MTlhOGZjMjUiLCJwIjoiaiJ9) ## **Manual testing steps** ```gherkin Feature: my feature name Scenario: user [verb for user action] Given [describe expected initial app state] When user [verb for user action] Then [describe expected outcome] ``` ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > Replaces interval-based auto-refresh with response-triggered sequential timeouts in `usePredictOrderPreview`, adds cleanup on param changes/unmount, and updates tests accordingly. > > - **Hook `usePredictOrderPreview`**: > - Replace `setInterval` auto-refresh with sequential `setTimeout` scheduled via `scheduleNextRefresh` after each response (success or error). > - Introduce refs for timer and callbacks: `refreshTimerRef`, `calculatePreviewRef`, `scheduleNextRefreshRef`. > - Clear pending refresh timers on unmount and when parameters change; debounce initial calculation. > - Minor safety: optional chaining on `calculatePreviewRef.current?.()`. > - **Tests `usePredictOrderPreview.test.ts`**: > - Rename and add cases to verify response-triggered scheduling, waiting before countdown, scheduling after errors, and clearing timers on parameter changes and unmount. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 2c9fb28. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>  [PRED-299]: https://consensyssoftware.atlassian.net/browse/PRED-299?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
diff --git a/app/components/UI/Predict/hooks/usePredictOrderPreview.test.ts b/app/components/UI/Predict/hooks/usePredictOrderPreview.test.ts
@@ -157,7 +157,7 @@ describe('usePredictOrderPreview', () => {
       expect(mockPreviewOrder).toHaveBeenCalledTimes(1);
     });
 
-    it('auto-refreshes preview at specified interval', async () => {
+    it('schedules next refresh after receiving response', async () => {
       mockPreviewOrder.mockResolvedValue(mockPreview);
 
       const params = { ...defaultParams, autoRefreshTimeout: 2000 };
@@ -189,6 +189,109 @@ describe('usePredictOrderPreview', () => {
 
       expect(mockPreviewOrder).toHaveBeenCalledTimes(3);
     });
+
+    it('waits for response before starting timeout countdown', async () => {
+      let callCount = 0;
+      mockPreviewOrder.mockImplementation(async () => {
+        callCount += 1;
+        return mockPreview;
+      });
+
+      const params = { ...defaultParams, autoRefreshTimeout: 1000 };
+      const { waitForNextUpdate } = renderHook(() =>
+        usePredictOrderPreview(params),
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+
+      await waitForNextUpdate();
+
+      expect(callCount).toBe(1);
+
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+
+      expect(callCount).toBe(1);
+
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+
+      await waitForNextUpdate();
+
+      expect(callCount).toBe(2);
+    });
+
+    it('schedules next refresh after error response', async () => {
+      mockPreviewOrder.mockRejectedValue(new Error('API Error'));
+
+      const consoleErrorSpy = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {
+          // Suppress console.error output during test
+        });
+
+      const params = { ...defaultParams, autoRefreshTimeout: 2000 };
+      const { waitForNextUpdate } = renderHook(() =>
+        usePredictOrderPreview(params),
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+
+      await waitForNextUpdate();
+
+      expect(mockPreviewOrder).toHaveBeenCalledTimes(1);
+
+      mockPreviewOrder.mockResolvedValue(mockPreview);
+
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      await waitForNextUpdate();
+
+      expect(mockPreviewOrder).toHaveBeenCalledTimes(2);
+
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('clears pending refresh timer when parameters change', async () => {
+      mockPreviewOrder.mockResolvedValue(mockPreview);
+
+      const params = { ...defaultParams, autoRefreshTimeout: 2000 };
+      const { waitForNextUpdate, rerender } = renderHook(
+        (props: PreviewOrderParams & { autoRefreshTimeout?: number }) =>
+          usePredictOrderPreview(props),
+        { initialProps: params },
+      );
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+
+      await waitForNextUpdate();
+
+      expect(mockPreviewOrder).toHaveBeenCalledTimes(1);
+
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+
+      rerender({ ...params, size: 200 });
+
+      act(() => {
+        jest.advanceTimersByTime(100);
+      });
+
+      await waitForNextUpdate();
+
+      expect(mockPreviewOrder).toHaveBeenCalledTimes(2);
+    });
   });
 
   describe('error handling', () => {
diff --git a/app/components/UI/Predict/hooks/usePredictOrderPreview.ts b/app/components/UI/Predict/hooks/usePredictOrderPreview.ts
@@ -20,6 +20,7 @@ export function usePredictOrderPreview(
 
   const currentOperationRef = useRef<number>(0);
   const isMountedRef = useRef<boolean>(true);
+  const refreshTimerRef = useRef<NodeJS.Timeout | null>(null);
 
   const { previewOrder } = usePredictTrading();
 
@@ -35,6 +36,26 @@ export function usePredictOrderPreview(
     positionId,
   } = params;
 
+  // Define ref before using it in scheduleNextRefresh
+  const calculatePreviewRef = useRef<(() => Promise<void>) | null>(null);
+
+  const scheduleNextRefresh = useCallback(() => {
+    if (!autoRefreshTimeout || !isMountedRef.current) return;
+
+    // Clear any existing timer
+    if (refreshTimerRef.current) {
+      clearTimeout(refreshTimerRef.current);
+    }
+
+    // Schedule next refresh after the timeout
+    refreshTimerRef.current = setTimeout(() => {
+      calculatePreviewRef.current?.();
+    }, autoRefreshTimeout);
+  }, [autoRefreshTimeout]);
+
+  const scheduleNextRefreshRef = useRef(scheduleNextRefresh);
+  scheduleNextRefreshRef.current = scheduleNextRefresh;
+
   const calculatePreview = useCallback(async () => {
     const operationId = ++currentOperationRef.current;
 
@@ -63,6 +84,8 @@ export function usePredictOrderPreview(
       if (operationId === currentOperationRef.current && isMountedRef.current) {
         setPreview(p);
         setError(null);
+        // Schedule next refresh after successful response
+        scheduleNextRefreshRef.current();
       }
     } catch (err) {
       console.error('Failed to preview order:', err);
@@ -93,6 +116,8 @@ export function usePredictOrderPreview(
           defaultCode: PREDICT_ERROR_CODES.PREVIEW_FAILED,
         });
         setError(parsedErrorMessage);
+        // Schedule next refresh after error response
+        scheduleNextRefreshRef.current();
       }
     } finally {
       if (operationId === currentOperationRef.current && isMountedRef.current) {
@@ -110,32 +135,31 @@ export function usePredictOrderPreview(
     positionId,
   ]);
 
-  const calculatePreviewRef = useRef(calculatePreview);
   calculatePreviewRef.current = calculatePreview;
 
   useEffect(
     () => () => {
       isMountedRef.current = false;
+      // Clear refresh timer on unmount
+      if (refreshTimerRef.current) {
+        clearTimeout(refreshTimerRef.current);
+      }
     },
     [],
   );
 
   useEffect(() => {
+    // Clear any pending refresh timer when parameters change
+    if (refreshTimerRef.current) {
+      clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = null;
+    }
+
     const debounceTimer = setTimeout(() => {
-      calculatePreviewRef.current();
+      calculatePreviewRef.current?.();
     }, 100);
 
     return () => clearTimeout(debounceTimer);
-  }, [providerId, marketId, outcomeId, outcomeTokenId, side, size]);
-
-  useEffect(() => {
-    if (!autoRefreshTimeout) return undefined;
-
-    const refreshTimer = setInterval(() => {
-      calculatePreviewRef.current();
-    }, autoRefreshTimeout);
-
-    return () => clearInterval(refreshTimer);
   }, [
     providerId,
     marketId,
