refactor: loading animation style

longy2k · Feb 5, 2024 · 385fb3a · 385fb3a
1 parent 020bf98
commit 385fb3a
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 31 deletions.
diff --git 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
@@ -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;
 }
diff --git a/styles.css b/styles.css
@@ -340,14 +340,54 @@ button.regenerate-button {
 
 #loading {
 	color: white;
-	background-color: gray;
+	background-color: #808080;
 	padding: 0px 5px 12px 5px;
 	border-radius: 5px;
 	display: none;
 	line-height: 10px;
 	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 {