fix: Spending cap flicker as decimals are determined

[pedronfigueiredo]

Description

Sometimes, when approving a token, the spending cap displayed in the transaction simulation component flickers for a split second. This can also seen when editing the spending cap on the same screen.

In the approve screen, useAssetDetails returns decimals at first as undefined while it's determined asynchronously. Since useApproveTokenSimulation takes decimals as an argument, a default of '0' was set to quiet the type-checker. This default is what provokes the UI flicker.

In the example video below, the token has 4 decimals and the spending cap is 70000 / 10 ** 4 = 7. But while decimals is still undefined, '0' is used in useApproveTokenSimulation to determine the spending cap (dividing the value by 10 to the number of decimals). This amounts to 70000 instead of 7 for a split second, before decimals '4' is returned by useAssetDetails.

The fix for this bug is to let the loading spinner linger a few miliseconds longer while decimals is still undefined.

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

before.the.bug.happens.mov

After

after.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension 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.

[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.

[metamaskbot]

Builds ready [be646b7]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1872 ± 55 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	330	2080	1569	601	289
		domContentLoaded	1525	2093	1839	123	59
		load	1588	2100	1872	114	55
		domInteractive	25	78	44	16	8
		backgroundConnect	9	74	35	23	11
		firstReactRender	16	89	39	23	11
		getState	5	62	16	13	6
		initialActions	0	1	0	0	0
		loadScripts	1106	1599	1386	111	53
		setupStore	7	63	25	22	10
		uiStartup	1837	2390	2129	131	63

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 8 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[jpuri]

Hey @pedronfigueiredo : default of 0 passed to useApproveTokenSimulation does not sounds like good idea, can we rather change it to take undefined ?

[metamaskbot]

Builds ready [e51dcb4]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6
  • common: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1648 ± 82 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1455	2278	1652	177	85
		domContentLoaded	1411	2204	1619	172	82
		load	1458	2247	1648	172	82
		domInteractive	24	89	42	21	10
		backgroundConnect	11	55	25	16	7
		firstReactRender	15	87	35	25	12
		getState	5	76	19	20	10
		initialActions	0	1	0	0	0
		loadScripts	1046	1706	1222	148	71
		setupStore	6	55	16	16	8
		uiStartup	1639	2593	1902	220	106

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: -16 Bytes (-0.00%)
• common: 0 Bytes (0.00%)

[ZbrancaI]

Hey @pedronfigueiredo! I just tested this on the Chrome build for 12.11.0, and the issue still seems to occur.

Screen.Recording.2025-01-29.at.9.32.14.PM.mov

[ZbrancaI]

Hey @pedronfigueiredo! I just tested this on the Chrome build for 12.11.0, and the issue still seems to occur.

Screen.Recording.2025-01-29.at.9.32.14.PM.mov

The issue is solved on the latest build