Performance overhaul: virtualized lists and streaming server components for 10k+ member/pass datasets

[Lakes41]

Difficulty: Expert
Type: performance

Background
Member and pass management are core dashboard features, and while current mock datasets are likely small, real guild communities can have thousands of members and passes, which the current table-rendering approach (likely rendering full arrays directly) would not handle well.

Problem
Rendering large lists/tables in full (no virtualization) causes slow initial paint, janky scrolling, and excessive memory use as dataset size grows; additionally, Next.js 14's streaming/server component capabilities are likely under-utilized for progressively rendering large pages.

Expected outcome
Members and passes tables use row virtualization to smoothly render 10k+ rows, initial page loads use React Server Components with streaming (Suspense boundaries) so above-the-fold content (stats, filters) appears before the full table data resolves, and route-level code splitting keeps JS bundles lean, verified with a bundle-analysis report.

Suggested implementation

• Introduce a virtualization library (e.g., @tanstack/react-virtual) for the members and passes tables, keeping only visible rows mounted.
• Refactor page composition to use Suspense boundaries around the data-heavy table, with a fast-loading shell (stats/filters) rendered immediately.
• Add next/dynamic for any heavy, non-critical-path client components (e.g., export/CSV utilities, charts) to defer their JS.
• Add and run @next/bundle-analyzer against apps/dashboard, capturing a before/after bundle size comparison in the PR description.
• Benchmark render/scroll performance with a synthetic 10k-row dataset added temporarily to mock-data.ts (or a seed script) and document results (e.g., via Chrome DevTools Performance panel) in docs/.

Acceptance criteria

• Members/passes tables remain smooth (no dropped-frame scrolling) with 10k+ rows
• Suspense boundaries allow partial page render before full table data resolves
• Bundle analyzer report included showing reduced/controlled bundle size for heavy components
• Performance benchmark results documented in docs/

Likely affected files/directories

• apps/dashboard/app/members/
• apps/dashboard/app/passes/
• apps/dashboard/lib/mock-data.ts
• apps/dashboard/next.config.js
• docs/