fix(perps): Button flash when open a market with an open position (#27671)

## **Description**

When navigating to a market with an existing position, Long/Short
buttons briefly flashed before switching to Modify/Close. Root cause:
`positions` in `usePerpsLivePositions` was derived from `rawPositions`
via a `useEffect`, creating a one-frame lag where `isInitialLoading` was
`false` but `positions` still held stale data. Fix: replace the
state+effect pattern with `useMemo` for synchronous derivation.

## **Changelog**

CHANGELOG entry: Fixed button flash (Long/Short briefly visible) when
opening a market with an existing position

## **Related issues**

Fixes:
[TAT-2236](https://consensyssoftware.atlassian.net/browse/TAT-2236)

## **Manual testing steps**

```gherkin
Feature: Market detail action buttons
  Scenario: Open market with existing position
    Given I have an open BTC position
    When I navigate to the BTC market detail screen
    Then I see Modify/Close buttons immediately
    And I do not see Long/Short buttons flash

  Scenario: Open market without position
    Given I have no position on SOL
    When I navigate to the SOL market detail screen
    Then I see Long/Short buttons immediately
```

## **Screenshots/Recordings**

### **Before**
See automation/27671/before.mp4

### **After**
See automation/27671/after.mp4

## **Pre-merge author checklist**

- [x] I've followed MetaMask Contributor Docs and Coding Standards
- [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 format if applicable
- [x] I've applied the right labels on the PR

## **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]
> **Low Risk**
> Low risk: small hook refactor to compute `positions` synchronously
plus a targeted regression test; main risk is subtle rendering behavior
changes around initial WebSocket updates.
> 
> **Overview**
> Fixes a one-render mismatch in `usePerpsLivePositions` where
`isInitialLoading` could flip to `false` before derived `positions`
updated, causing a brief Long/Short button flash when opening a market
with an existing position.
> 
> `positions` is now derived from `rawPositions` and `priceData` via
`useMemo` (instead of state set in an effect), and a new regression test
asserts that the first WebSocket update makes `isInitialLoading=false`
and `positions` available in the same render.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
997d441. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: abretonc7s

app/components/UI/Perps/hooks/stream/useLivePositions.test.ts

@@ -738,6 +738,38 @@ describe('usePerpsLivePositions', () => {
     });
   });
 
+  describe('TAT-2236: no button flash on first WebSocket update', () => {
+    it('positions are available synchronously when isInitialLoading becomes false', () => {
+      // This test verifies the fix for TAT-2236: when the first WebSocket update
+      // arrives, positions must be resolved in the SAME render as isInitialLoading
+      // becoming false. If positions lag by one render, the market detail view
+      // briefly shows Long/Short buttons before switching to Modify/Close.
+      let capturedCallback: (positions: Position[] | null) => void = jest.fn();
+      mockPositionsSubscribe.mockImplementation((params) => {
+        capturedCallback = params.callback;
+        return jest.fn();
+      });
+      mockPricesSubscribe.mockReturnValue(jest.fn());
+
+      const { result } = renderHook(() => usePerpsLivePositions());
+
+      // Initially loading with no positions
+      expect(result.current.isInitialLoading).toBe(true);
+      expect(result.current.positions).toEqual([]);
+
+      // Simulate first WebSocket update with positions
+      act(() => {
+        capturedCallback([mockPosition]);
+      });
+
+      // CRITICAL: Both isInitialLoading=false AND positions must be set
+      // in the same render — no intermediate state allowed
+      expect(result.current.isInitialLoading).toBe(false);
+      expect(result.current.positions).toEqual([mockPosition]);
+      expect(result.current.positions.length).toBe(1);
+    });
+  });
+
   describe('enrichPositionsWithLivePnL', () => {
     const basePriceData: Record<string, PriceUpdate> = {
       'BTC-PERP': {

app/components/UI/Perps/hooks/stream/usePerpsLivePositions.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { usePerpsStream } from '../../providers/PerpsStreamManager';
 import { DevLogger } from '../../../../../core/SDKConnect/utils/DevLogger';
 import { type Position, type PriceUpdate } from '@metamask/perps-controller';
@@ -99,9 +99,6 @@ export function usePerpsLivePositions(
 ): UsePerpsLivePositionsReturn {
   const { throttleMs = 0, useLivePnl = false } = options; // No live PnL by default to avoid unnecessary re-renders
   const stream = usePerpsStream();
-  const [positions, setPositions] = useState<Position[]>(
-    () => getPreloadedData<Position[]>('cachedPositions') ?? EMPTY_POSITIONS,
-  );
   const [isInitialLoading, setIsInitialLoading] = useState(
     () => !hasPreloadedData('cachedPositions'),
   );
@@ -113,18 +110,13 @@ export function usePerpsLivePositions(
   );
   const [priceData, setPriceData] = useState<Record<string, PriceUpdate>>({});
 
-  // Enrich and update positions whenever raw positions or prices change
-  useEffect(() => {
+  // Derive enriched positions synchronously to avoid one-frame flash
+  // where isInitialLoading is false but positions haven't been enriched yet
+  const positions = useMemo(() => {
     if (rawPositions.length === 0) {
-      setPositions(EMPTY_POSITIONS);
-      return;
+      return EMPTY_POSITIONS;
     }
-
-    const enrichedPositions = enrichPositionsWithLivePnL(
-      rawPositions,
-      priceData,
-    );
-    setPositions(enrichedPositions);
+    return enrichPositionsWithLivePnL(rawPositions, priceData);
   }, [rawPositions, priceData]);
 
   // Subscribe to position updates