From 7e6bd5648887d7317e965beab873dcea15a0964b Mon Sep 17 00:00:00 2001
From: busya <uglypod@gmail.com>
Date: Tue, 24 Feb 2026 14:15:35 +0300
Subject: [PATCH] feat(assistant-chat): add animated thinking loader while
 waiting for response

---
 .../assistant/AssistantChatPanel.svelte       | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
index 2c6c380..6d6b79e 100644
--- a/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
+++ b/frontend/src/lib/components/assistant/AssistantChatPanel.svelte
@@ -539,6 +539,24 @@
             </div>
           </div>
         {/each}
+
+        {#if loading}
+          <div class="mr-8">
+            <div class="rounded-xl border border-slate-200 bg-white p-3">
+              <div class="mb-1 flex items-center justify-between gap-2">
+                <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+                  Assistant
+                </span>
+              </div>
+              <div class="flex items-center gap-2 text-sm text-slate-700">
+                <span>{$t.assistant?.thinking || 'Думаю'}</span>
+                <span class="thinking-dots" aria-hidden="true">
+                  <span></span><span></span><span></span>
+                </span>
+              </div>
+            </div>
+          </div>
+        {/if}
       </div>
 
       <div class="border-t border-slate-200 p-3">
@@ -562,4 +580,42 @@
     </div>
   </aside>
 {/if}
+
+<style>
+  .thinking-dots {
+    display: inline-flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+
+  .thinking-dots span {
+    width: 0.35rem;
+    height: 0.35rem;
+    border-radius: 9999px;
+    background: #0ea5e9;
+    opacity: 0.35;
+    animation: assistant-thinking-bounce 0.9s infinite ease-in-out;
+  }
+
+  .thinking-dots span:nth-child(2) {
+    animation-delay: 0.12s;
+  }
+
+  .thinking-dots span:nth-child(3) {
+    animation-delay: 0.24s;
+  }
+
+  @keyframes assistant-thinking-bounce {
+    0%,
+    80%,
+    100% {
+      transform: translateY(0);
+      opacity: 0.35;
+    }
+    40% {
+      transform: translateY(-0.2rem);
+      opacity: 1;
+    }
+  }
+</style>
 <!-- [/DEF:AssistantChatPanel:Component] -->