diff --git a/package.json b/package.json index eccf368ec..c98d55086 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "react-markdown": "^4.3.1", "react-player": "^2.6.2", "react-textarea-autosize": "^8.2.0", - "react-virtuoso": "0.20.0", + "react-virtuoso": "^0.20.1", "seamless-immutable": "^7.1.4", "textarea-caret": "^3.1.0", "uuid": "^8.3.1" diff --git a/src/components/MessageList/VirtualizedMessageList.js b/src/components/MessageList/VirtualizedMessageList.js index 3f283aa0d..250f0a247 100644 --- a/src/components/MessageList/VirtualizedMessageList.js +++ b/src/components/MessageList/VirtualizedMessageList.js @@ -64,11 +64,8 @@ const VirtualizedMessageList = ({ /* do nothing if new messages are loaded from top(loadMore) */ if (lastMessage.id === prevMessageId) return; - /* if list is already at the bottom make it sticky */ - if (atBottom.current) { - setTimeout(() => virtuoso.current?.scrollToIndex(messages.length)); // setTimeout is needed to delay the scroll until react flushes - return; - } + /* if list is already at the bottom return, followOutput will do the job */ + if (atBottom.current) return; /* if the new message belongs to current user scroll to bottom */ if (lastMessage.user?.id === client.userID) { @@ -127,20 +124,23 @@ const VirtualizedMessageList = ({ ref={virtuoso} totalCount={messages.length} overscan={overscan} + followOutput={true} maxHeightCacheSize={2000} // reset the cache once it reaches 2k scrollSeek={scrollSeekPlaceHolder} item={(i) => messageRenderer(messages, i)} emptyComponent={() => } - header={() => ( -
- -
- )} - // @ts-ignore - footer={() => TypingIndicator && } + header={() => + loadingMore ? ( +
+ +
+ ) : ( + <> + ) + } + footer={() => + TypingIndicator ? : <> + } startReached={() => { // mounted.current prevents immediate loadMore on first render if (mounted.current && hasMore) { diff --git a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap index d88b74760..d5ef8b070 100644 --- a/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap +++ b/src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap @@ -39,20 +39,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] = } } > -
-
-
- LoadingIndicator -
-
-
+