fix(perps): button flashing color on load

[abretonc7s]

Description

Fixes button color flash when opening a market with an existing position. Users were briefly seeing Long/Short buttons before Modify/Close buttons appeared due to a one-render-cycle gap between position loading completing and position data being populated.

Root cause: In usePerpsLivePositions, isInitialLoading becomes false one frame before the positions array is fully populated, causing !existingPosition to briefly evaluate as true.

Solution: Added a hasPositionSettled state that waits one frame (via requestAnimationFrame) after loading completes before allowing buttons to render. This ensures position data is fully available before deciding which buttons to show.

Changelog

CHANGELOG entry: Fixed button color flash when opening a market with an existing position

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2236

Manual testing steps

Feature: Market Details Button Display

  Scenario: User opens market with existing position
    Given user has an open position in BTC-PERP
    When user navigates to BTC-PERP market details
    Then Modify and Close buttons should appear without any flash of Long/Short buttons

  Scenario: User opens market without position
    Given user has no position in ETH-PERP
    When user navigates to ETH-PERP market details
    Then Long and Short buttons should appear normally

  Scenario: User with zero balance opens market
    Given user has zero balance in their perps account
    When user navigates to any market details
    Then Add Funds button should appear correctly

Screenshots/Recordings

Before

After

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.

---

Note

Waits one frame after position loading settles before rendering action buttons to avoid Long/Short flashing when a position exists.

• Perps UI (PerpsMarketDetailsView.tsx):
  • Add hasPositionSettled state and useEffect using requestAnimationFrame to mark position data as settled after isLoadingPosition becomes false.
  • Gate action buttons with hasPositionSettled by updating hasLongShortButtons to !isLoadingPosition && !hasZeroBalance && hasPositionSettled.
  • Result: eliminates brief flash of Long/Short buttons before Modify/Close when an existing position is present.

^{Written by Cursor Bugbot for commit 5ecad54. 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.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps
• Risk Level: low
• AI Confidence: 95%

click to see 🤖 AI reasoning details

The change is a small, focused UI fix in the PerpsMarketDetailsView component to prevent a "button flash" issue (TAT-2236). The modification adds a new state variable hasPositionSettled and uses requestAnimationFrame to wait one frame after position loading completes before showing the Long/Short/Modify/Close buttons. This prevents a visual glitch where buttons would briefly appear and disappear during the gap between isLoadingPosition=false and existingPosition being populated.

The change is:

1. Isolated to the Perps (Perpetuals trading) feature only
2. A pure UI timing fix with no business logic changes
3. Defensive in nature - adds a delay to prevent visual artifacts
4. Does not affect any API calls, data handling, or navigation

Only the SmokePerps tag is needed as this change exclusively affects the Perpetuals trading feature's market details view.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud