feat: Improvements for virtual rendering (#19448)

* feat: Improvements for virutal rendering

* improvements

Author: przemvs

src/script/components/MessagesList/VirtualizedMessageListWrapper.tsx

@@ -28,7 +28,6 @@ import {VirtualizedMessagesList} from 'Components/MessagesList/VirtualizedMessag
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
 import {MessagesListParams} from './MessageList.types';
-import {useLoadConversation} from './utils/useLoadConversation';
 
 export const VirtualizedMessageListWrapper = ({
   assetRepository,
@@ -59,14 +58,6 @@ export const VirtualizedMessageListWrapper = ({
   const parentRef = useRef<HTMLDivElement | null>(null);
   const conversationLastReadTimestamp = useRef<number>(lastReadTimestamp);
 
-  // Hook for load current conversation
-  const {loadConversation} = useLoadConversation({
-    conversation,
-    conversationRepository,
-    conversationLastReadTimestamp,
-    onLoading,
-  });
-
   return (
     <FadingScrollbar
       ref={parentRef}
@@ -81,7 +72,7 @@ export const VirtualizedMessageListWrapper = ({
         </div>
       )}
 
-      {isConversationLoaded && parentRef.current && (
+      {parentRef.current && (
         <VirtualizedMessagesList
           parentElement={parentRef.current}
           conversationLastReadTimestamp={conversationLastReadTimestamp}
@@ -104,7 +95,8 @@ export const VirtualizedMessageListWrapper = ({
           isMsgElementsFocusable={isMsgElementsFocusable}
           setMsgElementsFocusable={setMsgElementsFocusable}
           updateConversationLastRead={updateConversationLastRead}
-          loadConversation={loadConversation}
+          onLoading={onLoading}
+          isConversationLoaded={isConversationLoaded}
         />
       )}
     </FadingScrollbar>

src/script/components/MessagesList/VirtualizedMessagesList/VirtualizedMessagesList.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {MutableRefObject, useEffect, useMemo, useState} from 'react';
+import {MutableRefObject, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 
 import {useVirtualizer} from '@tanstack/react-virtual';
 import cx from 'classnames';
@@ -28,22 +28,22 @@ import {MessagesListParams} from 'Components/MessagesList/MessageList.types';
 import {UploadAssets} from 'Components/MessagesList/UploadAssets';
 import {verticallyCenterMessage} from 'Components/MessagesList/utils/helpers';
 import {filterMessages} from 'Components/MessagesList/utils/messagesFilter';
+import {useLoadConversation} from 'Components/MessagesList/utils/useLoadConversation';
+import {useLoadInitialMessage} from 'Components/MessagesList/utils/useLoadInitialMessage';
 import {groupMessagesBySenderAndTime, isMarker} from 'Components/MessagesList/utils/virtualizedMessagesGroup';
 import {useLoadMessages} from 'Components/MessagesList/VirtualizedMessagesList/useLoadMessages';
 import {useScrollMessages} from 'Components/MessagesList/VirtualizedMessagesList/useScrollMessages';
 import {useRoveFocus} from 'Hooks/useRoveFocus';
-import {Conversation} from 'Repositories/entity/Conversation';
-import {Message as MessageEntity} from 'Repositories/entity/message/Message';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 
 import {VirtualizedJumpToLastMessageButton} from '../VirtualizedJumpToLastMessageButton';
 
 const ESTIMATED_ELEMENT_SIZE = 48;
 
-interface Props extends Omit<MessagesListParams, 'isRightSidebarOpen' | 'onLoading' | 'isConversationLoaded'> {
+interface Props extends Omit<MessagesListParams, 'isRightSidebarOpen' | 'onLoading'> {
   parentElement: HTMLDivElement;
   conversationLastReadTimestamp: MutableRefObject<number>;
-  loadConversation: (conversation: Conversation) => Promise<MessageEntity[]>;
+  onLoading: (isLoading: boolean) => void;
 }
 
 export const VirtualizedMessagesList = ({
@@ -68,7 +68,8 @@ export const VirtualizedMessagesList = ({
   setMsgElementsFocusable,
   conversationLastReadTimestamp,
   updateConversationLastRead,
-  loadConversation,
+  onLoading,
+  isConversationLoaded,
 }: Props) => {
   const {
     messages: allMessages,
@@ -77,13 +78,17 @@ export const VirtualizedMessagesList = ({
     isGuestAndServicesRoom,
     isActiveParticipant,
     inTeam,
+    isLoadingMessages,
+    hasAdditionalMessages,
   } = useKoSubscribableChildren(conversation, [
     'inTeam',
     'isActiveParticipant',
     'messages',
     'lastDeliveredMessage',
     'isGuestRoom',
     'isGuestAndServicesRoom',
+    'isLoadingMessages',
+    'hasAdditionalMessages',
   ]);
 
   const filteredMessages = filterMessages(allMessages);
@@ -92,26 +97,8 @@ export const VirtualizedMessagesList = ({
     return groupMessagesBySenderAndTime(filteredMessages, conversationLastReadTimestamp.current);
   }, [conversationLastReadTimestamp, filteredMessages]);
 
-  const initialMessageId = conversation.initialMessage()?.id;
-
-  const [highlightedMessage, setHighlightedMessage] = useState<string | undefined>(undefined);
+  const [highlightedMessage, setHighlightedMessage] = useState<string | undefined>(conversation.initialMessage()?.id);
   const [loadingMessages, setLoadingMessages] = useState(false);
-  const [alreadyScrolledToLastMessage, setAlreadyScrolledToLastMessage] = useState(false);
-
-  useEffect(() => {
-    if (!initialMessageId) {
-      return () => undefined;
-    }
-
-    setHighlightedMessage(initialMessageId);
-
-    const timeout = setTimeout(() => {
-      setHighlightedMessage(undefined);
-      conversation.initialMessage(undefined);
-    }, 3000);
-
-    return () => clearTimeout(timeout);
-  }, [conversation, initialMessageId]);
 
   const {focusedId, handleKeyDown, setFocusedId} = useRoveFocus(filteredMessages.map(message => message.id));
 
@@ -122,24 +109,39 @@ export const VirtualizedMessagesList = ({
     getScrollElement: () => parentElement,
     estimateSize: () => ESTIMATED_ELEMENT_SIZE,
     measureElement: element => element?.getBoundingClientRect().height || ESTIMATED_ELEMENT_SIZE,
-    overscan: 2,
   });
 
+  // Hook for load current conversation
+  const {loadConversation} = useLoadConversation({
+    conversation,
+    conversationRepository,
+    conversationLastReadTimestamp,
+    onLoading,
+  });
+
+  // Hook for loading the initial message ( it takes initial message from search, last unread message or last message )
+  useLoadInitialMessage(virtualizer, {
+    conversation,
+    isConversationLoaded,
+    allMessages,
+    conversationLastReadTimestamp,
+  });
+
+  // Hook for loading preceding / following messages when user scrolls to top / bottom
   useLoadMessages(virtualizer, {
     conversation,
     conversationRepository,
     loadingMessages,
     onLoadingMessages: setLoadingMessages,
     itemsLength: groupedMessages.length,
-    initialMessageId,
+    shouldPullMessages: !isLoadingMessages && hasAdditionalMessages,
   });
 
+  // Hook for scrolling messages when a new message is sent or received
   useScrollMessages(virtualizer, {
     messages: groupedMessages,
-    highlightedMessage,
     userId: selfUser.id,
-    conversationLastReadTimestamp,
-    setAlreadyScrolledToLastMessage,
+    isConversationLoaded,
   });
 
   // When a new conversation is opened using keyboard(enter), focus on the last message
@@ -155,24 +157,41 @@ export const VirtualizedMessagesList = ({
     }
   }, []);
 
+  const scrolledToHighlightedMessage = useRef(false);
+
   const onTimestampClick = async (messageId: string) => {
+    scrolledToHighlightedMessage.current = false;
     setHighlightedMessage(messageId);
 
-    const highlightMessageTimeout = setTimeout(() => setHighlightedMessage(undefined), 3000);
-    clearTimeout(highlightMessageTimeout);
+    const clearHighlightedMessage = setTimeout(() => {
+      setHighlightedMessage(undefined);
+      scrolledToHighlightedMessage.current = false;
+      clearTimeout(clearHighlightedMessage);
+    }, 5000);
 
     const messageIsLoaded = conversation.getMessage(messageId);
 
     if (!messageIsLoaded) {
       const messageEntity = await messageRepository.getMessageInConversationById(conversation, messageId);
       conversation.removeMessages();
-      conversationRepository.getMessagesWithOffset(conversation, messageEntity);
+      void conversationRepository.getMessagesWithOffset(conversation, messageEntity);
     }
   };
 
-  const virtualItems = virtualizer.getVirtualItems();
-  const lastIndex = groupedMessages.length - 1;
-  const isLastMessageVisible = virtualItems.some(item => item.index === lastIndex);
+  useLayoutEffect(() => {
+    if (highlightedMessage && !scrolledToHighlightedMessage.current) {
+      const highlightedMessageIndex = groupedMessages.findIndex(
+        msg => !isMarker(msg) && msg.message.id === highlightedMessage,
+      );
+
+      virtualizer.scrollToIndex(highlightedMessageIndex, {align: 'center'});
+
+      const setScrolledToHighlightedMessageTimeout = setTimeout(() => {
+        scrolledToHighlightedMessage.current = true;
+        clearTimeout(setScrolledToHighlightedMessageTimeout);
+      }, 100);
+    }
+  }, [groupedMessages, highlightedMessage, virtualizer]);
 
   const onJumpToLastMessageClick = async () => {
     setHighlightedMessage(undefined);
@@ -185,17 +204,22 @@ export const VirtualizedMessagesList = ({
       await loadConversation(conversation);
     }
 
-    conversationLastReadTimestamp.current = groupedMessages[groupedMessages.length - 1].timestamp;
+    conversationLastReadTimestamp.current = allMessages[allMessages.length - 1].timestamp();
 
-    requestAnimationFrame(() => {
-      virtualizer.scrollToIndex(groupedMessages.length - 1, {align: 'end'});
-    });
+    const scrollTimeout = setTimeout(() => {
+      virtualizer.scrollToIndex(allMessages.length - 1, {align: 'end'});
+      clearTimeout(scrollTimeout);
+    }, 100);
   };
 
+  const virtualItems = virtualizer.getVirtualItems();
+  const lastIndex = groupedMessages.length - 1;
+  const isLastMessageVisible = virtualItems.some(item => item.index === lastIndex);
+
   useEffect(() => {
     // Timeout to ensure that the messages are rendered before calling getVisibleCallback
     const timeout = setTimeout(() => {
-      if (!alreadyScrolledToLastMessage) {
+      if (!isConversationLoaded) {
         return;
       }
 
@@ -208,7 +232,11 @@ export const VirtualizedMessagesList = ({
     }, 100);
 
     return () => clearTimeout(timeout);
-  }, [alreadyScrolledToLastMessage, virtualItems]);
+  }, [isConversationLoaded, virtualItems]);
+
+  if (!isConversationLoaded) {
+    return null;
+  }
 
   return (
     <>

src/script/components/MessagesList/VirtualizedMessagesList/useLoadMessages.ts

@@ -23,58 +23,40 @@ import {Virtualizer} from '@tanstack/react-virtual';
 
 import {ConversationRepository} from 'Repositories/conversation/ConversationRepository';
 import {Conversation} from 'Repositories/entity/Conversation';
-import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {isLastReceivedMessage} from 'Util/conversationMessages';
 
-const SCROLL_THRESHOLD = 10;
+const SCROLL_THRESHOLD = 100;
 
 interface Props {
   conversation: Conversation;
   conversationRepository: ConversationRepository;
   loadingMessages: boolean;
   onLoadingMessages: (isLoading: boolean) => void;
   itemsLength: number;
-  initialMessageId?: string;
+  shouldPullMessages: boolean;
 }
 
 export const useLoadMessages = (
   virtualizer: Virtualizer<HTMLDivElement, Element>,
-  {conversation, conversationRepository, loadingMessages, onLoadingMessages, itemsLength, initialMessageId}: Props,
+  {conversation, conversationRepository, loadingMessages, onLoadingMessages, itemsLength, shouldPullMessages}: Props,
 ) => {
   const fillContainerByMessagesRef = useRef(false);
 
-  const {isLoadingMessages, hasAdditionalMessages} = useKoSubscribableChildren(conversation, [
-    'isLoadingMessages',
-    'hasAdditionalMessages',
-  ]);
-
   const loadPrecedingMessages = useCallback(async () => {
-    const shouldPullMessages = !isLoadingMessages && hasAdditionalMessages;
-
     if (!shouldPullMessages) {
       return;
     }
 
     try {
       onLoadingMessages(true);
       const newMessages = await conversationRepository.getPrecedingMessages(conversation);
-
-      if (!initialMessageId) {
-        virtualizer.scrollToIndex(newMessages.length, {align: 'start'});
-      }
+      virtualizer.scrollToIndex(newMessages.length, {align: 'start'});
     } catch (error) {
       console.error('Error loading preceding messages:', error);
     } finally {
       onLoadingMessages(false);
     }
-  }, [
-    conversation,
-    conversationRepository,
-    hasAdditionalMessages,
-    isLoadingMessages,
-    onLoadingMessages,
-    initialMessageId,
-  ]);
+  }, [conversation, conversationRepository, shouldPullMessages, onLoadingMessages]);
 
   const loadFollowingMessages = useCallback(async () => {
     const lastMessage = conversation.getNewestMessage();
@@ -92,16 +74,14 @@ export const useLoadMessages = (
       // if the last loaded message is not the last of the conversation, we load the subsequent messages
       const newMessages = await conversationRepository.getSubsequentMessages(conversation, lastMessage);
 
-      if (!initialMessageId) {
-        const newIndex = itemsLength + newMessages.length;
-        virtualizer.scrollToIndex(newIndex, {align: 'end'});
-      }
+      const newIndex = itemsLength + newMessages.length;
+      virtualizer.scrollToIndex(newIndex, {align: 'end'});
     } catch (error) {
       console.error('Error loading following messages:', error);
     } finally {
       onLoadingMessages(false);
     }
-  }, [itemsLength, conversation, conversationRepository, onLoadingMessages, initialMessageId]);
+  }, [itemsLength, conversation, conversationRepository, onLoadingMessages]);
 
   // This function ensures that after user scroll to top or bottom content,
   // the preceding / following messages will be loaded.