Update static/application.js

static/application.js

@@ -113,7 +113,7 @@ document.addEventListener("DOMContentLoaded", () => {
     createMessageBubble(question, "You", null, selectedFile.name);
 
     // Aidan is thinking...
-    const thinkingBubble = createMessageBubble("Wait, Let me think 🤔...", "Aidan");
+    const thinkingBubble = createMessageBubble("Wait, Let me think 🤔...<div class='loader'></div>", "Aidan");
 
     const formData = new FormData();
     formData.append("question", question);
@@ -129,7 +129,6 @@ document.addEventListener("DOMContentLoaded", () => {
       const answerText = result.answer || "No response.";
       const audioSrc = result.audio || null;
 
-      // Replace "Let me think..." with actual answer
       const message = thinkingBubble.querySelector(".text");
       message.innerText = answerText;
 
@@ -169,21 +168,37 @@ document.addEventListener("DOMContentLoaded", () => {
       message.innerText = "⚠️ Aidan had trouble responding.";
     }
 
-    // Clear inputs after processing is complete
+    
     input.value = "";
     selectedFile = null;
   }
-
-  // Click event for send button
   sendBtn.addEventListener("click", sendMessage);
 
-  // Enter key event for input field
+  // Enter key event for input 
   input.addEventListener("keydown", (event) => {
     if (event.key === "Enter") {
-      event.preventDefault(); // Prevent form submission
+      event.preventDefault(); 
       sendMessage();
     }
-  });
+  });  
+  const style = document.createElement('style');
+    style.textContent = `
+        .loader {
+            display: inline-block;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #3b82f6;
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    `;
+    document.head.appendChild(style);
+
     var backarrow = document.querySelector(".fa-arrow-left");
     backarrow.addEventListener('click', function () {
         window.location.href = '/';