stacklok / toolhive-studio / 25380773903

68%

main: 71%

Pull #2192

github

perf(playground): virtualize long chat threads with TanStack Virtual

Long Playground threads (200+ messages) felt sluggish on initial render,
streaming ticks, and route-restored scrolling because every row stayed
mounted and re-rendered on every status update. Adopts TanStack Virtual
through a hybrid strategy: historical rows render through `useVirtualizer`
+ `measureElement` (dynamic heights, `useFlushSync: false` per the React
19 guidance, `overscan: 5`), while the last TAIL_SIZE (2) rows and the
"Thinking..." indicator stay in normal flow. The streaming row keeps
growing scrollHeight naturally, so the ResizeObserver follow-to-bottom
logic in useAutoScroll is preserved unchanged.

A VIRTUALIZE_THRESHOLD of 10 short-circuits the virtualizer on small
threads, and the leaf VirtualChatMessageList carries `use no memo` so
React Compiler does not bail out on the surrounding tree. ChatInterface
delegates list rendering to the new ChatMessageList, and useAutoScroll
finds either render path through a shared `data-chat-inner` wrapper
instead of `firstElementChild`.

4432 of 7142 branches covered (62.06%)

55 of 96 new or added lines in 10 files covered. (57.29%)

6666 of 9964 relevant lines covered (66.9%)

123.47 hits per line