perf(perps): improved navigation time on low/middle range android devices (MetaMask#22701)

## **Description**

This PR improves navigation performance in the Perps feature to provide
a smoother, more responsive experience on lower-end Android devices.

**Problem:**
Navigation between Perps screens can feel sluggish on lower-end devices,
particularly when:
- Tapping market cards to view market details
- Opening order screens via Long/Short buttons
- Transitions lack visual feedback and feel unresponsive

**Solution:**
Implemented two targeted optimizations:

1. **Navigation Animations** - Enable smooth screen transitions with
proper animation timing to provide visual feedback during navigation
2. **Memoize Market Lookups** - Pre-compute market data lookups in
PerpsCard (200-300 items) to eliminate blocking array searches during
user interactions

**Impact:**
- Smoother navigation transitions with visual feedback
- Eliminated blocking array searches during user taps (200-300 item
lookups)
- Improved perceived performance on lower-end devices

## **Changelog**

CHANGELOG entry: Improved Perps navigation performance for smoother
screen transitions on lower-end devices

## **Related issues**

Fixes: [Internal investigation - no public issue]

## **Manual testing steps**

```gherkin
Feature: Perps Navigation Performance

  Scenario: user navigates from home to market details
    Given user is on Perps home screen with market cards visible
    When user taps on any market card (e.g., BTC-USD)
    Then screen transition should feel smooth and immediate
    And market details view should appear without noticeable delay

  Scenario: user opens order screen from market details
    Given user is viewing market details for any asset
    When user taps the "Long" or "Short" button
    Then order screen should appear with smooth animation
    And screen should load without noticeable delay

  Scenario: user navigates between multiple markets quickly
    Given user is on Perps home screen
    When user taps multiple different market cards in quick succession
    Then each navigation should feel responsive
    And there should be no UI freezing between taps

  Scenario: user tests on lower-end Android device
    Given user has a mid-to-low-end Android device (e.g., 4GB RAM)
    When user performs all navigation flows in Perps
    Then navigation should feel snappy with smooth animations
    And tapping market cards should respond immediately without lag
```

## **Screenshots/Recordings**

### **Before**

<!-- Add before recordings when testing on device -->

### **After**

<!-- Add after recordings when testing on device -->

## **Technical Details**

### Navigation Animations
**File:** `app/components/UI/Perps/routes/index.tsx`
- Enable navigation animations for smooth screen transitions
- Provides visual feedback during navigation

### Memoized Market Lookups
**File:** `app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx`
- Added `useMemo` to pre-compute market lookups:
  ```typescript
  const market = useMemo(
    () => markets.find((m) => m.symbol === symbol),
    [markets, symbol],
  );
  ```
- Eliminates blocking array search during user taps (markets array
typically contains 200-300 items)

## **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 (performance improvements -
visual testing required)
- [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.

## **Testing Notes for Reviewers**

**Focus Areas:**
1. Test on lower-end Android device (4GB RAM or less) if possible
2. Pay attention to navigation "feel" - should be immediate and smooth
with animated transitions
3. Test rapid tapping of market cards - should remain responsive
4. No regression in functionality - all data should still load correctly

**What to look for:**
- ✅ Smooth animated transitions between screens
- ✅ Instant response when tapping market cards or Long/Short buttons
- ✅ No lag when tapping cards in quick succession
- ❌ No frozen transitions or unresponsive UI
- ❌ No missing data or broken functionality

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Defers non-critical PerpsOrderView data subscriptions until after
first render, memoizes PerpsCard market lookup, enables default screen
animations, and updates tests to await deferred data.
> 
> - **PerpsOrderView (`PerpsOrderView.tsx`)**:
> - *Deferred data loading*: Introduces `isDataReady` (via
`requestAnimationFrame`) to delay `usePerpsMarketData`,
`usePerpsLivePrices`, and `usePerpsTopOfBook` subscriptions until after
initial render; updates `usePerpsMeasurement` conditions accordingly.
> - Minor refactors: computed styles memoization unchanged behavior;
validation/messages and handlers unchanged but aligned with deferred
data.
> - **PerpsCard (`PerpsCard.tsx`)**:
> - *Performance*: Adds `useMemo` for market lookup and simplifies
`handlePress` deps to use memoized `market`.
> - **Navigation (`routes/index.tsx`)**:
>   - Removes `animationEnabled: false` to allow default transitions.
> - **Tests (`PerpsOrderView.test.tsx`)**:
> - Mocks `usePerpsLivePrices`; switches to async assertions
(`findByText`) for values shown after deferred readiness.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
faffdca. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: abretonc7s

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx

@@ -131,6 +131,10 @@ jest.mock('../../hooks', () => ({
   usePerpsTrading: jest.fn(),
   usePerpsNetwork: jest.fn(),
   usePerpsPrices: jest.fn(),
+  usePerpsLivePrices: jest.fn(() => ({
+    ETH: { price: '3000', percentChange24h: '2.5' },
+    BTC: { price: '3000', percentChange24h: '2.5' },
+  })),
   usePerpsPaymentTokens: jest.fn(),
   usePerpsConnection: jest.fn(() => ({
     isConnected: true,
@@ -1244,7 +1248,9 @@ describe('PerpsOrderView', () => {
       expect(placeOrderButton).toBeDefined();
 
       // Verify validation errors are shown (indicating disabled state)
-      expect(screen.getByText('Insufficient balance')).toBeDefined();
+      // Wait for error to appear after isDataReady becomes true
+      const errorText = await screen.findByText('Insufficient balance');
+      expect(errorText).toBeDefined();
     });
 
     it('disables button when order is placing', async () => {
@@ -2839,7 +2845,7 @@ describe('PerpsOrderView', () => {
       expect(orderTypeText).toBeOnTheScreen();
     });
 
-    it('should display correct asset and price in header', () => {
+    it('should display correct asset and price in header', async () => {
       // Arrange - Mock specific asset data
       (usePerpsOrderContext as jest.Mock).mockReturnValue({
         ...defaultMockHooks.usePerpsOrderContext,
@@ -2849,7 +2855,7 @@ describe('PerpsOrderView', () => {
         },
       });
 
-      const { getByTestId, getByText } = render(
+      const { getByTestId, findByText } = render(
         <SafeAreaProvider initialMetrics={initialMetrics}>
           <TestWrapper>
             <PerpsOrderView />
@@ -2860,7 +2866,9 @@ describe('PerpsOrderView', () => {
       // Assert - Should display asset in header title using testID to avoid duplicate text matches
       const headerTitle = getByTestId('perps-order-header-asset-title');
       expect(headerTitle).toHaveTextContent('Long BTC');
-      expect(getByText('$3,000')).toBeOnTheScreen(); // Price from mock data
+      // Wait for price to appear after isDataReady becomes true
+      const priceText = await findByText('$3,000');
+      expect(priceText).toBeOnTheScreen();
     });
   });
 });

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx

@@ -160,6 +160,15 @@ const PerpsOrderViewContentBase: React.FC = () => {
     [styles.fixedBottomContainer, insets.bottom],
   );
 
+  // Deferred loading: Load non-critical data after UI renders
+  const [isDataReady, setIsDataReady] = useState(false);
+  useEffect(() => {
+    // Defer data loading to next frame for faster initial render
+    requestAnimationFrame(() => {
+      setIsDataReady(true);
+    });
+  }, []);
+
   const [selectedTooltip, setSelectedTooltip] =
     useState<PerpsTooltipContentKey | null>(null);
 
@@ -216,9 +225,9 @@ const PerpsOrderViewContentBase: React.FC = () => {
    * updating leverage after positions load to prevent protocol violations.
    */
 
-  // Market data hook with automatic error toast handling
+  // Market data hook with automatic error toast handling (deferred)
   const { marketData, isLoading: isLoadingMarketData } = usePerpsMarketData({
-    asset: orderForm.asset,
+    asset: isDataReady ? orderForm.asset : '', // Defer until UI renders
     showErrorToast: true,
   });
 
@@ -274,23 +283,23 @@ const PerpsOrderViewContentBase: React.FC = () => {
     },
   });
 
-  // Get real-time price data using new stream architecture
+  // Get real-time price data using new stream architecture (deferred)
   // Uses single WebSocket subscription with component-level debouncing
   const prices = usePerpsLivePrices({
-    symbols: [orderForm.asset],
+    symbols: isDataReady ? [orderForm.asset] : [], // Defer subscription
     throttleMs: 1000,
   });
   const currentPrice = prices[orderForm.asset];
 
-  // Get top of book data for maker/taker fee determination
+  // Get top of book data for maker/taker fee determination (deferred)
   const currentTopOfBook = usePerpsTopOfBook({
-    symbol: orderForm.asset,
+    symbol: isDataReady ? orderForm.asset : '', // Defer subscription
   });
 
-  // Track screen load with unified hook
+  // Track screen load with unified hook (measure data loading, not initial render)
   usePerpsMeasurement({
     traceName: TraceName.PerpsOrderView,
-    conditions: [!!currentPrice, !!account],
+    conditions: [isDataReady, !!currentPrice, !!account],
   });
 
   const assetData = useMemo(() => {

app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useNavigation, type NavigationProp } from '@react-navigation/native';
 import Text, {
@@ -78,32 +78,34 @@ const PerpsCard: React.FC<PerpsCardProps> = ({
     labelText = strings('perps.order.limit');
   }
 
+  // Memoize market lookup to avoid array search on every press
+  const market = useMemo(
+    () => markets.find((m) => m.symbol === symbol),
+    [markets, symbol],
+  );
+
   const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
-    } else if (markets.length > 0 && symbol) {
-      // Find the market data for this symbol
-      const market = markets.find((m) => m.symbol === symbol);
-      if (market) {
-        let initialTab: 'position' | 'orders' | undefined;
-        if (order) {
-          initialTab = 'orders';
-        } else if (position) {
-          initialTab = 'position';
-        }
-        // Navigate to market details with the full market data
-        // When navigating from a tab, we need to navigate through the root stack
-        navigation.navigate(Routes.PERPS.ROOT, {
-          screen: Routes.PERPS.MARKET_DETAILS,
-          params: {
-            market,
-            initialTab,
-            source,
-          },
-        });
+    } else if (market) {
+      let initialTab: 'position' | 'orders' | undefined;
+      if (order) {
+        initialTab = 'orders';
+      } else if (position) {
+        initialTab = 'position';
       }
+      // Navigate to market details with the full market data
+      // When navigating from a tab, we need to navigate through the root stack
+      navigation.navigate(Routes.PERPS.ROOT, {
+        screen: Routes.PERPS.MARKET_DETAILS,
+        params: {
+          market,
+          initialTab,
+          source,
+        },
+      });
     }
-  }, [onPress, markets, symbol, navigation, order, position, source]);
+  }, [onPress, market, navigation, order, position, source]);
 
   if (!position && !order) {
     return null;

app/components/UI/Perps/routes/index.tsx

@@ -126,7 +126,6 @@ const PerpsScreenStack = () => (
           options={{
             title: strings('perps.markets.title'),
             headerShown: false,
-            animationEnabled: false,
           }}
         />