chore: Virtualize rendering of conversations (WPB-15154)

package.json

@@ -10,6 +10,7 @@
     "@lexical/react": "0.21.0",
     "@lexical/rich-text": "0.21.0",
     "@mediapipe/tasks-vision": "0.10.20",
+    "@tanstack/react-virtual": "^3.11.2",
     "@wireapp/avs": "10.0.4",
     "@wireapp/avs-debugger": "0.0.7",
     "@wireapp/commons": "5.4.0",

setupTests.js

@@ -51,6 +51,24 @@ jest.mock('axios', () => {
   };
 });
 
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+global.ResizeObserver = ResizeObserver;
+
+// Mock IntersectionObserver
+class IntersectionObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return [];
+  }
+}
+global.IntersectionObserver = IntersectionObserver;
+
 window.TextEncoder = encoding.TextEncoder;
 window.TextDecoder = encoding.TextDecoder;
 

src/script/page/LeftSidebar/panels/Conversations/ConversationsList.test.tsx

@@ -89,12 +89,14 @@ describe('ConversationsList', () => {
     );
 
   it("should render all 1:1 conversations if there's no search filter", () => {
-    const unserNames = ['Alice', 'Bob', 'Charlie'];
-    const conversations = unserNames.map(create1to1Conversation);
+    const userNames = ['Alice', 'Bob', 'Charlie'];
+    const conversations = userNames.map(create1to1Conversation);
+
+    window.Element.prototype.getBoundingClientRect = jest.fn().mockReturnValue({height: 1000, width: 1000});
 
     const {getByText} = renderComponent(conversations);
 
-    unserNames.forEach(userName => {
+    userNames.forEach(userName => {
       expect(getByText(userName)).toBeDefined();
     });
   });

src/script/page/LeftSidebar/panels/Conversations/ConversationsList.tsx

@@ -24,8 +24,11 @@ import React, {
   useState,
   MutableRefObject,
   useCallback,
+  useRef,
 } from 'react';
 
+import {useVirtualizer} from '@tanstack/react-virtual';
+
 import {ConversationListCell} from 'Components/ConversationListCell';
 import {Call} from 'src/script/calling/Call';
 import {ConversationLabel, ConversationLabelRepository} from 'src/script/conversation/ConversationLabelRepository';
@@ -38,7 +41,7 @@ import {matchQualifiedIds} from 'Util/QualifiedId';
 
 import {ConnectionRequests} from './ConnectionRequests';
 import {conversationsList, headingTitle, noResultsMessage} from './ConversationsList.styles';
-import {conversationSearchFilter, scrollToConversation} from './helpers';
+import {conversationSearchFilter} from './helpers';
 
 import {CallState} from '../../../../calling/CallState';
 import {ConversationState} from '../../../../conversation/ConversationState';
@@ -124,6 +127,19 @@ export const ConversationsList = ({
     listViewModel.contentViewModel.switchContent(ContentState.CONNECTION_REQUESTS);
   };
 
+  const isFolderView = currentTab === SidebarTabs.FOLDER;
+  const filteredConversations =
+    (isFolderView && currentFolder?.conversations().filter(conversationSearchFilter(conversationsFilter))) || [];
+  const conversationsToDisplay = filteredConversations.length ? filteredConversations : conversations;
+
+  const parentRef = useRef(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: conversationsToDisplay.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 56,
+  });
+
   const onConversationClick = useCallback(
     (conversation: Conversation) =>
       (event: ReactMouseEvent<HTMLDivElement, MouseEvent> | ReactKeyBoardEvent<HTMLDivElement>) => {
@@ -161,15 +177,16 @@ export const ConversationsList = ({
 
   useEffect(() => {
     if (!conversationsFilter && clickedFilteredConversationId) {
-      scrollToConversation(clickedFilteredConversationId);
+      const conversationIndex = conversationsToDisplay.findIndex(conv => conv.id === clickedFilteredConversationId);
+
+      if (conversationIndex !== -1) {
+        rowVirtualizer.scrollToIndex(conversationIndex, {align: 'center'});
+      }
+
+      // scrollToConversation(clickedFilteredConversationId);
       setClickedFilteredConversationId(null);
     }
-  }, [conversationsFilter, clickedFilteredConversationId]);
-
-  const isFolderView = currentTab === SidebarTabs.FOLDER;
-  const filteredConversations =
-    (isFolderView && currentFolder?.conversations().filter(conversationSearchFilter(conversationsFilter))) || [];
-  const conversationsToDisplay = filteredConversations.length ? filteredConversations : conversations;
+  }, [conversationsFilter, clickedFilteredConversationId, conversationsToDisplay]);
 
   return (
     <>
@@ -183,10 +200,45 @@ export const ConversationsList = ({
         <p css={noResultsMessage}>{t('searchConversationsNoResult')}</p>
       )}
 
-      <ul css={conversationsList} data-uie-name="conversation-view">
-        {conversationsToDisplay.map((conversation, index) => (
-          <ConversationListCell key={conversation.id} {...getCommonConversationCellProps(conversation, index)} />
-        ))}
+      <ul
+        css={conversationsList}
+        data-uie-name="conversation-view"
+        ref={parentRef}
+        style={{
+          height: '100%',
+          overflow: 'auto',
+        }}
+      >
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map(virtualItem => {
+            const conversation = conversationsToDisplay[virtualItem.index];
+
+            return (
+              <div
+                key={virtualItem.key}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: `${virtualItem.size}px`,
+                  transform: `translateY(${virtualItem.start}px)`,
+                }}
+              >
+                <ConversationListCell
+                  key={conversation.id}
+                  {...getCommonConversationCellProps(conversation, virtualItem.index)}
+                />
+              </div>
+            );
+          })}
+        </div>
       </ul>
 
       {isGroupParticipantsVisible && (

yarn.lock

@@ -4900,6 +4900,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-virtual@npm:^3.11.2":
+  version: 3.11.2
+  resolution: "@tanstack/react-virtual@npm:3.11.2"
+  dependencies:
+    "@tanstack/virtual-core": "npm:3.11.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10/a1136da0ec4c2ecbd4f996d8b84f228f0b8d851b15806e01049a160ad1d9b2eef0e0a491035fe017c6f84a0e125334f69ea23b32c180df23614ea4a8eeb7490c
+  languageName: node
+  linkType: hard
+
+"@tanstack/virtual-core@npm:3.11.2":
+  version: 3.11.2
+  resolution: "@tanstack/virtual-core@npm:3.11.2"
+  checksum: 10/8433044a5c801052ba2e4cdda098cdc8e32adfd3a76ba31af7064bbdda60062fe221a3558096987baa66cd94f528855e887c282cb0f9eb99d3751457c2a62872
+  languageName: node
+  linkType: hard
+
 "@testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
@@ -18755,6 +18774,7 @@ __metadata:
     "@lexical/rich-text": "npm:0.21.0"
     "@mediapipe/tasks-vision": "npm:0.10.20"
     "@roamhq/wrtc": "npm:0.8.0"
+    "@tanstack/react-virtual": "npm:^3.11.2"
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/react": "npm:16.1.0"
     "@types/dexie-batch": "npm:0.4.7"