Skip to content

Implement virtual scrolling for the marketplace invoice list #251

Description

@king-aj-the-first

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.

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions