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:
Generated
+14
@@ -98,6 +98,9 @@ importers:
|
||||
react-router-dom:
|
||||
specifier: ^6.28.0
|
||||
version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
react-virtuoso:
|
||||
specifier: ^4.18.7
|
||||
version: 4.18.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
zustand:
|
||||
specifier: ^5.0.1
|
||||
version: 5.0.12(@types/react@18.3.28)(react@18.3.1)(use-sync-external-store@1.6.0(react@18.3.1))
|
||||
@@ -5420,6 +5423,12 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^18.3.1
|
||||
|
||||
react-virtuoso@4.18.7:
|
||||
resolution: {integrity: sha512-xNF5zDGEEIMB7cKwcen/pLig0YDf6OnfFrVgKFa7sHPf9fRem0CaLshyObbBcP88jzn0enavL39EgplgdyT21g==}
|
||||
peerDependencies:
|
||||
react: '>=16 || >=17 || >= 18 || >= 19'
|
||||
react-dom: '>=16 || >=17 || >= 18 || >=19'
|
||||
|
||||
react@18.3.1:
|
||||
resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@@ -12820,6 +12829,11 @@ snapshots:
|
||||
react-shallow-renderer: 16.15.0(react@18.3.1)
|
||||
scheduler: 0.23.2
|
||||
|
||||
react-virtuoso@4.18.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
|
||||
dependencies:
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
react@18.3.1:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
|
||||
Reference in New Issue
Block a user