Handle empty Predict search states

Author: matallui

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

@@ -698,11 +698,43 @@ describe('PredictFeed', () => {
       expect(getByText(/No results found/i)).toBeOnTheScreen();
     });
 
+    it('does not display no results message before the user enters a query', () => {
+      mockUsePredictSearchMarketData.mockReturnValue({
+        marketData: [],
+        isFetching: false,
+        error: null,
+        refetch: jest.fn(),
+      });
+
+      const { getByTestId, queryByText } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId(PredictSearchSelectorsIDs.SEARCH_BUTTON));
+
+      expect(queryByText(/No results found/i)).toBeNull();
+    });
+
+    it('does not display search error state before the user enters a query', () => {
+      mockUsePredictSearchMarketData.mockReturnValue({
+        marketData: [],
+        isFetching: false,
+        error: 'Search error',
+        refetch: jest.fn(),
+      });
+
+      const { getByTestId, queryByTestId } = render(<PredictFeed />);
+
+      fireEvent.press(getByTestId(PredictSearchSelectorsIDs.SEARCH_BUTTON));
+
+      expect(
+        queryByTestId(PredictFeedMockSelectorsIDs.OFFLINE_MOCK),
+      ).toBeNull();
+    });
+
     it('displays error state in search when fetch fails', () => {
       mockUsePredictSearchMarketData.mockReturnValue({
         marketData: [],
         isFetching: false,
-        error: new Error('Search error'),
+        error: 'Search error',
         refetch: jest.fn(),
       });
 

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

@@ -533,6 +533,7 @@ const PredictSearchOverlay: React.FC<PredictSearchOverlayProps> = ({
   );
 
   const isSearchLoading = isDebouncing || isFetching;
+  const hasSearchQuery = debouncedSearchQuery.trim().length > 0;
 
   const renderItem = useCallback(
     (info: { item: PredictMarketType; index: number }) => (
@@ -593,17 +594,21 @@ const PredictSearchOverlay: React.FC<PredictSearchOverlayProps> = ({
               testID={getPredictFeedSelector.searchSkeleton(3)}
             />
           </Box>
-        ) : error ? (
+        ) : error && hasSearchQuery ? (
           <PredictOffline onRetry={refetch} />
         ) : !marketData || marketData.length === 0 ? (
-          <Box twClassName="flex-1 justify-center items-center p-8">
-            <Text
-              variant={TextVariant.BodyMd}
-              color={TextColor.PrimaryAlternative}
-            >
-              {strings('predict.search_no_markets_found', { q: searchQuery })}
-            </Text>
-          </Box>
+          hasSearchQuery ? (
+            <Box twClassName="flex-1 justify-center items-center p-8">
+              <Text
+                variant={TextVariant.BodyMd}
+                color={TextColor.PrimaryAlternative}
+              >
+                {strings('predict.search_no_markets_found', {
+                  q: searchQuery,
+                })}
+              </Text>
+            </Box>
+          ) : null
         ) : (
           <FlashList<PredictMarketType>
             data={marketData}

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

@@ -539,18 +539,19 @@ describe('PredictFeed', () => {
   });
 
   describe('search error recovery', () => {
-    it('shows the offline error state in the search overlay when all market fetch retries fail', async () => {
-      const getMarketsSpy = jest.spyOn(
+    it('shows the offline error state in the search overlay when all search retries fail', async () => {
+      const searchMarketsSpy = jest.spyOn(
         Engine.context.PredictController,
-        'getMarkets',
+        'searchMarkets',
       );
-      getMarketsSpy.mockRejectedValue(new Error('Network error'));
+      searchMarketsSpy.mockRejectedValue(new Error('Network error'));
 
       const { getByTestId, findByPlaceholderText, findByTestId } =
         renderPredictFeedView();
 
       fireEvent.press(getByTestId(PredictSearchSelectorsIDs.SEARCH_BUTTON));
-      await findByPlaceholderText(SEARCH_PLACEHOLDER);
+      const searchInput = await findByPlaceholderText(SEARCH_PLACEHOLDER);
+      fireEvent.changeText(searchInput, 'bitcoin');
 
       // The hook retries up to 3 times with exponential backoff (~3-5 s total).
       // findByTestId waits until the error state appears after all retries exhaust.
@@ -562,42 +563,43 @@ describe('PredictFeed', () => {
         ),
       ).toBeOnTheScreen();
 
-      getMarketsSpy.mockRestore();
+      searchMarketsSpy.mockRestore();
     });
 
-    it('calls getMarkets again when the user presses Retry after an error', async () => {
-      const getMarketsSpy = jest.spyOn(
+    it('calls searchMarkets again when the user presses Retry after an error', async () => {
+      const searchMarketsSpy = jest.spyOn(
         Engine.context.PredictController,
-        'getMarkets',
+        'searchMarkets',
       );
-      getMarketsSpy.mockRejectedValue(new Error('Network error'));
+      searchMarketsSpy.mockRejectedValue(new Error('Network error'));
 
       const { getByTestId, findByPlaceholderText, findByTestId, findByText } =
         renderPredictFeedView();
 
       fireEvent.press(getByTestId(PredictSearchSelectorsIDs.SEARCH_BUTTON));
-      await findByPlaceholderText(SEARCH_PLACEHOLDER);
+      const searchInput = await findByPlaceholderText(SEARCH_PLACEHOLDER);
+      fireEvent.changeText(searchInput, 'bitcoin');
 
       await findByTestId(
         PREDICT_OFFLINE_TEST_IDS.ERROR_STATE,
         {},
         { timeout: 10000 },
       );
 
-      const callCountBeforeRetry = getMarketsSpy.mock.calls.length;
+      const callCountBeforeRetry = searchMarketsSpy.mock.calls.length;
 
       // Make subsequent calls succeed so the retry completes quickly.
-      getMarketsSpy.mockResolvedValue({ markets: [], nextCursor: null });
+      searchMarketsSpy.mockResolvedValue([]);
 
       fireEvent.press(await findByText('Retry'));
 
       await waitFor(() => {
-        expect(getMarketsSpy.mock.calls.length).toBeGreaterThan(
+        expect(searchMarketsSpy.mock.calls.length).toBeGreaterThan(
           callCountBeforeRetry,
         );
       });
 
-      getMarketsSpy.mockRestore();
+      searchMarketsSpy.mockRestore();
     });
   });
 });