chore(runway): cherry-pick fix(predict): cp-7.62.0 debounce search input in PredictSearchOverlay (#24825)

- fix(predict): cp-7.62.0 debounce search input in PredictSearchOverlay
(#24820)

## **Description**

The PredictSearchOverlay component was triggering API requests for every
character typed in the search input. This caused excessive network
requests and poor UX.

**Solution:** Added a 200ms debounce to the search query using the
existing `useDebouncedValue` hook, which is already used throughout the
codebase for similar search functionality (Bridge, Card onboarding,
Trending tokens, etc.).

**Changes:**
- Import and use `useDebouncedValue` hook in PredictSearchOverlay
- Pass debounced query to `usePredictMarketData` instead of raw search
query
- Track debouncing state to show loading indicator during debounce
period
- Combined `isDebouncing` and `isFetching` states for seamless loading
UX

## **Changelog**

CHANGELOG entry: Fixed search input triggering excessive API calls in
Predictions

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-486

## **Manual testing steps**

```gherkin
Feature: Debounced search in Predictions

  Scenario: user types in search field
    Given user has opened the Predictions feed
    And user has tapped the search button

    When user types "bitcoin" quickly
    Then only one API request is made after typing stops
    And skeleton loaders appear while debouncing
    And search results appear after debounce completes
```

## **Screenshots/Recordings**

### **Before**

API call triggered on every keystroke (network tab shows multiple
requests)

### **After**

Single API call after 200ms debounce delay



https://github.com/user-attachments/assets/399cf46f-6979-4be5-8993-6d71cbf049ee




## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Improves Predictions search UX and reduces API calls by debouncing
input.
> 
> - Import and use `useDebouncedValue` in `PredictSearchOverlay`;
introduce `SEARCH_DEBOUNCE_MS = 200`
> - Pass `debouncedSearchQuery` to `usePredictMarketData` instead of raw
`searchQuery`
> - Add `isDebouncing` and combine with `isFetching` as
`isSearchLoading` to show skeletons during debounce
> - Extend `PredictFeed.test.tsx` to mock `useDebouncedValue` and
assert: debounced query usage, loaders during debounce, results after
debounce, and `useDebouncedValue` called with `200`ms
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
2d6d25c. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[9d02315](9d02315)

Co-authored-by: Luis Taniça <matallui@gmail.com>

Author: runway-github[bot]

app/components/UI/Predict/views/PredictFeed/PredictFeed.test.tsx

@@ -43,6 +43,14 @@ import { usePredictMarketData } from '../../hooks/usePredictMarketData';
 
 const mockUsePredictMarketData = usePredictMarketData as jest.Mock;
 
+jest.mock('../../../../hooks/useDebouncedValue', () => ({
+  useDebouncedValue: jest.fn(),
+}));
+
+import { useDebouncedValue } from '../../../../hooks/useDebouncedValue';
+
+const mockUseDebouncedValue = useDebouncedValue as jest.Mock;
+
 jest.mock('../../hooks/useFeedScrollManager', () => ({
   useFeedScrollManager: jest.fn(),
 }));
@@ -232,6 +240,7 @@ describe('PredictFeed', () => {
       refetch: jest.fn(),
       fetchMore: jest.fn(),
     });
+    mockUseDebouncedValue.mockImplementation((value: string) => value);
   });
 
   afterEach(() => {
@@ -601,4 +610,74 @@ describe('PredictFeed', () => {
       );
     });
   });
+
+  describe('search debounce behavior', () => {
+    it('passes debounced search query to usePredictMarketData', () => {
+      mockUseDebouncedValue.mockReturnValue('debounced-query');
+      const { getByTestId, getByPlaceholderText } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId('predict-search-button'));
+      const searchInput = getByPlaceholderText('Search prediction markets');
+      fireEvent.changeText(searchInput, 'bitcoin');
+
+      const searchCalls = mockUsePredictMarketData.mock.calls.filter(
+        (call: [{ q?: string }]) => call[0].q !== undefined,
+      );
+      expect(searchCalls[searchCalls.length - 1][0].q).toBe('debounced-query');
+    });
+
+    it('displays skeleton loaders when debouncing search input', () => {
+      mockUseDebouncedValue.mockReturnValue('');
+      mockUsePredictMarketData.mockReturnValue({
+        marketData: [],
+        isFetching: false,
+        isFetchingMore: false,
+        error: null,
+        hasMore: false,
+        refetch: jest.fn(),
+        fetchMore: jest.fn(),
+      });
+      const { getByTestId, getByPlaceholderText } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId('predict-search-button'));
+      const searchInput = getByPlaceholderText('Search prediction markets');
+      fireEvent.changeText(searchInput, 'bitcoin');
+
+      expect(getByTestId('search-skeleton-1')).toBeOnTheScreen();
+    });
+
+    it('displays search results after debounce completes', () => {
+      mockUseDebouncedValue.mockReturnValue('bitcoin');
+      mockUsePredictMarketData.mockReturnValue({
+        marketData: [
+          { id: '1', title: 'Bitcoin Market 1' },
+          { id: '2', title: 'Bitcoin Market 2' },
+        ],
+        isFetching: false,
+        isFetchingMore: false,
+        error: null,
+        hasMore: false,
+        refetch: jest.fn(),
+        fetchMore: jest.fn(),
+      });
+      const { getByTestId, getByPlaceholderText } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId('predict-search-button'));
+      const searchInput = getByPlaceholderText('Search prediction markets');
+      fireEvent.changeText(searchInput, 'bitcoin');
+
+      expect(getByTestId('predict-search-result-0')).toBeOnTheScreen();
+      expect(getByTestId('predict-search-result-1')).toBeOnTheScreen();
+    });
+
+    it('invokes useDebouncedValue with 200ms delay', () => {
+      const { getByTestId, getByPlaceholderText } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId('predict-search-button'));
+      const searchInput = getByPlaceholderText('Search prediction markets');
+      fireEvent.changeText(searchInput, 'test');
+
+      expect(mockUseDebouncedValue).toHaveBeenCalledWith('test', 200);
+    });
+  });
 });

app/components/UI/Predict/views/PredictFeed/PredictFeed.tsx

@@ -48,6 +48,7 @@ import {
   getPredictMarketListSelector,
 } from '../../Predict.testIds';
 import { usePredictMarketData } from '../../hooks/usePredictMarketData';
+import { useDebouncedValue } from '../../../../hooks/useDebouncedValue';
 import { useFeedScrollManager } from '../../hooks/useFeedScrollManager';
 import {
   PredictCategory,
@@ -515,6 +516,8 @@ interface PredictSearchOverlayProps {
   onClose: () => void;
 }
 
+const SEARCH_DEBOUNCE_MS = 200;
+
 const PredictSearchOverlay: React.FC<PredictSearchOverlayProps> = ({
   isVisible,
   onClose,
@@ -523,13 +526,20 @@ const PredictSearchOverlay: React.FC<PredictSearchOverlayProps> = ({
   const { colors } = useTheme();
   const insets = useSafeAreaInsets();
   const [searchQuery, setSearchQuery] = useState('');
+  const debouncedSearchQuery = useDebouncedValue(
+    searchQuery,
+    SEARCH_DEBOUNCE_MS,
+  );
+  const isDebouncing = searchQuery !== debouncedSearchQuery;
 
   const { marketData, isFetching, error, refetch } = usePredictMarketData({
     category: 'trending',
-    q: searchQuery,
+    q: debouncedSearchQuery,
     pageSize: 20,
   });
 
+  const isSearchLoading = isDebouncing || isFetching;
+
   const handleSearch = useCallback((text: string) => {
     setSearchQuery(text);
   }, []);
@@ -607,7 +617,7 @@ const PredictSearchOverlay: React.FC<PredictSearchOverlayProps> = ({
 
       {searchQuery.length > 0 && (
         <Box twClassName="flex-1">
-          {isFetching ? (
+          {isSearchLoading ? (
             <Box twClassName="px-4 pt-4">
               <PredictMarketSkeleton testID="search-skeleton-1" />
               <PredictMarketSkeleton testID="search-skeleton-2" />