Users experience UI lag and unresponsiveness when:

1. Opening large documents — A document with 100+ nested blocks/sections causes slow initial render and janky scrolling as React mounts the entire tree

2. Viewing discussion feeds — Long lists of comments/discussions (50+) bog down the UI, especially on lower-powered devices

3. Browsing document lists — Feeds showing many document cards (homepage, search results) become sluggish

The source data is fine to keep in memory. The bottleneck is React's reconciliation + DOM mounting — we're rendering hundreds of components that aren't even visible.

Implement windowing/virtualization to render only visible items. Two libraries depending on data structure.

We might choose to use one or both of these libraries. It is undecided which is best, so we should experiment with both or even more.

Our documents have existing expand/collapse behavior which we would need to rewrite.

For discussions, feeds, and simple document lists:

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => containerRef.current,
  estimateSize: () => 80, // estimated row height
})

// Only render virtualizer.getVirtualItems() — typically 10-20 items

Open question: How do we handle variable-height items? TanStack supports measureElement for dynamic sizing but adds complexity.

For document outline/block trees:

<Tree
  data={documentBlocks}
  width={containerWidth}
  height={containerHeight}
  rowHeight={32}
>
  {({ node, style }) => <BlockRenderer node={node} style={style} />}
</Tree>

Handles expand/collapse and only renders visible nodes automatically.

Open question: How does this integrate with our current recursive block rendering? We'd need to flatten our tree model or adapt our renderers to arborist's API.