loading animation

frontend/src/conversation/Conversation.tsx

@@ -89,7 +89,7 @@ export default function Conversation() {
         .map((a) => ({ id: a.id as string, fileName: a.fileName }));
 
       if (index !== undefined) {
-        if (!isRetry) dispatch(resendQuery({ index, prompt: trimmedQuestion }));
+        dispatch(resendQuery({ index, prompt: trimmedQuestion }));
         handleFetchAnswer({ question: trimmedQuestion, index });
       } else {
         if (!isRetry)

frontend/src/conversation/ConversationMessages.tsx

@@ -9,6 +9,7 @@ import {
 import { useTranslation } from 'react-i18next';
 
 import ArrowDown from '../assets/arrow-down.svg';
+import DocsGPT3 from '../assets/cute_docsgpt3.svg';
 import RetryIcon from '../components/RetryIcon';
 import Hero from '../Hero';
 import { useDarkTheme } from '../hooks';
@@ -191,6 +192,37 @@ export default function ConversationMessages({
         />
       );
     }
+
+    if (status === 'loading' && isLastMessage) {
+      return (
+        <div
+          className={`fade-in-bubble flex flex-wrap self-start ${bubbleMargin} group dark:text-bright-gray flex-col`}
+        >
+          <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
+            <div className="my-2 flex flex-row items-center justify-center gap-3">
+              <div className="flex h-[34px] w-[34px] items-center justify-center overflow-hidden rounded-full">
+                <img
+                  src={DocsGPT3}
+                  alt={t('conversation.answer')}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+              <p className="text-base font-semibold">
+                {t('conversation.answer')}
+              </p>
+            </div>
+            <div className="bg-gray-1000 dark:bg-gun-metal mr-5 flex rounded-3xl px-6 py-5">
+              <div className="thinking-dots">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
     return null;
   };
 

frontend/src/index.css

@@ -776,6 +776,47 @@ Avoid over-scrolling in mobile browsers
     animation: fadeInUp 0.5s forwards;
   }
 
+  .thinking-dots {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .thinking-dots span {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #7d54d1;
+    animation: thinkingBounce 1.4s infinite ease-in-out both;
+  }
+
+  .dark .thinking-dots span {
+    background-color: #976af3;
+  }
+
+  .thinking-dots span:nth-child(1) {
+    animation-delay: -0.32s;
+  }
+
+  .thinking-dots span:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+
+  .thinking-dots span:nth-child(3) {
+    animation-delay: 0s;
+  }
+
+  @keyframes thinkingBounce {
+    0%, 80%, 100% {
+      transform: scale(0.6);
+      opacity: 0.4;
+    }
+    40% {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
   @keyframes fadeInUp {
     to {
       opacity: 1;