From 52ebf9683b472f17cd1c69ff1e213862cf3eb829 Mon Sep 17 00:00:00 2001
From: spencrmartin <spencermartin@squareup.com>
Date: Wed, 12 Nov 2025 12:00:28 -0500
Subject: [PATCH] Move LoadingGoose indicator inline with conversation flow

- Removed fixed positioning (absolute bottom-1 left-4) for LoadingGoose
- Added inline LoadingGoose below messages within ScrollArea for conversation flow
- LoadingGoose now appears below the most recent message instead of as overlay
- Separated loading states: chatState/compacting inline, loadingChat separate
- Added proper padding (px-6 py-2) to match message spacing
- LoadingGoose scrolls naturally with conversation content
- Creates more integrated, conversational loading experience
---
 ui/desktop/src/components/BaseChat.tsx | 40 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx
index 1289486f88..1b48a04277 100644
--- a/ui/desktop/src/components/BaseChat.tsx
+++ b/ui/desktop/src/components/BaseChat.tsx
@@ -494,6 +494,20 @@ function BaseChatContent({
                     </>
                   )}
 
+                  {/* Inline loading indicator below messages */}
+                  {(chatState !== ChatState.Idle || isCompacting) && (
+                    <div className="px-6 py-2">
+                      <LoadingGoose
+                        message={
+                          isCompacting
+                            ? 'goose is compacting the conversation...'
+                            : undefined
+                        }
+                        chatState={chatState}
+                      />
+                    </div>
+                  )}
+
                   <div className="block h-8" />
                 </>
               ) : !recipeConfig && showPopularTopics ? (
@@ -502,25 +516,19 @@ function BaseChatContent({
               ) : null /* Show nothing when messages.length === 0 && suppressEmptyState === true */
             }
 
+            {/* Loading indicator for initial chat loading */}
+            {loadingChat && (
+              <div className="px-6 py-4">
+                <LoadingGoose
+                  message="loading conversation..."
+                  chatState={ChatState.Idle}
+                />
+              </div>
+            )}
+
             {/* Custom content after messages */}
             {renderAfterMessages && renderAfterMessages()}
           </ScrollArea>
-
-          {/* Fixed loading indicator at bottom left of chat container */}
-          {(chatState !== ChatState.Idle || loadingChat || isCompacting) && (
-            <div className="absolute bottom-1 left-4 z-20 pointer-events-none">
-              <LoadingGoose
-                message={
-                  loadingChat
-                    ? 'loading conversation...'
-                    : isCompacting
-                      ? 'goose is compacting the conversation...'
-                      : undefined
-                }
-                chatState={chatState}
-              />
-            </div>
-          )}
         </div>
 
         <div