Issue #73 — Virtualized Transaction History with Cursor Pagination

[Topmatrixmor2014]

Virtualize the transaction list and use cursor pagination so accounts with thousands of transactions stay smooth and memory-light.

Requirements and Context

frontend/components/TransactionList.tsx and the transactions page render transaction history in a plain list. Large accounts (thousands of rows) cause slow initial renders and high memory use, and the current pagination is not cursor-based, so deep-page navigation is O(n) and can skip/duplicate rows when new transactions arrive.

Objectives

1. Add cursor-based pagination (e.g., ?cursor=...) to the transaction fetch path.
2. Virtualize TransactionList (windowed rendering, e.g., a lightweight virtualizer or react-window).
3. Preserve filters/search (TransactionSearchBar.tsx, frontend/lib/transactionSearch.ts) across pagination.
4. Add performance tests/assertions (render time / memory) for a large synthetic dataset.

Suggested Execution

1. git checkout -b feat/virtualized-transactions.
2. Implement cursor pagination in frontend/lib/api.ts and the transactions page.
3. Virtualize TransactionList.tsx and keep the highlighted-row/actions intact.
4. Add frontend/__tests__/transactionPagination.test.ts and run npm run type-check && npm test.

Acceptance Criteria

• Cursor pagination avoids skip/duplicate on new data (≥4 tests).
• The list renders only the visible window (verified via test/assertion).
• Filters/search still work across pages.
• Large synthetic datasets (≥10k rows) render without jank.

Guidelines

• Verify the virtualizer is a11y-friendly (keyboard navigation, screen-reader announcements).
• Do not regress existing transaction actions (tags, export, receipts).

Timeframe: 96 hours

---

[github-actions]

🤖 Greptile AI Context

Greptile has indexed this repository and can provide AI-assisted code review
and context for this issue.

How to use Greptile on this issue:

• Comment @greptileai to ask about relevant code, files, or implementation approaches
• Reference specific files or error messages for targeted analysis
• Use @greptileai explain <file> to get an explanation of any file

Greptile is configured with project-specific rules in .greptile/config.json.

[Samaro1]

Gm gm boss. I would like to take this one on. I can implement cursor pagination for the transaction fetch path (avoiding skip/duplicate on new data), virtualize TransactionList while preserving the highlighted row and actions, keep filters and search working across pages, and add the pagination and performance tests covering a 10k+ row synthetic dataset with a11y-friendly virtualizer behavior. Please assign it to me.

[grantfox-oss]

🦊 GrantFox — @Samaro1 has been assigned to this issue as part of the Third Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #642)
2. Your PR will be reviewed by the FinChippay maintainers

Good luck! Track your progress on GrantFox.