Description
The dashboard and streams page render all stream cards in a flat list. For power users (companies, DAOs) with hundreds of streams, this causes:
- Slow initial render (all DOM nodes created at once)
- High memory usage (all cards in DOM simultaneously)
- Scroll jank on lower-end devices
Current Behavior
fetchStreamsForAddress returns up to 1,000 stream IDs, and the UI renders a card for each. With 500 streams, that's 500+ DOM nodes created on mount.
Proposed Solution
Use a virtualization library like @tanstack/react-virtual or react-window to only render stream cards visible in the viewport (plus a small overscan buffer).
Acceptance Criteria
Description
The dashboard and streams page render all stream cards in a flat list. For power users (companies, DAOs) with hundreds of streams, this causes:
Current Behavior
fetchStreamsForAddressreturns up to 1,000 stream IDs, and the UI renders a card for each. With 500 streams, that's 500+ DOM nodes created on mount.Proposed Solution
Use a virtualization library like
@tanstack/react-virtualorreact-windowto only render stream cards visible in the viewport (plus a small overscan buffer).Acceptance Criteria