fix: virtuoso enable followOutput (#597)

* fix: virtuoso enable followOutput * bump react-virtuoso
GetStream · Nov 4, 2020 · 39594af · 39594af
1 parent 57b57ac
commit 39594af
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 34 deletions.
diff --git 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
@@ -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={() => <EmptyStateIndicator listType="message" />}
-        header={() => (
-          <div
-            className="str-chat__virtual-list__loading"
-            style={{ visibility: loadingMore ? undefined : 'hidden' }}
-          >
-            <LoadingIndicator size={20} />
-          </div>
-        )}
-        // @ts-ignore
-        footer={() => TypingIndicator && <TypingIndicator avatarSize={24} />}
+        header={() =>
+          loadingMore ? (
+            <div className="str-chat__virtual-list__loading">
+              <LoadingIndicator size={20} />
+            </div>
+          ) : (
+            <></>
+          )
+        }
+        footer={() =>
+          TypingIndicator ? <TypingIndicator avatarSize={24} /> : <></>
+        }
         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
@@ -39,20 +39,7 @@ exports[`VirtualizedMessageList should render the list without any message 1`] =
               }
             }
           >
-            <header>
-              <div
-                className="str-chat__virtual-list__loading"
-                style={
-                  Object {
-                    "visibility": "hidden",
-                  }
-                }
-              >
-                <div>
-                  LoadingIndicator
-                </div>
-              </div>
-            </header>
+            <header />
             <footer />
           </div>
         </div>

diff --git a/yarn.lock b/yarn.lock
@@ -9796,10 +9796,10 @@ react-view-pager@^0.6.0:
     resize-observer-polyfill "1.5.0"
     tabbable "1.1.2"
 
-react-virtuoso@0.20.0:
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-0.20.0.tgz#df1d6e33e358f817dbf954bd556333fcdcc91eb1"
-  integrity sha512-h+U6t/+m91AzfUe6bBfaacdLLJl1y8v7CfcXwPgQ/Dic+vNlgQmi6cIKTq18zuF+kI8Q7QN0ojIeqPHWbU8TZA==
+react-virtuoso@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-0.20.1.tgz#a75617e806c7c4a4a4ea998770f794f9a2273001"
+  integrity sha512-rYPQTsVK/44AVRCVxcFSp4wetjO2I14OyohbHFY97qGE76FBxTo+VcwKHaIkuziNqFJqyrFfBjQZabbiwEtFFg==
   dependencies:
     resize-observer-polyfill "^1.5.1"
     tslib "^1.11.1"