Conversation
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. |
Contributor
✨ Files requiring CODEOWNER review ✨💎 @MetaMask/metamask-assets (2 files, +20 -56)
|
n3ps
commented
Mar 5, 2026
|
|
||
| // Container width threshold for switching between 3 and 4 columns | ||
| const CONTAINER_WIDTH_THRESHOLD = 640; | ||
| const ESTIMATED_ROW_SIZE = 172; |
Contributor
Author
There was a problem hiding this comment.
An approximation is recommended
Contributor
Author
There was a problem hiding this comment.
Previously inline value below
This is an initial estimate that a virtualizer recommends, it still adjusts after render
n3ps
commented
Mar 5, 2026
| export function useNfts({ | ||
| overridePopularNetworkFilter = false, | ||
| }: { | ||
| overridePopularNetworkFilter?: boolean; |
Contributor
Builds ready [06911ff]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
|
Contributor
Builds ready [0567653]
⚡ Performance Benchmarks
🌐 Dapp Page Load BenchmarksCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
NidhiKJha
approved these changes
Mar 6, 2026
salimtb
approved these changes
Mar 6, 2026
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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
4 participants
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
Switching from Tokens to NFT tab caused the scroll position to jump. Two causes:
useNftsCollections and useNfts used useEffect + useState to compute derived state from Redux (an anti-pattern). This delayed NFT data by one render tick, causing NftsTab to render a loading spinner with zero height and causing the scroll container's scrollTop to 0. Refactored both hooks to use useMemo so data is computed synchronously on first render. Also removed dead code several imports in the useEffect dependency arrays were never actually used.
The virtualizer default scrollToFn applies measurement adjustments. When estimated size differ from measured size, react-virtual corrects the scroll position. Because the NFT tab has dynamic rows this adjustment can be cause a wrong scroll position. Added a noAdjustmentsScrollToFn option to VirtualizedList.
Changelog
CHANGELOG entry: fix: NFT tab scroll position
Related issues
Fixes:
Manual testing steps
Screenshots/Recordings
Before
NFT.scroll.-.BEFORE.mov
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Medium Risk
Touches shared
VirtualizedListvirtualization behavior and refactors NFT data hooks to compute synchronously; mistakes could affect scroll position or rendering in other virtualized lists.Overview
Fixes NFT tab scroll jumps when switching tabs by removing one-render-tick delays in NFT-derived data and by disabling react-virtual scroll offset “adjustments”.
useNftsanduseNftsCollectionsare refactored fromuseEffect+useStateto synchronoususeMemoderivations (andNftsTabremoves the interim loading spinner/trace dependency).VirtualizedListnow accepts an optionalscrollToFn(with newnoAdjustmentsScroll) and forces ameasure()when the scroll container is available;NftGridadopts these options, tweaks estimated row sizing, and adds a stable rowkeyExtractor.Written by Cursor Bugbot for commit 0567653. This will update automatically on new commits. Configure here.