Background: With 50+ invoices, the marketplace DOM becomes heavy. Virtual scrolling renders only visible cards.
What "done" looks like:
- Install and use
@tanstack/react-virtual (already likely compatible with TanStack Query in the project)
- Marketplace list renders a virtual window — only ~10 cards in the DOM at a time
- Smooth scroll behaviour, correct item heights, no layout shift
Key files: app/marketplace/page.tsx, components/invoice/InvoiceCard.tsx
Constraints:
PR must include: Virtual scroller + dynamic height measurement + performance comparison (DOM node count before vs after) in PR description.
Background: With 50+ invoices, the marketplace DOM becomes heavy. Virtual scrolling renders only visible cards.
What "done" looks like:
@tanstack/react-virtual(already likely compatible with TanStack Query in the project)Key files:
app/marketplace/page.tsx,components/invoice/InvoiceCard.tsxConstraints:
@tanstack/react-virtualPR must include: Virtual scroller + dynamic height measurement + performance comparison (DOM node count before vs after) in PR description.