improve chat load

src/components/Chat/ChatDirect.tsx

@@ -376,6 +376,7 @@ const clearEditorContent = () => {
 
   const onReply = useCallback((message)=> {
     setReplyMessage(message)
+    editorRef?.current?.chain().focus()
   }, [])
 
     

src/components/Chat/ChatList.tsx

@@ -1,10 +1,25 @@
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import React, {
-import { useVirtualizer } from '@tanstack/react-virtual';
+  useCallback,
-import { MessageItem } from './MessageItem';
+  useState,
-import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+  useEffect,
-import { useInView } from 'react-intersection-observer'
+  useRef,
+  useMemo,
+} from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { MessageItem } from "./MessageItem";
+import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
+import { useInView } from "react-intersection-observer";
 
-export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onReply, handleReaction, chatReferences, tempChatReferences }) => {
+export const ChatList = ({
+  initialMessages,
+  myAddress,
+  tempMessages,
+  chatId,
+  onReply,
+  handleReaction,
+  chatReferences,
+  tempChatReferences,
+}) => {
   const parentRef = useRef();
   const [messages, setMessages] = useState(initialMessages);
   const [showScrollButton, setShowScrollButton] = useState(false);
@@ -30,9 +45,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
       }
     });
 
-    const uniqueInitialMessages = Array.from(uniqueInitialMessagesMap.values()).sort(
+    const uniqueInitialMessages = Array.from(
-      (a, b) => a.timestamp - b.timestamp
+      uniqueInitialMessagesMap.values()
-    );
+    ).sort((a, b) => a.timestamp - b.timestamp);
     const totalMessages = [...uniqueInitialMessages, ...(tempMessages || [])];
 
     if (totalMessages.length === 0) return;
@@ -40,7 +55,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
     setMessages(totalMessages);
 
     setTimeout(() => {
-      const hasUnreadMessages = totalMessages.some((msg) => msg.unread && !msg?.chatReference);
+      const hasUnreadMessages = totalMessages.some(
+        (msg) => msg.unread && !msg?.chatReference
+      );
       if (parentRef.current) {
         const { scrollTop, scrollHeight, clientHeight } = parentRef.current;
         const atBottom = scrollTop + clientHeight >= scrollHeight - 10; // Adjust threshold as needed
@@ -60,12 +77,11 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
   const scrollToBottom = (initialMsgs) => {
     const index = initialMsgs ? initialMsgs.length - 1 : messages.length - 1;
     if (rowVirtualizer) {
-      rowVirtualizer.scrollToIndex(index, { align: 'end' });
+      rowVirtualizer.scrollToIndex(index, { align: "end" });
     }
-    handleMessageSeen()
+    handleMessageSeen();
   };
 
-
   const handleMessageSeen = useCallback(() => {
     setMessages((prevMessages) =>
       prevMessages.map((msg) => ({
@@ -73,7 +89,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
         unread: false,
       }))
     );
-    setShowScrollButton(false)
+    setShowScrollButton(false);
   }, []);
 
   // const scrollToBottom = (initialMsgs) => {
@@ -83,24 +99,22 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
   //   }
   // };
 
-
   const sentNewMessageGroupFunc = useCallback(() => {
     scrollToBottom();
   }, [messages]);
 
   useEffect(() => {
-    subscribeToEvent('sent-new-message-group', sentNewMessageGroupFunc);
+    subscribeToEvent("sent-new-message-group", sentNewMessageGroupFunc);
     return () => {
-      unsubscribeFromEvent('sent-new-message-group', sentNewMessageGroupFunc);
+      unsubscribeFromEvent("sent-new-message-group", sentNewMessageGroupFunc);
     };
   }, [sentNewMessageGroupFunc]);
 
   const lastSignature = useMemo(() => {
-    if(!messages || messages?.length === 0) return null
+    if (!messages || messages?.length === 0) return null;
-    const lastIndex = messages.length - 1
+    const lastIndex = messages.length - 1;
-    return messages[lastIndex]?.signature
+    return messages[lastIndex]?.signature;
-  }, [messages])
+  }, [messages]);
-
 
   // Initialize the virtualizer
   const rowVirtualizer = useVirtualizer({
@@ -108,36 +122,53 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
     getScrollElement: () => parentRef.current,
     estimateSize: () => 80, // Provide an estimated height of items, adjust this as needed
     overscan: 10, // Number of items to render outside the visible area to improve smoothness
-    measureElement:
+    getItemKey: React.useCallback(
-    typeof window !== 'undefined' &&
+      (index) => messages[index].signature,
-    navigator.userAgent.indexOf('Firefox') === -1
+      [messages]
-      ? element => {
+    ),
-        return element?.getBoundingClientRect().height
-      }
-      : undefined,
   });
 
   return (
-<div style={{
-  height: '100%',
-  position: 'relative'
-}}>
-    <div ref={parentRef} style={{ height: '100%', overflow: 'auto', position: 'relative', display: 'flex' }}>
     <div
       style={{
-          width: '100%',
+        height: "100%",
-          position: 'relative',
+        position: "relative",
-          display: 'flex',
+        display: "flex",
-          flexDirection: 'column',
+        flexDirection: "column",
-          alignItems: 'center', // Center items horizontally
+      }}
-          gap: '10px', // Add gap between items
+    >
-          flexGrow: 1
+      <div
+        ref={parentRef}
+        className="List"
+        style={{
+          flexGrow: 1,
+          overflow: "auto",
+          position: "relative",
+          display: "flex",
+          height: "0px",
+        }}
+      >
+        <div
+          style={{
+            height: rowVirtualizer.getTotalSize(),
+            width: "100%",
+          }}
+        >
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              // transform: `translateY(${rowVirtualizer.getVirtualItems()[0]?.start ?? 0}px)`,
             }}
           >
             {rowVirtualizer.getVirtualItems().map((virtualRow) => {
               const index = virtualRow.index;
               let message = messages[index];
-          let replyIndex = messages.findIndex((msg) => msg?.signature === message?.repliedTo);
+              let replyIndex = messages.findIndex(
+                (msg) => msg?.signature === message?.repliedTo
+              );
               let reply;
               let reactions = null;
 
@@ -146,7 +177,9 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
               }
 
               if (message?.message && message?.groupDirectId) {
-            replyIndex = messages.findIndex((msg) => msg?.signature === message?.message?.repliedTo);
+                replyIndex = messages.findIndex(
+                  (msg) => msg?.signature === message?.message?.repliedTo
+                );
                 if (message?.message?.repliedTo && replyIndex !== -1) {
                   reply = messages[replyIndex];
                 }
@@ -154,7 +187,7 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
                   ...(message?.message || {}),
                   isTemp: true,
                   unread: false,
-              status: message?.status
+                  status: message?.status,
                 };
               }
 
@@ -165,25 +198,30 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
               }
 
               let isUpdating = false;
-          if (tempChatReferences && tempChatReferences?.find((item) => item?.chatReference === message?.signature)) {
+              if (
+                tempChatReferences &&
+                tempChatReferences?.find(
+                  (item) => item?.chatReference === message?.signature
+                )
+              ) {
                 isUpdating = true;
               }
 
               return (
                 <div
                   data-index={virtualRow.index} //needed for dynamic row height measurement
-            ref={node => rowVirtualizer.measureElement(node)} //measure dynamic row height
+                  ref={(node) => rowVirtualizer.measureElement(node)} //measure dynamic row height
                   key={message.signature}
                   style={{
-                position: 'absolute',
+                    position: "absolute",
                     top: 0,
-                left: '50%', // Move to the center horizontally
+                    left: "50%", // Move to the center horizontally
                     transform: `translateY(${virtualRow.start}px) translateX(-50%)`, // Adjust for centering
-                width: '100%', // Control width (90% of the parent)
+                    width: "100%", // Control width (90% of the parent)
-                padding: '10px 0',
+                    padding: "10px 0",
-                display: 'flex',
+                    display: "flex",
-                justifyContent: 'center',
+                    justifyContent: "center",
-                overscrollBehavior: 'none',
+                    overscrollBehavior: "none",
                   }}
                 >
                   <MessageItem
@@ -205,21 +243,20 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
               );
             })}
           </div>
-
+        </div>
-      
       </div>
       {showScrollButton && (
         <button
           onClick={() => scrollToBottom()}
           style={{
-          position: 'absolute',
+            position: "absolute",
             bottom: 20,
             right: 20,
-          backgroundColor: '#ff5a5f',
+            backgroundColor: "#ff5a5f",
-          color: 'white',
+            color: "white",
-          padding: '10px 20px',
+            padding: "10px 20px",
-          borderRadius: '20px',
+            borderRadius: "20px",
-          cursor: 'pointer',
+            cursor: "pointer",
             zIndex: 10,
           }}
         >
@@ -227,6 +264,5 @@ export const ChatList = ({ initialMessages, myAddress, tempMessages, chatId, onR
         </button>
       )}
     </div>
- 
   );
 };