Skip to content

Conversation

@smgv
Copy link
Contributor

@smgv smgv commented Nov 6, 2025

Description

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

Changelog

CHANGELOG entry: stopped reloading of animation once completed

Related issues

Fixes:

Manual testing steps

  1. Open Extension
  2. validate animation reloading

Screenshots/Recordings

Before

After

Screen.Recording.2025-11-06.at.8.16.37.PM.mov
Screen.Recording.2025-11-06.at.11.00.34.PM.mov

Pre-merge author checklist

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

Persists Rive animation completion to skip replays, switches welcome flow to context-based skipping, and syncs login option visibility via the ?login query param; updates navigation and tests.

  • Onboarding animations:
    • Add animationCompleted map and setIsAnimationCompleted to RiveWasmContext (ui/contexts/rive-wasm/index.tsx).
    • MetamaskWordMarkAnimation sets completion on unmount and consumes the new setter; updates effect deps (ui/pages/onboarding-flow/welcome/metamask-wordmark-animation.tsx).
    • welcome uses animationCompleted.MetamaskWordMarkAnimation to decide shouldSkipAnimation (replaces URL-based check) (ui/pages/onboarding-flow/welcome/welcome.js).
  • Login flow URL syncing:
    • WelcomeLogin reads ?login= to control option view and writes it on selection via navigate (ui/pages/onboarding-flow/welcome/welcome-login.tsx).
  • Navigation adjustments:
    • AccountExist returns to ONBOARDING_WELCOME_ROUTE without ?from=...; tests updated accordingly (ui/pages/onboarding-flow/account-exist/*).

Written by Cursor Bugbot for commit 709317b. This will update automatically on new commits. Configure here.

@smgv smgv self-assigned this Nov 6, 2025
@smgv smgv requested a review from a team as a code owner November 6, 2025 14:47
@smgv smgv added area-onboarding needs-qa Label will automate into QA workspace team-onboarding Onboarding team labels Nov 6, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Nov 6, 2025

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.

@smgv smgv requested a review from chaitanyapotti November 6, 2025 14:49
@smgv smgv requested a review from LeVinhGithub November 6, 2025 14:49
@metamaskbot
Copy link
Collaborator

metamaskbot commented Nov 6, 2025

✨ Files requiring CODEOWNER review ✨

🔐 @MetaMask/web3auth (5 files, +37 -15)
  • 📁 ui/
    • 📁 pages/
      • 📁 onboarding-flow/
        • 📁 account-exist/
          • 📄 account-exist.test.tsx +3 -6
          • 📄 account-exist.tsx +1 -1
        • 📁 welcome/
          • 📄 metamask-wordmark-animation.tsx +11 -2
          • 📄 welcome-login.tsx +16 -0
          • 📄 welcome.js +6 -6

@github-actions github-actions bot added the size-S label Nov 6, 2025
@metamaskbot
Copy link
Collaborator

Builds ready [9ed7994]
UI Startup Metrics (1217 ± 89 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1217108216358912811346
load105093513317911081178
domContentLoaded104393013197911021172
domInteractive2114104151850
firstPaint60181138942110381165
backgroundConnect2322202818235244
firstReactRender26184763038
getState22757102741
initialActions001001
loadScripts818698108879881939
setupStore1162941222
numNetworkReqs1367519670
BrowserifyPower User HomeuiStartup20021762314037822823140
load1055895171724312941717
domContentLoaded1047891170324212891703
domInteractive281561175261
firstPaint7659317104449391710
backgroundConnect24422229319260293
firstReactRender28253732837
getState18416620512193205
initialActions001001
loadScripts815671142323010451423
setupStore1292741227
numNetworkReqs1197225074244250
WebpackStandard HomeuiStartup8607231253988631157
load629577101392615936
domContentLoaded62257198688609912
domInteractive181291131542
firstPaint202601003207192652
backgroundConnect261177142760
firstReactRender30185583639
getState1164041316
initialActions001001
loadScripts61956997586607901
setupStore1263541419
numNetworkReqs1367519871
WebpackPower User HomeuiStartup12311078172821813651728
load614523871126723871
domContentLoaded593512832112698832
domInteractive281284244684
firstPaint31258836272526836
backgroundConnect701523577177235
firstReactRender25232912629
getState1348815322147153
initialActions001011
loadScripts589510825109691825
setupStore1052661026
numNetworkReqs1226722952164229
FirefoxBrowserifyStandard HomeuiStartup14841309205913815421754
load1255112215028813111423
domContentLoaded1254112215018813111423
domInteractive1153534152123223
firstPaint------
backgroundConnect422394144876
firstReactRender26215552739
getState84687717
initialActions001001
loadScripts1230110414648412851400
setupStore187231321335
numNetworkReqs1266316760
BrowserifyPower User HomeuiStartup24902190324027326523240
load13911201182319016131823
domContentLoaded13911201182219016131822
domInteractive22282629176363629
firstPaint------
backgroundConnect923228969125289
firstReactRender41316294962
getState1507121738181217
initialActions101011
loadScripts13591170179818715661798
setupStore3371012745101
numNetworkReqs1276829468178294
WebpackStandard HomeuiStartup16271439227315516631949
load13921224164910314511612
domContentLoaded13921224164910414511612
domInteractive993132637112162
firstPaint------
backgroundConnect51212453353110
firstReactRender302381112948
getState10420421814
initialActions001001
loadScripts1361120716099814281573
setupStore1376991432
numNetworkReqs1266816764
WebpackPower User HomeuiStartup26062260300523527993005
load15901424200817616882008
domContentLoaded15901424200717616882007
domInteractive20043551164435551
firstPaint------
backgroundConnect1013221966171219
firstReactRender41325885058
getState1479534462165344
initialActions102112
loadScripts15461247194218116681942
setupStore3461073058107
numNetworkReqs1316730382200303
📊 Page Load Benchmark Results

Current Commit: 9ed7994 | Date: 11/6/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.03s (±125ms) 🟡 | historical mean value: 1.04s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 726ms (±150ms) 🟢 | historical mean value: 726ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 97ms (±217ms) 🟢 | historical mean value: 77ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.03s 125ms 1.00s 2.25s 1.04s 2.25s
domContentLoaded 726ms 150ms 693ms 2.20s 730ms 2.20s
firstPaint 97ms 217ms 60ms 2.26s 84ms 2.26s
firstContentfulPaint 97ms 217ms 60ms 2.26s 84ms 2.26s
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 58 Bytes (0%)
  • ui: 314 Bytes (0%)
  • common: 20 Bytes (0%)

@LeVinhGithub LeVinhGithub added QA Passed and removed needs-qa Label will automate into QA workspace labels Nov 6, 2025
LeVinhGithub
LeVinhGithub previously approved these changes Nov 6, 2025
Copy link
Contributor

@LeVinhGithub LeVinhGithub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm QA


useEffect(() => {
setShowLoginOptions(Boolean(loginParam));
}, [loginParam]);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: State mismatch on browser back navigation restoring login options

When the user navigates back using the browser back button, the useEffect sets showLoginOptions based on the URL parameter but does not restore the loginOption state. This causes a state inconsistency where showLoginOptions is true but loginOption is null, which breaks the rendering condition at line 119 (showLoginOptions && loginOption). The component will show the wrong UI (the initial buttons instead of the login options) when the user navigates back, even though the URL parameter indicates login options should be shown. The useEffect should also set setLoginOption(loginParam as LoginOptionType) to properly restore the component state from the URL.

Fix in Cursor Fix in Web

@smgv smgv changed the title fix: stop reloading of animation fix: stop reloading of animation & back browser Nov 6, 2025
@smgv smgv changed the title fix: stop reloading of animation & back browser fix: stop reloading of animation & browser back option Nov 6, 2025
@metamaskbot
Copy link
Collaborator

Builds ready [709317b]
UI Startup Metrics (1221 ± 96 ms)
PlatformBuildTypePageMetricMean (ms)Min (ms)Max (ms)Std Dev (ms)P 75 (ms)P 95 (ms)
ChromeBrowserifyStandard HomeuiStartup1221107017569612711379
load105592514738311071188
domContentLoaded104992114358110961176
domInteractive2314113201869
firstPaint59790147142310521180
backgroundConnect2312182819234252
firstReactRender26184762743
getState21768112744
initialActions002001
loadScripts825699118080875955
setupStore1062131117
numNetworkReqs1367720673
BrowserifyPower User HomeuiStartup19081579258826219642588
load1012901133915612111339
domContentLoaded1003891132815412071328
domInteractive261561164461
firstPaint70117313504189571350
backgroundConnect23722028215239282
firstReactRender28253432934
getState17514820115191201
initialActions001011
loadScripts77566710731449711073
setupStore1493071630
numNetworkReqs1167124768214247
WebpackStandard HomeuiStartup82670212191058261128
load60955598294598904
domContentLoaded60254796491590887
domInteractive16115381438
firstPaint19255967204189827
backgroundConnect241074132856
firstReactRender28186183337
getState1052731215
initialActions001001
loadScripts59954495388588877
setupStore1262951329
numNetworkReqs1367519872
WebpackPower User HomeuiStartup12681154167915912621679
load645570962109693962
domContentLoaded63055893599665935
domInteractive241367193467
firstPaint31873938292575938
backgroundConnect4992756364275
firstReactRender26243122731
getState14610516819161168
initialActions001011
loadScripts62655692597655925
setupStore1153081130
numNetworkReqs1046519344164193
FirefoxBrowserifyStandard HomeuiStartup14231277176910814821668
load1209109614757612511363
domContentLoaded1208109614757612511363
domInteractive1133435658118281
firstPaint------
backgroundConnect4023128174678
firstReactRender25205152640
getState64162711
initialActions001001
loadScripts1184107414477512261343
setupStore145200211242
numNetworkReqs1266115858
BrowserifyPower User HomeuiStartup23931918358442827683584
load13051134167918415211679
domContentLoaded13051134167818315211678
domInteractive19783542152372542
firstPaint------
backgroundConnect13631415117234415
firstReactRender37295884158
getState1287718725141187
initialActions001001
loadScripts12741092163118214881631
setupStore4262997047299
numNetworkReqs1226024263167242
WebpackStandard HomeuiStartup16191460199711416481908
load1382120416638514221566
domContentLoaded1382120416638514211565
domInteractive983236741109168
firstPaint------
backgroundConnect4825208255490
firstReactRender29227493042
getState11415219746
initialActions001001
loadScripts1353118616288213921513
setupStore16774151466
numNetworkReqs1366917765
WebpackPower User HomeuiStartup26822290348529029123485
load15991352189217317341892
domContentLoaded15981352189217317341892
domInteractive19055570160410570
firstPaint------
backgroundConnect1153421962180219
firstReactRender41305784957
getState1479134255165342
initialActions101011
loadScripts15481302182516417041825
setupStore251275172775
numNetworkReqs1316732176208321
📊 Page Load Benchmark Results

Current Commit: 709317b | Date: 11/6/2025

📄 Localhost MetaMask Test Dapp

Samples: 100

Summary

  • pageLoadTime-> current mean value: 1.05s (±44ms) 🟡 | historical mean value: 1.05s ⬇️ (historical data)
  • domContentLoaded-> current mean value: 731ms (±42ms) 🟢 | historical mean value: 736ms ⬇️ (historical data)
  • firstContentfulPaint-> current mean value: 79ms (±13ms) 🟢 | historical mean value: 78ms ⬆️ (historical data)

📈 Detailed Results

Metric Mean Std Dev Min Max P95 P99
pageLoadTime 1.05s 44ms 1.02s 1.40s 1.08s 1.40s
domContentLoaded 731ms 42ms 701ms 1.07s 756ms 1.07s
firstPaint 79ms 13ms 64ms 196ms 88ms 196ms
firstContentfulPaint 79ms 13ms 64ms 196ms 88ms 196ms
largestContentfulPaint 0ms 0ms 0ms 0ms 0ms 0ms
Bundle size diffs [🚨 Warning! Bundle size has increased!]
  • background: 571 Bytes (0.01%)
  • ui: 1.86 KiB (0.03%)
  • common: 18.96 KiB (0.22%)

Copy link
Contributor

@LeVinhGithub LeVinhGithub left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re-approve

@chaitanyapotti chaitanyapotti changed the title fix: stop reloading of animation & browser back option fix: stop reloading of animation & browser back option cp-13.9.0 Nov 7, 2025
@chaitanyapotti chaitanyapotti added this pull request to the merge queue Nov 7, 2025
Merged via the queue into main with commit 4e1f85a Nov 7, 2025
182 checks passed
@chaitanyapotti chaitanyapotti deleted the fix/animation-reloading-update branch November 7, 2025 06:26
@github-actions github-actions bot locked and limited conversation to collaborators Nov 7, 2025
@metamaskbot metamaskbot added the release-13.10.0 Issue or pull request that will be included in release 13.10.0 label Nov 7, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

area-onboarding QA Passed release-13.10.0 Issue or pull request that will be included in release 13.10.0 size-S team-onboarding Onboarding team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Should stop the animation if it's finished & BACK browser button should be enable to click

5 participants