feat(predict): add skeleton loaders for improved loading UX

[andrepimenta]

Description

This PR significantly improves the loading experience across the Predict feature by implementing skeleton loaders in place of generic loading indicators. Skeleton loaders provide visual placeholders that mimic the actual content structure, reducing perceived loading time and creating a smoother user experience.

CHANGELOG entry: null

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-11-11.at.12.59.33.mov

What Changed

Market List

• Created PredictMarketSkeleton component to show placeholder cards during market list loading
• Replaced generic loading spinner with realistic market card skeletons
• Applied to both initial load and pagination footer

Market Details Page

• Created PredictDetailsHeaderSkeleton for header section (back arrow, avatar, title)
• Created PredictDetailsContentSkeleton for outcome options area
• Created PredictDetailsButtonsSkeleton for action buttons (Buy Yes/No)
• Header renders immediately with skeleton if route params are missing
• Content and buttons show skeletons only during initial market data fetch
• Chart component handles its own loading state independently

Home Screen - Positions Tab

• Added inline skeleton for "Available Balance" value in PredictPositionsHeader
• Added inline skeleton for "Unrealized P&L" value in PredictPositionsHeader
• Removed early return to ensure card always renders during loading
• Hidden arrow icon during balance loading state
• Created PredictPositionSkeleton component for individual position items
• Replaced large ActivityIndicator with 4 skeleton position cards in PredictPositions

Buy/Trade Preview Screen

• Added smart skeleton loader for "To win" value
• Skeleton only appears when user changes input amount (not during auto-refresh)
• Uses previousValueRef to track actual value changes
• Automatically clears after calculation completes
• Prevents annoying skeleton flashing from background 1s auto-refresh

Why These Changes

• Improved Perceived Performance: Skeleton loaders reduce perceived loading time by providing visual feedback that content is coming
• Consistent UX Pattern: Matches modern mobile app patterns (Facebook, Instagram, etc.)
• Better User Feedback: Shows the structure of content before it loads, setting expectations
• Reduced Jarring Transitions: Smooth visual transition from skeleton to content vs. spinner to content
• Context Preservation: Users can see where content will appear and what type of content to expect

Technical Approach

1. Component Structure: Each skeleton component mirrors the layout and dimensions of its real content counterpart
2. Modular Design: Split complex skeletons into reusable sub-components (Header, Content, Buttons)
3. Conditional Rendering: Smart logic to show skeletons only during appropriate loading states
4. Independent Loading States: Different sections load independently (e.g., chart vs. market data)
5. Smart Debouncing: Buy preview skeleton uses value change detection + debouncing to avoid flash

Design Alignment

All skeleton implementations were created based on Figma SVG designs provided by the design team, ensuring pixel-perfect alignment with design specifications.

Changelog

Added

• Added skeleton loader component for prediction market cards in feed
• Added skeleton loaders for market details page (header, content, action buttons)
• Added skeleton loaders for Available Balance and Unrealized P&L on home screen
• Added skeleton loader component for position items in positions list
• Added smart skeleton loader for "To win" value in buy preview screen

Changed

• Replaced generic loading spinner with skeleton cards in market list
• Replaced large activity indicator with position card skeletons in positions list
• Updated positions header to always render main card with inline value skeletons during loading

Related Issues

Refs: [Add issue number if applicable]

Manual Testing Steps

Market List Skeleton

GIVEN I am on the Predict tab
WHEN the market list is loading for the first time
THEN I should see 4 skeleton market cards with avatar, title, content area, and footer
AND the skeletons should smoothly transition to real market cards once loaded

WHEN I scroll to the bottom of the market list
AND more markets are being fetched
THEN I should see 2 skeleton cards at the bottom
AND they should transition to real market cards once loaded

Market Details Skeleton

GIVEN I tap on a prediction market from the list
WHEN the market details page is loading
AND the title exists in route params
THEN I should see the header with real back arrow, avatar, and title immediately
AND I should see skeleton content for outcome options
AND I should see skeleton buttons at the bottom

WHEN the market data finishes loading
THEN the skeleton content should transition to real outcome options
AND the skeleton buttons should transition to real "Buy Yes" and "Buy No" buttons

GIVEN I tap on a market with no title in route params
WHEN the market details page loads
THEN I should see a skeleton header with functional back arrow
AND the avatar and title should be skeleton placeholders
AND the skeleton header should transition to real content once market data loads

Home Screen Positions Skeleton

GIVEN I am on the Predict home screen
WHEN my balance and unrealized P&L are loading
THEN I should see the main card with skeleton placeholders for both values
AND the arrow icon next to Available Balance should be hidden
AND the skeletons should smoothly transition to real values once loaded

WHEN my positions list is loading
THEN I should see 4 skeleton position cards
AND each should show avatar, title lines, and value placeholders
AND they should transition to real position items once loaded

WHEN I have no positions and no balance data
AND nothing is loading
THEN the positions header card should not render at all

Buy Preview Skeleton

GIVEN I am on the Buy/Trade preview screen
WHEN I type in a new amount value
THEN I should see the "To win" label remain visible
AND the value should show as a skeleton while calculating
AND the skeleton should disappear once calculation completes (max 500ms)

WHEN the preview auto-refreshes every 1 second
THEN the skeleton should NOT flash or appear
AND the "To win" value should update silently in the background

WHEN I clear the input to 0
THEN the skeleton state should reset
AND no skeleton should show for the "To win" value

Screenshots/Recordings

Pre-merge Checklist

• Manually tested all skeleton loader scenarios
• All unit tests pass (yarn jest app/components/UI/Predict)
• No new linter errors
• No TypeScript errors
• Screenshots/recordings added (UI changes)
• Follows coding guidelines and design system rules
• PR template completed
• Assigned to myself
• Team label added
• Branch follows naming convention

Components Created

New Files

1. app/components/UI/Predict/components/PredictMarketSkeleton/

   • PredictMarketSkeleton.tsx - Skeleton for market list cards
   • PredictMarketSkeleton.test.tsx - Unit tests
   • index.ts - Barrel export

2. app/components/UI/Predict/components/PredictDetailsHeaderSkeleton/

   • PredictDetailsHeaderSkeleton.tsx - Skeleton for details page header
   • PredictDetailsHeaderSkeleton.test.tsx - Unit tests
   • index.ts - Barrel export

3. app/components/UI/Predict/components/PredictDetailsContentSkeleton/

   • PredictDetailsContentSkeleton.tsx - Skeleton for details page content
   • PredictDetailsContentSkeleton.test.tsx - Unit tests
   • index.ts - Barrel export

4. app/components/UI/Predict/components/PredictDetailsButtonsSkeleton/

   • PredictDetailsButtonsSkeleton.tsx - Skeleton for action buttons
   • PredictDetailsButtonsSkeleton.test.tsx - Unit tests
   • index.ts - Barrel export

5. app/components/UI/Predict/components/PredictPositionSkeleton/

   • PredictPositionSkeleton.tsx - Skeleton for position list items
   • PredictPositionSkeleton.test.tsx - Unit tests
   • index.ts - Barrel export

Modified Files

1. app/components/UI/Predict/components/MarketListContent/MarketListContent.tsx

   • Integrated PredictMarketSkeleton for loading states

2. app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.tsx

   • Integrated header, content, and button skeletons
   • Modified conditional rendering logic

3. app/components/UI/Predict/views/PredictMarketDetails/PredictMarketDetails.test.tsx

   • Updated tests to expect new skeleton components

4. app/components/UI/Predict/components/PredictPositionsHeader/PredictPositionsHeader.tsx

   • Added inline skeletons for balance and P&L values
   • Modified loading state logic

5. app/components/UI/Predict/components/PredictPositionsHeader/PredictPositionsHeader.test.tsx

   • Updated tests for new loading behavior

6. app/components/UI/Predict/components/PredictPositions/PredictPositions.tsx

   • Replaced ActivityIndicator with PredictPositionSkeleton components

7. app/components/UI/Predict/components/PredictPositions/PredictPositions.test.tsx

   • Updated tests to expect skeleton components

8. app/components/UI/Predict/views/PredictBuyPreview/PredictBuyPreview.tsx

   • Added smart skeleton for "To win" value with value-change detection

9. app/components/UI/Predict/hooks/usePredictOrderPreview.ts

   • Exposed isCalculating state for skeleton logic

Technical Notes

Design System Compliance

• All skeletons use Box component from @metamask/design-system-react-native
• Styling uses useTailwind() hook and twClassName prop
• No StyleSheet usage (adheres to workspace rules)
• Uses design system color tokens (bg-muted, bg-section, etc.)

Testing Strategy

• Unit tests for all new skeleton components
• Integration tests updated for modified components
• All tests use React Testing Library best practices

Performance Considerations

• Skeleton components are lightweight (no heavy computations)
• Smart debouncing prevents excessive skeleton re-renders
• Independent loading states prevent unnecessary full-page re-renders

Review Focus Areas

1. Visual Accuracy: Do skeletons match the Figma designs and real content structure?
2. Loading Logic: Are skeletons appearing at the right times and transitioning smoothly?
3. User Experience: Does this feel smoother than the previous loading indicators?
4. Test Coverage: Do tests properly cover loading states and transitions?
5. Code Organization: Are components modular and reusable?

---

Note

Adds dedicated skeleton loaders for market lists, market details, positions, and buy preview, replacing spinners and refining loading logic.

• Predict UI:
  • Market List (MarketListContent.tsx): Replace generic loading/footer placeholders with PredictMarketSkeleton cards for initial load and pagination.
  • Market Details (PredictMarketDetails.tsx): Add PredictDetailsHeaderSkeleton, PredictDetailsContentSkeleton, and PredictDetailsButtonsSkeleton; render skeletons during initial fetch; keep chart loading independent; refine header rendering when route params missing.
  • Positions:
    • Header (PredictPositionsHeader.tsx): Inline skeletons for Available Balance and Unrealized P&L; always render card while loading; disable arrow while loading.
    • List (PredictPositions.tsx): Replace ActivityIndicator with 4 PredictPositionSkeleton rows during initial/refresh loads; gate PredictNewButton when loading.
  • Buy Preview (PredictBuyPreview.tsx): Show smart skeleton for "To win" value only while recalculating due to user input; keep balance skeleton.
• New Components: PredictMarketSkeleton, PredictDetailsHeaderSkeleton, PredictDetailsContentSkeleton, PredictDetailsButtonsSkeleton, PredictPositionSkeleton (+ index files).
• Misc: Simplify selectPredictEnabledFlag property check; update tests and snapshots to assert skeletons.

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

[caieu]

LGTM

[sonarqubecloud]

Quality Gate passed

Issues
5 New issues
0 Accepted issues

Measures
0 Security Hotspots
82.3% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud