Skip to content

[367] Frontend: Add paginated transaction history with infinite scroll#467

Merged
Junirezz merged 3 commits into
Junirezz:mainfrom
amehsamuel200225-sketch:fix/367-frontend-add-paginated-transaction-history-with-infinite-scroll
May 28, 2026
Merged

[367] Frontend: Add paginated transaction history with infinite scroll#467
Junirezz merged 3 commits into
Junirezz:mainfrom
amehsamuel200225-sketch:fix/367-frontend-add-paginated-transaction-history-with-infinite-scroll

Conversation

@amehsamuel200225-sketch
Copy link
Copy Markdown

Summary

This PR implements paginated transaction history with infinite scroll support for the YieldVault frontend.

Changes

New: useInfiniteScroll hook (src/hooks/useInfiniteScroll.ts)

  • Custom React hook using the IntersectionObserver API
  • Uses a sentinel element pattern for efficient scroll detection
  • Configurable threshold and enable/disable control
  • Stable callback ref pattern to avoid unnecessary observer resubscriptions

Updated: TransactionHistory page (src/pages/TransactionHistory.tsx)

  • Added view mode toggle between Paginated and Infinite Scroll modes
  • View mode preference persisted per-wallet in localStorage
  • Infinite scroll progressively reveals transactions in batches of 20
  • Progress bar shows loading progress
  • End-of-list indicator when all transactions are loaded
  • All existing pagination, filtering, sorting, and search functionality preserved

New CSS styles (src/index.css)

  • View mode toggle button group with active state
  • Loading spinner animation
  • Progress bar with gradient
  • End-of-list divider with fade-in animation
  • Dark/light theme support
  • Print media query hiding
  • Responsive mobile layout
  • Reduced motion accessibility support

Tests (src/hooks/useInfiniteScroll.test.ts)

  • 9 comprehensive unit tests for the hook
  • All 323 existing tests pass with zero regressions

Testing

  • All 38 test files pass (323 tests total, 0 failures)
  • No new TypeScript errors introduced

Closes #367

- Add useInfiniteScroll custom hook using IntersectionObserver pattern
- Add view mode toggle (paginated vs infinite scroll) to TransactionHistory
- Implement progressive data loading with sentinel element detection
- Add progress bar and 'all loaded' end-of-list indicator
- Persist view mode preference per wallet in localStorage
- Add CSS styles with animations, dark/light theme support, and print hiding
- Add comprehensive unit tests for useInfiniteScroll hook (9 tests)
- All 323 existing tests continue to pass

Closes Junirezz#367
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 26, 2026

@amehsamuel200225-sketch Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Junirezz Junirezz merged commit 3c93ca9 into Junirezz:main May 28, 2026
7 of 13 checks passed
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.

Frontend: Add paginated transaction history with infinite scroll

2 participants