From 385fb3ab0cb2527f5dbe16b7903e3dbd6df11a67 Mon Sep 17 00:00:00 2001
From: Long Huynh <longhuynh.y2k@gmail.com>
Date: Mon, 5 Feb 2024 11:40:39 -0500
Subject: [PATCH] refactor: loading animation style

---
 src/components/FetchModel.ts      |  2 +-
 src/components/chat/BotMessage.ts | 34 ++++---------------------
 styles.css                        | 42 ++++++++++++++++++++++++++++++-
 3 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/components/FetchModel.ts b/src/components/FetchModel.ts
index c767662..24d5327 100644
--- a/src/components/FetchModel.ts
+++ b/src/components/FetchModel.ts
@@ -255,7 +255,7 @@ export async function ollamaFetchData(settings: BMOSettings, index: number) {
 
             const messageBlock = targetBotMessage?.querySelector('.messageBlock');
             const loadingEl = targetBotMessage?.querySelector("#loading");
-        
+            
             if (messageBlock) {
                 if (loadingEl) {
                     targetBotMessage?.removeChild(loadingEl);
diff --git a/src/components/chat/BotMessage.ts b/src/components/chat/BotMessage.ts
index 812105a..d5f5cb3 100644
--- a/src/components/chat/BotMessage.ts
+++ b/src/components/chat/BotMessage.ts
@@ -6,8 +6,6 @@ import { marked } from "marked";
 import { prismHighlighting } from "../PrismaHighlighting";
 import { addParagraphBreaks } from "./Message";
 
-let loadingAnimationIntervalId: string | number | NodeJS.Timeout | undefined;
-
 export function displayBotMessage(settings: BMOSettings, messageHistory: { role: string; content: string }[], message: string) {
     const botMessageDiv = document.createElement("div");
     botMessageDiv.className = "botMessage";
@@ -87,8 +85,11 @@ export function displayLoadingBotMessage(settings: BMOSettings) {
 
     const loadingEl = document.createElement("span");
     loadingEl.setAttribute("id", "loading"); 
-    loadingEl.style.display = "inline-block"; 
-    loadingEl.textContent = "...";  
+    for (let i = 0; i < 3; i++) {
+        const dotSpan = document.createElement("span");
+        dotSpan.textContent = ".";
+        loadingEl.appendChild(dotSpan);
+    }
 
     botMessageToolBarDiv.appendChild(botNameSpan);
     botMessageDiv.appendChild(botMessageToolBarDiv);
@@ -97,30 +98,5 @@ export function displayLoadingBotMessage(settings: BMOSettings) {
     // Dispaly loading animation
     botMessageDiv.appendChild(loadingEl);
 
-    // Function to update the loading animation
-    const updateLoadingAnimation = () => {
-        const loadingEl = document.querySelector('#loading');
-        if (!loadingEl) {
-            return;
-        }
-        loadingEl.textContent += ".";
-        // Reset to one dot if the animation has reached three dots
-        if (loadingEl.textContent && loadingEl.textContent.length > 3) {
-            loadingEl.textContent = ".";
-        }
-    };
-
-    // Function to start or restart the loading animation
-    const loadingElementAnimation = () => {
-        // Clear any existing interval to prevent speeding up
-        if (loadingAnimationIntervalId !== undefined) {
-            clearInterval(loadingAnimationIntervalId);
-        }
-        // Set a new interval and store its ID
-        loadingAnimationIntervalId = setInterval(updateLoadingAnimation, 500);
-    };
-
-    loadingElementAnimation();
-
     return botMessageDiv;
 }
\ No newline at end of file
diff --git a/styles.css b/styles.css
index a3b1c2f..021e6d7 100644
--- a/styles.css
+++ b/styles.css
@@ -340,7 +340,7 @@ button.regenerate-button {
 
 #loading {
 	color: white;
-	background-color: gray;
+	background-color: #808080;
 	padding: 0px 5px 12px 5px;
 	border-radius: 5px;
 	display: none;
@@ -348,6 +348,46 @@ button.regenerate-button {
 	font-size: 25px;
 	font-weight: bolder;
 	margin: 5px 0px;
+	display: inline-block;
+	overflow: hidden;
+	white-space: nowrap;
+}
+
+.theme-light #loading {
+	color: white;
+	background-color: #b0b0b0;
+}
+
+@keyframes blink {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	49.9% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0;
+	}
+	50.1% {
+		opacity: 0;
+	}
+}
+
+#loading span {
+	animation: blink 1.3s infinite both;
+}
+
+#loading span:nth-child(1) {
+	animation-delay: 0s;
+}
+
+#loading span:nth-child(2) {
+	animation-delay: 0.2s;
+}
+
+#loading span:nth-child(3) {
+	animation-delay: 0.4s;
 }
 
 .dotIndicator {