From 5edeb3becda38f2c564b7320fa54278247c6e109 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 11 Oct 2026 13:43:53 -0700
Subject: [PATCH] Better loading indicator

---
 src-ui/src/app/components/chat/chat/chat.component.html    | 7 ++++++-
 src-ui/src/app/components/chat/chat/chat.component.spec.ts | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/chat/chat/chat.component.html b/src-ui/src/app/components/chat/chat/chat.component.html
index e8c5f4022..9432c4af8 100644
--- a/src-ui/src/app/components/chat/chat/chat.component.html
+++ b/src-ui/src/app/components/chat/chat/chat.component.html
@@ -9,7 +9,12 @@
         @for (message of messages(); track message) {
           <div class="message d-flex flex-row small" [class.justify-content-end]="message.role === 'user'">
             <div class="p-2 m-2" [class.bg-body]="message.role === 'user'">
-              @if (message.role === 'assistant') {
+              @if (message.isStreaming && !message.content) {
+                <div class="d-flex align-items-center text-muted">
+                  <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                  <ng-container i18n>Thinking...</ng-container>
+                </div>
+              } @else if (message.role === 'assistant') {
                 <div class="chat-markdown text-break text-wrap" [innerHTML]="message.content | markdown"></div>
                 @if (message.isStreaming) { <span class="blinking-cursor">|</span> }
               } @else {
diff --git a/src-ui/src/app/components/chat/chat/chat.component.spec.ts b/src-ui/src/app/components/chat/chat/chat.component.spec.ts
index 67d8459ac..a9b76011e 100644
--- a/src-ui/src/app/components/chat/chat/chat.component.spec.ts
+++ b/src-ui/src/app/components/chat/chat/chat.component.spec.ts
@@ -80,8 +80,15 @@ describe('ChatComponent', () => {
     expect(component.messages()[0].content).toBe('Hello')
     expect(component.loading()).toBe(true)
 
+    fixture.detectChanges()
+    const messagesEl = fixture.nativeElement.querySelector('.chat-messages')
+    expect(messagesEl.querySelector('.spinner-border')).not.toBeNull()
+    expect(messagesEl.textContent).toContain('Thinking...')
+
     mockStream$.next('Hi')
     expect(component.messages()[1].content).toBe('H')
+    fixture.detectChanges()
+    expect(messagesEl.querySelector('.spinner-border')).toBeNull()
     mockStream$.next('Hi there')
     // advance time to process the typewriter effect
     await jest.runAllTimersAsync()