perf(P6B.T8): virtualize message list with react-virtuoso
Switches the ConversationPage chat list from a full O(N) render to windowed rendering via react-virtuoso. On long histories only the visible rows (plus a 400px overscan buffer) live in the DOM, ending the scroll jank and layout thrashing that hit conversations with >500 messages. Preserved behaviors: - Newest message visible on open via initialTopMostItemIndex. - Auto-scroll on send via a pending-count-based effect (the old setStickToBottom + useLayoutEffect pattern doesn't apply now that Virtuoso owns the scroll element). - Realtime auto-follow only when scrolled to bottom (followOutput). - 'New messages while away' counter + 'jump to newest' pill via atBottomStateChange. - Pinned-message / reply / search jumps via virtuosoRef.scrollToIndex; expands displayCount on the fly if the target is outside the rendered slice. Flash highlight unchanged. - Load-older infinite scroll via Virtuoso startReached (replaces the IntersectionObserver-on-sentinel pattern). - Per-conversation position memory now keys on row index instead of pixel scrollTop (the latter isn't meaningful under virtualization). Also wires the PinnedMessagesPanel onJump callback (previously a TODO that just closed the panel) into jumpToMessage, since virtualization made the smooth-scroll-from-pinned UX easy to deliver as a side benefit.
This commit is contained in:
@@ -35,6 +35,7 @@
|
||||
"react-easy-crop": "^5.5.7",
|
||||
"react-i18next": "^15.1.1",
|
||||
"react-router-dom": "^6.28.0",
|
||||
"react-virtuoso": "^4.18.7",
|
||||
"zustand": "^5.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Reference in New Issue
Block a user