fix(predict): predict feed animations, tab bar ui & search overlay

[matallui]

Description

This PR refactors the PredictFeed component to fix critical UX issues and align with design system standards.

Why:

1. Broken Android animations: The scroll-based header animation was extremely jittery on Android, making the feature unusable
2. Wrong tab bar component: We were using a custom tab bar instead of the design system TabsBar component

What changed:

1. Fixed jittery Android animations: Replaced continuous scroll-tracking animation with a threshold-based binary show/hide animation that works smoothly on both platforms

2. Improved header reveal UX: Users can now reveal the header (balance card) at any scroll position by scrolling up. Previously, users had to scroll ALL THE WAY back to the top before the header would reappear - frustrating when deep in the feed

3. Correct design system tab bar: Migrated from custom tab implementation to the TabsBar component from component-library/components-temp/Tabs

4. Fixed search overlay state preservation: When users close the search overlay, the feed now returns to its previous state instead of re-rendering from scratch. This preserves scroll position and loaded content

Changelog

CHANGELOG entry: Fix Predict feed animations, tab bar UI and search overlay

Related issues

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

Manual testing steps

Feature: PredictFeed navigation and animations

  Scenario: user scrolls through prediction markets (Android animation fix)
    Given user is on the Predictions screen with markets loaded

    When user scrolls down past the threshold
    Then the header should animate out smoothly (no jitter)
    
    When user scrolls up from ANY position in the feed
    Then the header should animate back into view immediately
    And user should NOT need to scroll all the way to the top

  Scenario: user switches between category tabs
    Given user is on the Predictions screen

    When user swipes left/right or taps a category tab
    Then the tab content should switch smoothly
    And the tab bar should match design system styling

  Scenario: user searches and closes search (state preservation)
    Given user is on the Predictions screen
    And user has scrolled down and loaded more markets

    When user taps the search icon
    Then a full-screen search overlay should appear
    
    When user taps Cancel
    Then the overlay should close
    And the feed should be in the SAME state as before (not re-rendered)
    And scroll position should be preserved

Screenshots/Recordings

Before

After

Screen.Recording.2026-01-08.at.10.20.07.AM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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.

---

Technical Details

Files Changed:

Action	Files
Created	hooks/useFeedScrollManager.ts - New scroll hook with threshold-based animation
Rewritten	views/PredictFeed/PredictFeed.tsx - PagerView + inline components + design system TabsBar
Rewritten	views/PredictFeed/PredictFeed.test.tsx - Updated tests
Updated	routes/index.tsx - Import path change
Deleted	components/PredictMarketList/, components/MarketListContent/, components/SearchBox/, components/PredictFeedHeader/, hooks/useSharedScrollCoordinator.ts, types/scrollCoordinator.ts

Net change: -1,865 lines (deleted fragmented components, consolidated into single file)

---

Note

Modernizes the predictions feed and removes legacy components.

• Implements new useFeedScrollManager with threshold-based, binary header show/hide animation; adds comprehensive tests
• Rewrites views/PredictFeed/PredictFeed.tsx to use TabsBar + PagerView tabs, per-tab FlashList, and an inline full-screen search overlay
• Preserves feed state across search, and handles loading/error/empty states within the new feed
• Removes old PredictMarketList, MarketListContent, PredictFeedHeader, SearchBox, and useSharedScrollCoordinator (and related tests/types)
• Updates routes/index.tsx import path

^{Written by Cursor Bugbot for commit d67e199. This will update automatically on new commits. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[codecov-commenter]

Codecov Report

❌ Patch coverage is 72.33010% with 57 lines in your changes missing coverage. Please review.
✅ Project coverage is 79.29%. Comparing base (d672a66) to head (891f6cd).
⚠️ Report is 23 commits behind head on main.

Files with missing lines	Patch %	Lines
...omponents/UI/Predict/hooks/useFeedScrollManager.ts	51.76%	40 Missing and 1 partial ⚠️
...nents/UI/Predict/views/PredictFeed/PredictFeed.tsx	86.77%	8 Missing and 8 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #24337      +/-   ##
==========================================
+ Coverage   79.28%   79.29%   +0.01%     
==========================================
  Files        4065     4062       -3     
  Lines      107173   107399     +226     
  Branches    21830    21897      +67     
==========================================
+ Hits        84971    85164     +193     
- Misses      16248    16270      +22     
- Partials     5954     5965      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[kevinbluer]

LGTM (other than a visual nit)...nice work!

[kevinbluer]

Nit: I think there needs to be a bit more spacing after the tabbar (also no horizontal line, although that might be dropped on the new tabbar given it's not present on the home screen either):

[matallui]

Good catch! Just updated to add that extra spacing, but still blend in while we scroll. There is no horizontal line with this tab bar AFAIK, so not adding that.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePredictions
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

This PR is a significant refactoring of the Predict (Predictions) feature UI components. The changes include:

1. Complete rewrite of PredictFeed.tsx: The main feed view has been restructured with new scroll management, tab navigation using PagerView instead of ScrollableTabView, and new animated header behavior.

2. Deleted components: MarketListContent, PredictMarketList, PredictFeedHeader, SearchBox, and useSharedScrollCoordinator hook - all functionality consolidated into PredictFeed.tsx.

3. New hook: useFeedScrollManager replaces useSharedScrollCoordinator with time-based header animation.

The changes are entirely isolated to the Predict feature (app/components/UI/Predict/) and don't affect any other wallet functionality. The E2E test selectors (like PredictMarketListSelectorsIDs.CONTAINER, getPredictMarketListSelector.marketCardByCategory) are maintained, but the underlying UI behavior has changed significantly.

There are 7 E2E test files in e2e/specs/predict/ that use the SmokePredictions tag and test various prediction market flows (open position, cash out, claim positions, API down handling, geo restriction, etc.). These tests should be run to verify the refactored UI still works correctly.

No other test tags are needed since:

• Changes are isolated to Predict feature only
• No core wallet, accounts, network, or other features are affected
• No changes to shared components or utilities used by other features

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
70.5% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud