Improve mobile perfomance

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -206,10 +206,15 @@ export default function ChatComponent({
     chatChannelId: chatChannel?.id || "",
     participants: chatChannel?.participants,
   });
-  const users = chatChannel ? chatUsers : discussionUsers;
-  const discussionMessages = chatChannel
-    ? chatMessagesData.data
-    : discussionMessagesData.data || [];
+  const users = useMemo(
+    () => (chatChannel ? chatUsers : discussionUsers),
+    [chatUsers, discussionUsers, chatChannel],
+  );
+  const discussionMessages = useMemo(
+    () =>
+      chatChannel ? chatMessagesData.data : discussionMessagesData.data || [],
+    [chatChannel, chatMessagesData.data, discussionMessagesData.data],
+  );
   const isFetchedDiscussionMessages =
     discussionMessagesData.fetched || chatMessagesData.fetched;
   const areInitialMessagesLoading = isChatChannel

src/pages/common/components/DiscussionFeedCard/DiscussionFeedCard.tsx

@@ -349,6 +349,30 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
       }
     }, [item.data.lastMessage?.content]);
 
+    const lastMessage = useMemo(() => {
+      return getLastMessage({
+        commonFeedType: item.data.type,
+        lastMessage: item.data.lastMessage,
+        discussion,
+        currentUserId: userId,
+        feedItemCreatorName: getUserName(discussionCreator),
+        commonName,
+        isProject,
+        hasFiles: item.data.hasFiles,
+        hasImages: item.data.hasImages,
+      });
+    }, [
+      item.data.type,
+      item.data.lastMessage,
+      discussion,
+      userId,
+      discussionCreator,
+      commonName,
+      isProject,
+      item.data.hasFiles,
+      item.data.hasImages,
+    ]);
+
     return (
       <>
         <FeedCard
@@ -361,17 +385,7 @@ const DiscussionFeedCard = forwardRef<FeedItemRef, DiscussionFeedCardProps>(
           isExpanded={isExpanded}
           onClick={handleOpenChat}
           title={cardTitle}
-          lastMessage={getLastMessage({
-            commonFeedType: item.data.type,
-            lastMessage: item.data.lastMessage,
-            discussion,
-            currentUserId: userId,
-            feedItemCreatorName: getUserName(discussionCreator),
-            commonName,
-            isProject,
-            hasFiles: item.data.hasFiles,
-            hasImages: item.data.hasImages,
-          })}
+          lastMessage={lastMessage}
           isPreviewMode={isPreviewMode}
           isPinned={isPinned}
           commonName={commonName}

src/pages/common/components/FeedCard/FeedCard.tsx

@@ -5,6 +5,8 @@ import React, {
   forwardRef,
   useImperativeHandle,
   PropsWithChildren,
+  useCallback,
+  useMemo,
 } from "react";
 import { useCollapse } from "react-collapsed";
 import classNames from "classnames";
@@ -106,11 +108,11 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
   });
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const toggleExpanding = () => {
+  const toggleExpanding = useCallback(() => {
     if (setExpandedFeedItemId) {
       setExpandedFeedItemId(isExpanded ? null : feedItemId);
     }
-  };
+  }, [setExpandedFeedItemId, isExpanded, feedItemId]);
 
   const scrollToTargetTop = (
     headerOffset: number,
@@ -140,7 +142,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
     }
   };
 
-  const scrollToTargetAdjusted = () => {
+  const scrollToTargetAdjusted = useCallback(() => {
     if (scrollTimeoutRef.current) {
       clearTimeout(scrollTimeoutRef.current);
     }
@@ -192,7 +194,7 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
         });
       }
     }, COLLAPSE_DURATION + EXTRA_WAITING_TIME_FOR_TIMEOUT);
-  };
+  }, [isTabletView]);
 
   useEffect(() => {
     if (isExpanded && containerRef?.current) {
@@ -203,63 +205,102 @@ export const FeedCard = forwardRef<FeedCardRef, FeedCardProps>((props, ref) => {
       clearTimeout(scrollTimeoutRef.current);
       scrollTimeoutRef.current = null;
     }
-  }, [isExpanded]);
+  }, [isExpanded, scrollToTargetAdjusted]);
 
-  const handleClick = () => {
+  const handleClick = useCallback(() => {
     onClick?.();
 
     if (!isTabletView && isActive) {
       toggleExpanding();
     }
-  };
+  }, [onClick, isTabletView, isActive, toggleExpanding]);
 
-  const handleExpand: MouseEventHandler = (event) => {
-    event.stopPropagation();
-    toggleExpanding();
-  };
+  const handleExpand: MouseEventHandler = useCallback(
+    (event) => {
+      event.stopPropagation();
+      toggleExpanding();
+    },
+    [toggleExpanding],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      itemId: feedItemId,
+      scrollToItem: scrollToTargetAdjusted,
+    }),
+    [feedItemId, scrollToTargetAdjusted],
+  );
 
-  useImperativeHandle(ref, () => ({
-    itemId: feedItemId,
-    scrollToItem: scrollToTargetAdjusted,
-  }));
+  const feedItemBaseContent = useMemo(() => {
+    return renderFeedItemBaseContent?.({
+      lastActivity,
+      unreadMessages,
+      isMobileView: isTabletView,
+      isActive,
+      isExpanded,
+      canBeExpanded,
+      onClick: handleClick,
+      onExpand: handleExpand,
+      title,
+      lastMessage: !isLoading ? lastMessage : undefined,
+      menuItems,
+      commonName,
+      commonId,
+      image,
+      imageAlt,
+      isProject,
+      isPinned,
+      isFollowing,
+      type,
+      seenOnce,
+      seen,
+      ownerId,
+      discussionPredefinedType,
+      hasFiles,
+      hasImages,
+      hasUnseenMention,
+      notion,
+      originalCommonIdForLinking,
+      linkedCommonIds,
+    });
+  }, [
+    lastActivity,
+    unreadMessages,
+    isTabletView,
+    isActive,
+    isExpanded,
+    canBeExpanded,
+    handleClick,
+    handleExpand,
+    title,
+    lastMessage,
+    isLoading,
+    menuItems,
+    commonName,
+    commonId,
+    image,
+    imageAlt,
+    isProject,
+    isPinned,
+    isFollowing,
+    type,
+    seenOnce,
+    seen,
+    ownerId,
+    discussionPredefinedType,
+    hasFiles,
+    hasImages,
+    hasUnseenMention,
+    notion,
+    originalCommonIdForLinking,
+    linkedCommonIds,
+    renderFeedItemBaseContent,
+  ]);
 
   return (
     <div ref={containerRef}>
-      {!isPreviewMode && (
-        <div {...getToggleProps()}>
-          {renderFeedItemBaseContent?.({
-            lastActivity,
-            unreadMessages,
-            isMobileView: isTabletView,
-            isActive,
-            isExpanded,
-            canBeExpanded,
-            onClick: handleClick,
-            onExpand: handleExpand,
-            title,
-            lastMessage: !isLoading ? lastMessage : undefined,
-            menuItems,
-            commonName,
-            commonId,
-            image,
-            imageAlt,
-            isProject,
-            isPinned,
-            isFollowing,
-            type,
-            seenOnce,
-            seen,
-            ownerId,
-            discussionPredefinedType,
-            hasFiles,
-            hasImages,
-            hasUnseenMention,
-            notion,
-            originalCommonIdForLinking,
-            linkedCommonIds,
-          })}
-        </div>
-      )}
+      {!isPreviewMode && <div {...getToggleProps()}>{feedItemBaseContent}</div>}
       <div {...getCollapseProps()}>
         <CommonCard
           className={classNames(