From 07984386212a07c1442d173271f8af25e83ea74f Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Thu, 15 May 2025 16:12:46 -0700
Subject: [PATCH] Add loading indicator for in-progress message & fix bug with
 multiple loaders (#173)

---
 src/components/chat/ChatMessage.tsx  | 19 ++++++++++++++++---
 src/components/chat/MessagesList.tsx |  6 +++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/ChatMessage.tsx b/src/components/chat/ChatMessage.tsx
index 1210f35..eab4b26 100644
--- a/src/components/chat/ChatMessage.tsx
+++ b/src/components/chat/ChatMessage.tsx
@@ -9,9 +9,10 @@ import { CheckCircle, XCircle } from "lucide-react";
 
 interface ChatMessageProps {
   message: Message;
+  isLastMessage: boolean;
 }
 
-const ChatMessage = ({ message }: ChatMessageProps) => {
+const ChatMessage = ({ message, isLastMessage }: ChatMessageProps) => {
   const { isStreaming } = useStreamChat();
   return (
     <div
@@ -26,7 +27,10 @@ const ChatMessage = ({ message }: ChatMessageProps) => {
             : "bg-(--sidebar-accent)"
         }`}
       >
-        {message.role === "assistant" && !message.content && isStreaming ? (
+        {message.role === "assistant" &&
+        !message.content &&
+        isStreaming &&
+        isLastMessage ? (
           <div className="flex h-6 items-center space-x-2 p-2">
             <motion.div
               className="h-3 w-3 rounded-full bg-(--primary) dark:bg-blue-500"
@@ -67,7 +71,16 @@ const ChatMessage = ({ message }: ChatMessageProps) => {
             suppressHydrationWarning
           >
             {message.role === "assistant" ? (
-              <DyadMarkdownParser content={message.content} />
+              <>
+                <DyadMarkdownParser content={message.content} />
+                {isLastMessage && isStreaming && (
+                  <div className="mt-4 ml-4 relative w-5 h-5 animate-spin">
+                    <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-2 h-2 bg-(--primary) dark:bg-blue-500 rounded-full"></div>
+                    <div className="absolute bottom-0 left-0 w-2 h-2 bg-(--primary) dark:bg-blue-500 rounded-full opacity-80"></div>
+                    <div className="absolute bottom-0 right-0 w-2 h-2 bg-(--primary) dark:bg-blue-500 rounded-full opacity-60"></div>
+                  </div>
+                )}
+              </>
             ) : (
               <VanillaMarkdownParser content={message.content} />
             )}
diff --git a/src/components/chat/MessagesList.tsx b/src/components/chat/MessagesList.tsx
index 10a23e5..69a5997 100644
--- a/src/components/chat/MessagesList.tsx
+++ b/src/components/chat/MessagesList.tsx
@@ -36,7 +36,11 @@ export const MessagesList = forwardRef<HTMLDivElement, MessagesListProps>(
       <div className="flex-1 overflow-y-auto p-4" ref={ref}>
         {messages.length > 0 ? (
           messages.map((message, index) => (
-            <ChatMessage key={index} message={message} />
+            <ChatMessage
+              key={index}
+              message={message}
+              isLastMessage={index === messages.length - 1}
+            />
           ))
         ) : (
           <div className="flex flex-col items-center justify-center h-full max-w-2xl mx-auto">