From 3390d94c816fd44a49f9322c5494a603e5b3fdd7 Mon Sep 17 00:00:00 2001
From: Marco Minerva <marco.minerva@gmail.com>
Date: Tue, 28 Jul 2026 15:18:33 +0200
Subject: [PATCH] Replace progress bar with animated typing indicator

Replaced the chat progress bar in Ask.razor with a modern animated "typing indicator" using three bouncing dots. Updated Ask.razor.css to remove old progress bar styles and add new keyframes and accessibility improvements for the typing dots. This enhances user experience by clearly signaling when the assistant is responding.
---
 .../Components/Pages/Ask.razor                |  8 +--
 .../Components/Pages/Ask.razor.css            | 63 ++++++++++++-------
 2 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
index 5005400..c581879 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor
@@ -46,10 +46,10 @@
                             @if (message.Text is null)
                             {
                                 <div class="card card-text d-inline-block p-3 px-3 m-1">
-                                    <div class="progress-chat" role="progressbar" aria-label="I'm thinking" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
-                                        <div class="progress-bar-chat">
-                                            <div class="progress-bar-indeterminate"></div>
-                                        </div>
+                                    <div class="typing-indicator" role="status" aria-label="The assistant is typing">
+                                        <span class="typing-dot"></span>
+                                        <span class="typing-dot"></span>
+                                        <span class="typing-dot"></span>
                                     </div>
                                 </div>
                             }
diff --git a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
index a1d796d..4ea9bdb 100644
--- a/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
+++ b/SqlDatabaseVectorSearch/Components/Pages/Ask.razor.css
@@ -43,40 +43,55 @@ input[type="checkbox"] + label {
     border-radius: 8px;
 }
 
-.progress-chat {
-    width: 200px;
-    height: 6px;
+.typing-indicator {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    height: 8px;
 }
 
-.progress-bar-chat {
-    height: 6px;
-    background-color: rgba(5, 114, 206, 0.15);
-    width: 100%;
-    overflow: hidden;
-    border-radius: 999px;
+.typing-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgb(5, 114, 206);
+    animation: typing-bounce 1.2s infinite ease-in-out both;
 }
 
-.progress-bar-indeterminate {
-    width: 40%;
-    height: 100%;
-    border-radius: 999px;
-    background: linear-gradient(90deg, rgba(5, 114, 206, 0) 0%, rgb(5, 114, 206) 50%, rgba(5, 114, 206, 0) 100%);
-    animation: indeterminate-animation 1.4s infinite cubic-bezier(0.65, 0, 0.35, 1);
-}
-
-@keyframes indeterminate-animation {
-    0% {
-        transform: translateX(-100%);
+    .typing-dot:nth-child(1) {
+        animation-delay: -0.24s;
     }
 
-    100% {
-        transform: translateX(350%);
+    .typing-dot:nth-child(2) {
+        animation-delay: -0.12s;
+    }
+
+@keyframes typing-bounce {
+    0%, 80%, 100% {
+        transform: translateY(0);
+        opacity: .4;
+    }
+
+    40% {
+        transform: translateY(-5px);
+        opacity: 1;
     }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .progress-bar-indeterminate {
-        animation-duration: 3s;
+    .typing-dot {
+        animation-name: typing-fade;
+        animation-duration: 2s;
+    }
+
+    @keyframes typing-fade {
+        0%, 80%, 100% {
+            opacity: .4;
+        }
+
+        40% {
+            opacity: 1;
+        }
     }
 }