release(runway): cherry-pick fix: stop reloading of animation & browser back option cp-13.9.0 (#37603)

- fix: stop reloading of animation & browser back option cp-13.9.0
(#37581)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

In this PR, we have added the logic to stop the animation once
completed. Also added a browser back logic for login options.

Jira Link: https://consensyssoftware.atlassian.net/browse/SL-278

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37581?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: stopped reloading of animation once completed

## **Related issues**

Fixes:

## **Manual testing steps**

1. Open Extension
2. validate animation reloading
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->




https://github.com/user-attachments/assets/7c01d5bc-2aeb-4591-84e6-c359e73a71c1




https://github.com/user-attachments/assets/1ccacae4-1aec-4fbd-b170-e879e54970b5





## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/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
- [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-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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]
> Persist animation completion in shared context to prevent replay, and
use URL params for login option state to support browser back; update
navigation and tests accordingly.
> 
> - **Onboarding Animations**:
> - Extend `ui/contexts/rive-wasm` with `animationCompleted` map and
`setIsAnimationCompleted(...)` to persist completion state across views.
> - Update `metamask-wordmark-animation.tsx` to mark completion on
unmount and consume the new context API.
> - **Welcome Flow**:
> - `welcome.js`: derive `shouldSkipAnimation` from
`animationCompleted.MetamaskWordMarkAnimation` (replacing prior `from`
query logic) to avoid replaying the wordmark animation.
> - `welcome-login.tsx`: read/write `?login=<option>` to control
`LoginOptions` visibility/selection and navigate via
`ONBOARDING_WELCOME_ROUTE` to enable browser back restoring state.
> - **Account Exist**:
> - Simplify navigation back to `ONBOARDING_WELCOME_ROUTE` (remove
`?from=account-exist`).
> - **Tests**:
> - Adjust `account-exist.test.tsx` expectations to match new welcome
route navigation without query params.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
29c4558. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[4e1f85a](4e1f85a)

---------

Co-authored-by: Ganesh Suresh Patra <[email protected]>
Co-authored-by: MetaMask Bot <[email protected]>
Co-authored-by: Gauthier Petetin <[email protected]>

Author: 4 people

ui/contexts/rive-wasm/index.tsx

@@ -54,13 +54,21 @@ const RiveWasmContext = createContext<{
   error: Error | undefined;
   urlBufferMap: Record<string, ArrayBuffer>;
   setUrlBufferCache: (url: string, buffer: ArrayBuffer) => void;
+  animationCompleted: Record<string, boolean>;
+  setIsAnimationCompleted: (
+    animationName: string,
+    isAnimationCompleted: boolean,
+  ) => void;
 }>({
   isWasmReady: false,
   loading: false,
   error: undefined,
   urlBufferMap: {},
   // eslint-disable-next-line no-empty-function
   setUrlBufferCache: () => {},
+  animationCompleted: {},
+  // eslint-disable-next-line no-empty-function
+  setIsAnimationCompleted: () => {},
 });
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
@@ -73,18 +81,40 @@ export default function RiveWasmProvider({
   const [urlBufferMap, setUrlBufferMap] = useState<Record<string, ArrayBuffer>>(
     {},
   );
+  const [animationCompleted, setAnimationCompleted] = useState<
+    Record<string, boolean>
+  >({});
+
   const setUrlBufferCache = useCallback(
     (url: string, buffer: ArrayBuffer) => {
       setUrlBufferMap((prev) => ({ ...prev, [url]: buffer }));
     },
     [setUrlBufferMap],
   );
 
+  const setIsAnimationCompleted = useCallback(
+    (animationName: string, isAnimationCompleted: boolean) => {
+      setAnimationCompleted((prev) => ({
+        ...prev,
+        [animationName]: isAnimationCompleted,
+      }));
+    },
+    [setAnimationCompleted],
+  );
+
   const { isWasmReady, loading, error } = useRiveWasmReady();
 
   return (
     <RiveWasmContext.Provider
-      value={{ isWasmReady, loading, error, urlBufferMap, setUrlBufferCache }}
+      value={{
+        isWasmReady,
+        loading,
+        error,
+        urlBufferMap,
+        setUrlBufferCache,
+        animationCompleted,
+        setIsAnimationCompleted,
+      }}
     >
       {children}
     </RiveWasmContext.Provider>

ui/pages/onboarding-flow/account-exist/account-exist.test.tsx

@@ -95,12 +95,9 @@ describe('Account Exist Seedless Onboarding View', () => {
     fireEvent.click(loginButton);
 
     await waitFor(() => {
-      expect(mockUseNavigate).toHaveBeenCalledWith(
-        `${ONBOARDING_WELCOME_ROUTE}?from=account-exist`,
-        {
-          replace: true,
-        },
-      );
+      expect(mockUseNavigate).toHaveBeenCalledWith(ONBOARDING_WELCOME_ROUTE, {
+        replace: true,
+      });
       expect(resetOnboardingSpy).toHaveBeenCalled();
     });
   });

ui/pages/onboarding-flow/account-exist/account-exist.tsx

@@ -59,7 +59,7 @@ export default function AccountExist() {
     // reset onboarding flow
     await dispatch(resetOnboarding());
     await forceUpdateMetamaskState(dispatch);
-    navigate(`${ONBOARDING_WELCOME_ROUTE}?from=account-exist`, {
+    navigate(ONBOARDING_WELCOME_ROUTE, {
       replace: true,
     });
   };

ui/pages/onboarding-flow/welcome/metamask-wordmark-animation.tsx

@@ -31,7 +31,7 @@ export default function MetamaskWordMarkAnimation({
   const theme = useTheme();
   const isTestEnvironment = Boolean(process.env.IN_TEST);
   const context = useRiveWasmContext();
-  const { isWasmReady, error: wasmError } = context;
+  const { isWasmReady, error: wasmError, setIsAnimationCompleted } = context;
   const {
     buffer,
     error: bufferError,
@@ -122,9 +122,18 @@ export default function MetamaskWordMarkAnimation({
     return () => {
       if (animationTimeoutRef.current) {
         clearTimeout(animationTimeoutRef.current);
+        setIsAnimationCompleted('MetamaskWordMarkAnimation', true);
       }
     };
-  }, [rive, theme, isWasmReady, skipTransition, bufferLoading, buffer]);
+  }, [
+    rive,
+    theme,
+    isWasmReady,
+    skipTransition,
+    bufferLoading,
+    buffer,
+    setIsAnimationCompleted,
+  ]);
 
   // Don't render Rive component until ready or if loading/failed
   if (

ui/pages/onboarding-flow/welcome/welcome-login.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { useSearchParams, useNavigate } from 'react-router-dom-v5-compat';
 import {
   Box,
   Button,
@@ -16,6 +17,7 @@ import { getIsSeedlessOnboardingFeatureEnabled } from '../../../../shared/module
 import { ThemeType } from '../../../../shared/constants/preferences';
 import { setTermsOfUseLastAgreed } from '../../../store/actions';
 import { useTheme } from '../../../hooks/useTheme';
+import { ONBOARDING_WELCOME_ROUTE } from '../../../helpers/constants/routes';
 import LoginOptions from './login-options';
 import { LOGIN_OPTION, LOGIN_TYPE, LoginOptionType, LoginType } from './types';
 
@@ -39,6 +41,9 @@ export default function WelcomeLogin({
   const dispatch = useDispatch();
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const theme = useTheme();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const loginParam = searchParams.get('login');
 
   // Cleanup timeout on unmount
   useEffect(() => {
@@ -49,6 +54,16 @@ export default function WelcomeLogin({
     };
   }, []);
 
+  useEffect(() => {
+    if (loginParam) {
+      setShowLoginOptions(true);
+      setLoginOption(loginParam as LoginOptionType);
+    } else {
+      setShowLoginOptions(false);
+      setLoginOption(null);
+    }
+  }, [loginParam]);
+
   const handleLogin = useCallback(
     async (loginType: LoginType) => {
       if (!loginOption) {
@@ -79,6 +94,7 @@ export default function WelcomeLogin({
         setLoginOption(option);
         setIsTransitioning(false);
         timeoutRef.current = null;
+        navigate(`${ONBOARDING_WELCOME_ROUTE}?login=${option}`);
       }, 100);
     } else {
       setShowLoginOptions(true);

ui/pages/onboarding-flow/welcome/welcome.js

@@ -7,7 +7,7 @@ import React, {
   Suspense,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate, useSearchParams } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import log from 'loglevel';
 import { Box } from '../../../components/component-library';
 import {
@@ -50,6 +50,7 @@ import {
   JustifyContent,
   BlockSize,
 } from '../../../helpers/constants/design-system';
+import { useRiveWasmContext } from '../../../contexts/rive-wasm';
 import { getIsWalletResetInProgress } from '../../../ducks/metamask/metamask';
 import WelcomeLogin from './welcome-login';
 import { LOGIN_ERROR, LOGIN_OPTION, LOGIN_TYPE } from './types';
@@ -64,7 +65,6 @@ const FoxAppearAnimation = lazy(() => import('./fox-appear-animation'));
 export default function OnboardingWelcome() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
   const currentKeyring = useSelector(getCurrentKeyring);
   const isSeedlessOnboardingFeatureEnabled =
     getIsSeedlessOnboardingFeatureEnabled();
@@ -83,10 +83,10 @@ export default function OnboardingWelcome() {
   const [loginError, setLoginError] = useState(null);
   const isTestEnvironment = Boolean(process.env.IN_TEST);
 
-  // Check if user is returning from another page (skip animations)
-  const fromParam = searchParams.get('from');
-  const shouldSkipAnimation =
-    fromParam === 'unlock' || fromParam === 'account-exist';
+  const { animationCompleted } = useRiveWasmContext();
+  const shouldSkipAnimation = Boolean(
+    animationCompleted?.MetamaskWordMarkAnimation,
+  );
 
   // In test environments or when returning from another page, skip animations
   const [isAnimationComplete, setIsAnimationComplete] = useState(