From 6b08e0d1a71c957328d6cb87d47913af571ea4fb Mon Sep 17 00:00:00 2001
From: 777genius <quantjumppro@gmail.com>
Date: Sun, 31 May 2026 00:48:26 +0300
Subject: [PATCH] perf(renderer): batch visible message read updates

---
 .../team/messages/MessagesPanel.tsx           | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/renderer/components/team/messages/MessagesPanel.tsx b/src/renderer/components/team/messages/MessagesPanel.tsx
index 85b38de7..97e8e49a 100644
--- a/src/renderer/components/team/messages/MessagesPanel.tsx
+++ b/src/renderer/components/team/messages/MessagesPanel.tsx
@@ -682,19 +682,43 @@ export const MessagesPanel = memo(function MessagesPanel({
     if (!open) setExpandedItemKey(null);
   }, []);
 
-  const { readSet, markRead, markAllRead } = useTeamMessagesRead(teamName);
+  const { readSet, markAllRead } = useTeamMessagesRead(teamName);
   const { expandedSet, toggle: toggleExpandOverride } = useTeamMessagesExpanded(teamName);
+  const pendingVisibleReadKeysRef = useRef<Set<string>>(new Set());
+  const visibleReadFlushFrameRef = useRef<number | null>(null);
 
   const messagesUnreadCount = useMemo(
     () => filteredMessages.filter((m) => !m.read && !readSet.has(toMessageKey(m))).length,
     [filteredMessages, readSet]
   );
 
+  const flushVisibleReadKeys = useCallback(() => {
+    visibleReadFlushFrameRef.current = null;
+    const keys = [...pendingVisibleReadKeysRef.current];
+    pendingVisibleReadKeysRef.current.clear();
+    markAllRead(keys);
+  }, [markAllRead]);
+
   const handleMessageVisible = useCallback(
-    (message: InboxMessage) => markRead(toMessageKey(message)),
-    [markRead]
+    (message: InboxMessage) => {
+      pendingVisibleReadKeysRef.current.add(toMessageKey(message));
+      if (visibleReadFlushFrameRef.current !== null) return;
+      visibleReadFlushFrameRef.current = window.requestAnimationFrame(flushVisibleReadKeys);
+    },
+    [flushVisibleReadKeys]
   );
 
+  useEffect(() => {
+    const pendingVisibleReadKeys = pendingVisibleReadKeysRef.current;
+    return () => {
+      if (visibleReadFlushFrameRef.current !== null) {
+        window.cancelAnimationFrame(visibleReadFlushFrameRef.current);
+        visibleReadFlushFrameRef.current = null;
+      }
+      pendingVisibleReadKeys.clear();
+    };
+  }, [teamName]);
+
   const readState = useMemo(() => ({ readSet, getMessageKey: toMessageKey }), [readSet]);
 
   const { teamNames, teamColorByName } = useStableTeamMentionMeta(teams);
@@ -745,10 +769,7 @@ export const MessagesPanel = memo(function MessagesPanel({
     };
   }, [
     refreshSendMessageRuntimeDeliveryStatus,
-    sendMessageDebugDetails?.messageId,
-    sendMessageDebugDetails?.statusMessageId,
-    sendMessageDebugDetails?.responsePending,
-    sendMessageDebugDetails?.userVisibleState,
+    sendMessageDebugDetails,
     sendMessageRuntimeReplyVisible,
     teamName,
   ]);