feat: show loader before ai response stream

Author: bajrangCoder

src/pages/aiAssistant/assistant.js

@@ -77,7 +77,7 @@ export default function openAIAssistantPage() {
 
 	const showLoading = () => {
 		const loadingEl = tag("div", {
-			className: "loading",
+			className: "ai_loading",
 			id: "loading-indicator",
 		});
 		const loadingDots = tag("div", {
@@ -91,14 +91,14 @@ export default function openAIAssistantPage() {
 			loadingDots.appendChild(dot);
 		}
 
-		const text = tag("div", {
+		const text = tag("span", {
 			textContent: "AI is thinking...",
 		});
 
 		loadingEl.appendChild(loadingDots);
 		loadingEl.appendChild(text);
 
-		messageContainerRef.append(loadingEl);
+		messageContainerRef.el.appendChild(loadingEl);
 		scrollToBottom();
 	};
 
@@ -175,7 +175,7 @@ export default function openAIAssistantPage() {
 
 		messageEl.appendChild(messageHeader);
 		messageEl.appendChild(messageContent);
-		messageContainerRef.append(messageEl);
+		messageContainerRef.el.appendChild(messageEl);
 		scrollToBottom();
 	};
 
@@ -211,15 +211,8 @@ export default function openAIAssistantPage() {
 		chatInputRef.value = "";
 		chatInputRef.style.height = "auto";
 
-		// Add assistant message placeholder to UI
-		const assistantMsgId = generateMessageId();
-		const assistantMessage = {
-			id: assistantMsgId,
-			role: "assistant",
-			content: "",
-			timestamp: Date.now(),
-		};
-		addMessage(assistantMessage);
+		// Show loading indicator
+		showLoading();
 
 		// Prepare inputs for agent
 		let inputs = { messages: [...chatHistory] };
@@ -228,17 +221,31 @@ export default function openAIAssistantPage() {
 		sendBtnRef.el.style.display = "none";
 		stopBtnRef.el.style.display = "block";
 
-		try {
-			const messageEl = messageContainerRef.el.querySelector(
-				`#message-${assistantMsgId} .message-content`,
-			);
-			let streamedContent = "";
+		const assistantMsgId = generateMessageId();
 
+		try {
 			const stream = await agent.stream(inputs, {
 				streamMode: "messages",
 				signal: currentController.signal,
 			});
 
+			// Remove loading indicator
+			removeLoading();
+
+			// Add assistant message placeholder
+			const assistantMessage = {
+				id: assistantMsgId,
+				role: "assistant",
+				content: "",
+				timestamp: Date.now(),
+			};
+			addMessage(assistantMessage);
+
+			const messageEl = messageContainerRef.el.querySelector(
+				`#message-${assistantMsgId} .message-content`,
+			);
+			let streamedContent = "";
+
 			for await (const [message, _metadata] of stream) {
 				if (isAIMessageChunk(message) && message.tool_call_chunks?.length) {
 					streamedContent += message.tool_call_chunks[0].args;
@@ -262,6 +269,7 @@ export default function openAIAssistantPage() {
 				timeEl.textContent = formatTime(Date.now());
 			}
 		} catch (err) {
+			removeLoading();
 			if (/abort/i.test(err.message)) {
 				const messageEl = messageContainerRef.el.querySelector(
 					`#message-${assistantMsgId} .message-content`,

src/pages/aiAssistant/assistant.module.scss

@@ -780,11 +780,13 @@
   }
 
   /* Loading indicator */
-  .loading {
+  .ai_loading {
     display: flex;
     align-items: center;
+    justify-content: flex-start;
     gap: 0.75rem;
     padding: 1rem 1.5rem;
+    min-height: auto;
     color: var(--secondary-text-color);
     font-size: 0.875rem;
     border-bottom: 1px solid var(--border-color);
@@ -805,18 +807,18 @@
   }
 
   .loading-dot:nth-child(1) {
-    animation: pulse 1.5s infinite;
+    animation: bounce_dot_loading 1.5s infinite;
   }
 
   .loading-dot:nth-child(2) {
-    animation: pulse 1.5s infinite 0.3s;
+    animation: bounce_dot_loading 1.5s infinite 0.3s;
   }
 
   .loading-dot:nth-child(3) {
-    animation: pulse 1.5s infinite 0.6s;
+    animation: bounce_dot_loading 1.5s infinite 0.6s;
   }
 
-  @keyframes pulse {
+  @keyframes bounce_dot_loading {
     0%,
     100% {
       opacity: 0.4;