perf(history): lazy-load the transaction history list#393
Merged
Conversation
A long-lived wallet (the swap wallet) accrues tens of thousands of history rows. TransactionHistoryModal formatted EVERY entry (Date.toLocale* per row) and rendered them ALL as motion.div rows, freezing the page on open. Render a newest-first window (40) and grow it via an IntersectionObserver sentinel as the user scrolls near the bottom — so both the per-row formatting and the DOM node count stay bounded regardless of history length. Resets on each open. No SDK/data change (getHistory stays in-memory); this is a pure render-side fix.
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 join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Why
A long-lived wallet — the swap wallet especially — accrues tens of thousands of history rows.
TransactionHistoryModalformatted every entry (Date.toLocaleDateString/toLocaleTimeStringper row — slow at 10k) and rendered them all asmotion.divrows, freezing the page on open.What
Render a newest-first window (40) and grow it via an
IntersectionObserversentinel as the user scrolls near the bottom (lazy loading). Both the per-row formatting (useMemonow slices tovisibleCount) and the DOM node count stay bounded regardless of history length. The window resets on each open.Pure render-side fix — no SDK/data change (
getHistory()stays in-memory).tsc -b+ lint green.Note
This bounds the client render. The backend's large-inventory reads under load are a separate, infra-side concern (see the related
GET /v1/inventorydegradation).