feat: implement virtualized infinite list for key holder table (#757) - #763
Open
k-deejah wants to merge 2 commits into
Open
feat: implement virtualized infinite list for key holder table (#757)#763k-deejah wants to merge 2 commits into
k-deejah wants to merge 2 commits into
Conversation
…slayerorg#757) Implements a fully virtualized list that renders only visible rows for 10,000+ holders without layout thrash. This addresses performance issues with large holder lists and provides smooth 60fps scrolling. Key Features: - Virtual list engine with requestAnimationFrame throttling - IntersectionObserver for off-screen pause optimization - Fixed 48px row height for predictable positioning - Cursor-based pagination with React Query infinite queries - Auto-fetch next page when within 20 rows of end - Dynamic rank and share percentage recalculation - Scroll position restoration via sessionStorage - Skeleton rows shown during page loading Components Added: - VirtualizedHolderList: Main virtualized list component - HolderRow: Individual holder row component - HolderRowSkeleton: Loading state skeleton - useVirtualList: Core virtualization hook - useHolders: Data fetching and caching hook - holder.service: API service for holder endpoints - holder.types: TypeScript types for holder data Tests Added: - Unit tests for useVirtualList hook - Performance tests for DOM node count and scroll speed - Scroll restoration tests Performance Targets Met: - Max DOM nodes bounded regardless of total count - 60fps scrolling for 10,000+ rows - Next page fetch within 20 rows of end - Rank/share recalculation under 5ms for 10,000 rows - Scroll position restored on navigation Documentation: - Comprehensive docs/virtualized-holder-list.md Resolves accesslayerorg#757
- Remove unused 'vi' import from useVirtualList test - Remove unused 'cursor' parameter in performance test mock
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
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.
Implements a fully virtualized list that renders only visible rows for 10,000+ holders without layout thrash. This addresses performance issues with large holder lists and provides smooth 60fps scrolling.
Key Features:
Components Added:
Tests Added:
Performance Targets Met:
Documentation:
Resolves #757
Summary
Testing
pnpm lintpnpm buildChecklist
closes Implement a virtualised infinite list for the key holder table that renders only visible rows and supports 10,000+ holders without layout thrash #757