fix(predict): cp-7.60.0 fade in gtm modal after image loads

[matallui]

Description

Currently the GTM modal for Predict looks funky as it seems to render different pieces at different times.
This PR attempts to fix this by introducing two main changes:

• Animate opacity for the whole modals 0 -> 1
• Only start animation when the background image finishes loading

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

RPReplay_Final1763676703.MP4

After

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2025-11-20.at.15.53.07.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.

---

Note

Adds a reanimated opacity fade-in for the Predict GTM modal that starts once the background image finishes loading.

• UI/Animation:
  • Wraps modal root in Animated.View and animates opacity from 0→1 with withTiming.
  • Starts animation on background image onLoad via useState + useEffect and useSharedValue/useAnimatedStyle.
  • Ensures content appears only after image loads for smoother reveal.

^{Written by Cursor Bugbot for commit ae4bba0. 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: SmokePredictions
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

The changes are isolated to the PredictGTMModal component, which is a Go-To-Market modal for the Predictions feature. The modifications add a fade-in animation using react-native-reanimated when the background image loads (500ms duration transition from opacity 0 to 1).

While the changes are primarily cosmetic/presentational, they affect a user-facing component in the Predictions onboarding flow. The animation could potentially introduce visual issues or timing problems that should be validated through E2E testing.

The SmokePredictions tag is the most appropriate choice because:

1. The modal is part of the Predictions feature navigation stack (Routes.PREDICT.MODALS.GTM_MODAL)
2. The GTM modal is used as part of the user's first-time experience with Predictions
3. E2E tests in e2e/specs/predict/ already test prediction flows and could catch issues with modal behavior
4. The modal contains navigation logic (navigate to Predictions market list) and analytics tracking that should be validated

Risk is assessed as medium (not low) because:

• This is a user-facing UI component in the onboarding flow
• Animation timing could affect the user experience or introduce race conditions
• The modal is displayed as part of the initial Predictions feature experience
• While not critical infrastructure, proper functioning is important for feature adoption

No other tags are necessary as the changes are completely isolated to the Predictions feature area.

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

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

See analysis details on SonarQube Cloud

[kevinbluer]

Nice approach 👍