Merge pull request #10 from ayobro1/copilot/fix-chat-loading-animation

NolanCotter · web-flow · commit a2402cee3316 · 2026-02-28T20:46:16.000-05:00
Defer loading spinner to eliminate flash on chat open
diff --git a/src/components/MessageArea.tsx b/src/components/MessageArea.tsx
@@ -214,9 +214,11 @@ export default function MessageArea({
   useEffect(() => {
     if (!channelId) return;
 
-    setIsLoading(true);
     setReplyTo(null); // Clear reply when switching channels
 
+    // Only show loading spinner if fetch takes longer than 300ms to avoid flash
+    const loadingTimer = setTimeout(() => setIsLoading(true), 300);
+
     const fetchMessages = async () => {
       try {
         const res = await fetch(`/api/messages?channelId=${channelId}`);
@@ -234,6 +236,7 @@ export default function MessageArea({
         console.error("Failed to fetch messages:", error);
         setMessages([]);
       } finally {
+        clearTimeout(loadingTimer);
         setIsLoading(false);
       }
     };
@@ -284,6 +287,7 @@ export default function MessageArea({
     };
 
     return () => {
+      clearTimeout(loadingTimer);
       eventSource.close();
       setTypingUsers(new Map());
     };
