fix: move loading messages (#2879)

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-tab-content/index.tsx

@@ -1,4 +1,5 @@
 import { type ChatMessage } from '@onlook/models';
+import { Icons } from '@onlook/ui/icons';
 import { useChat } from '../../../../_hooks/use-chat';
 import { ChatInput } from '../chat-input';
 import { ChatMessages } from '../chat-messages';
@@ -8,12 +9,14 @@ interface ChatTabContentProps {
     conversationId: string;
     projectId: string;
     initialMessages: ChatMessage[];
+    isLoadingMessages: boolean;
 }
 
 export const ChatTabContent = ({
     conversationId,
     projectId,
     initialMessages,
+    isLoadingMessages,
 }: ChatTabContentProps) => {
     const { isStreaming, sendMessage, editMessage, messages, error, stop, suggestions } = useChat({
         conversationId,
@@ -24,12 +27,17 @@ export const ChatTabContent = ({
     return (
         <div className="flex flex-col h-full justify-end gap-2 pt-2">
             <div className="h-full flex-1 overflow-y-auto">
-                <ChatMessages
+                {isLoadingMessages ? (
+                    <div className="flex-1 flex items-center justify-center w-full h-full text-foreground-secondary">
+                        <Icons.LoadingSpinner className="animate-spin mr-2" />
+                        <p>Loading messages...</p>
+                    </div>
+                ) : (<ChatMessages
                     messages={messages}
                     isStreaming={isStreaming}
                     error={error}
                     onEditMessage={editMessage}
-                />
+                />)}
             </div>
             <ErrorSection isStreaming={isStreaming} onSendMessage={sendMessage} />
             <ChatInput

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/index.tsx

@@ -1,5 +1,4 @@
 import { api } from '@/trpc/react';
-import { Icons } from '@onlook/ui/icons';
 import { ChatTabContent } from './chat-tab-content';
 
 interface ChatTabProps {
@@ -8,25 +7,19 @@ interface ChatTabProps {
 }
 
 export const ChatTab = ({ conversationId, projectId }: ChatTabProps) => {
-    const { data: initialMessages, isLoading } = api.chat.message.getAll.useQuery(
+    const { data: initialMessages = [], isLoading } = api.chat.message.getAll.useQuery(
         { conversationId: conversationId },
         { enabled: !!conversationId },
     );
 
-    if (!initialMessages || isLoading) {
-        return <div className="flex-1 flex items-center justify-center w-full h-full text-foreground-secondary">
-            <Icons.LoadingSpinner className="animate-spin mr-2" />
-            <p>Loading messages...</p>
-        </div>
-    }
-
     return (
         <ChatTabContent
             // Used to force re-render the use-chat hook when the conversationId changes
             key={conversationId}
             conversationId={conversationId}
             projectId={projectId}
             initialMessages={initialMessages}
+            isLoadingMessages={isLoading}
         />
     );
 };