feat: virtualize the Tokens list #37589
Open
+198
−53
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
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. |
Collaborator
✨ Files requiring CODEOWNER review ✨👨🔧 @MetaMask/core-extension-ux (1 files, +3 -2)
🧩 @MetaMask/extension-devs (5 files, +90 -0)
💎 @MetaMask/metamask-assets (4 files, +39 -33)
📜 @MetaMask/policy-reviewers (5 files, +90 -0)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔗 @MetaMask/supply-chain (5 files, +90 -0)
|
n3ps
force-pushed
the
n3ps/tanstack-virtual
branch
from
f5c7470 to
73c5dec
Compare
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
n3ps
commented
Nov 6, 2025
|
|
||
| return ( | ||
| <div className="main-container main-container--has-shadow"> | ||
| <ScrollContainer className="main-container main-container--has-shadow"> |
Contributor
Author
There was a problem hiding this comment.
- Share a
refof the scrolling container
n3ps
commented
Nov 6, 2025
| // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860 | ||
| // eslint-disable-next-line @typescript-eslint/naming-convention | ||
| function TokenList({ onTokenClick, safeChains }: TokenListProps) { | ||
| const scrollContainerRef = useScrollContainer(); |
Contributor
Author
There was a problem hiding this comment.
- Get the scrolling container
n3ps
commented
Nov 6, 2025
| return ( | ||
| <> | ||
| {sortedFilteredTokens.map((token: TokenWithFiatAmount) => { | ||
| <div |
n3ps
commented
Nov 6, 2025
|
|
||
| return ( | ||
| <TokenCell | ||
| <div |
Contributor
Author
There was a problem hiding this comment.
- The virtualized elements
n3ps
force-pushed
the
n3ps/tanstack-virtual
branch
from
7cdf6aa to
62c5367
Compare
Contributor
Author
|
@MetaMask/supply-chain @tanstack/react-virtual is used here for the virtual scrolling in the Tokens list. Reviewed the policy changes and these are needed for scroll tracking and smooth scrolling. |
Collaborator
Builds ready [62c5367]
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
force-pushed
the
n3ps/tanstack-virtual
branch
from
bd42c83 to
67ae764
Compare
Collaborator
Builds ready [67ae764]
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
n3ps
force-pushed
the
n3ps/tanstack-virtual
branch
from
c826997 to
446b78c
Compare
Contributor
|
@metamaskbot update-policies |
Collaborator
Builds ready [7db0573]
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
Contributor
|
@metamaskbot update-policies |
Collaborator
Builds ready [1bde564]
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
|
No policy changes |
n3ps
force-pushed
the
n3ps/tanstack-virtual
branch
from
a730f63 to
a6a13fe
Compare
Collaborator
Builds ready [f81e585]
UI Startup Metrics (1200 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [c994326]
UI Startup Metrics (1216 ± 89 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
reviewed
Nov 7, 2025
Collaborator
Builds ready [c9dfa11]
UI Startup Metrics (1224 ± 95 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [c6411c3]
UI Startup Metrics (1162 ± 101 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Collaborator
Builds ready [3bbae99]
UI Startup Metrics (1223 ± 88 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The Tokens tab has a significant delay before the page becomes interactive after clicking the tab. Every token was being rendered simultaneously, each calling multiple Redux selectors and several computations.
This PR implements virtualization using @tanstack/react-virtual to only render tokens that are visible in the viewport. In the video below this reduces render time from 924ms to 35ms (26x improvement).
Changelog
CHANGELOG entry: feat: virtualize the Tokens list
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
Virtual.BEFORE.mov
After
Virtual.AFTER.mov
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Virtualizes the Tokens list using @tanstack/react-virtual with a shared scroll container, updates asset cell/layout, and adjusts LavaMoat policies/globals.
useVirtualizerfrom@tanstack/react-virtualinui/components/app/assets/token-list/token-list.tsxto render only visible items and position them viatranslateY.ScrollContaineranduseScrollContainercontext inui/contexts/scroll-container.tsx; wraps main container inui/pages/home/home.component.jsto provide the scroll element.ASSET_CELL_HEIGHTinui/components/app/assets/constants.tsand applies it ingeneric-asset-cell-layout.tsx.asset-title.tsxby removing tooltip/explicit block display; keeps ellipsis viaText.@tanstack/react-virtualtopackage.json.ResizeObserver,setTimeout,clearTimeoutin build/plugin configs.@tanstack/react-virtualand@tanstack/virtual-corewith needed globals (document,scrollY,requestAnimationFrame,console.info/warn).Written by Cursor Bugbot for commit 3bbae99. This will update automatically on new commits. Configure here.