Merge pull request #655 from miurla/feature/animated-loading-logo

feat: add animated loading logo with eye movement

Author: miurla

app/globals.css

@@ -232,6 +232,21 @@
       opacity: 1;
     }
   }
+  @keyframes lookAround {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(10px);
+    }
+    50% {
+      transform: translateX(0);
+    }
+    75% {
+      transform: translateX(-10px);
+    }
+  }
 }
 
 @utility container {

components/answer-section.tsx

@@ -12,7 +12,6 @@ import type {
 } from '@/lib/types/ai'
 
 import { CollapsibleMessage } from './collapsible-message'
-import { DefaultSkeleton } from './default-skeleton'
 import { MarkdownMessage } from './message'
 import { MessageActions } from './message-actions'
 
@@ -53,25 +52,6 @@ export function AnswerSection({
     return Promise.resolve(undefined)
   }
 
-  const message = content ? (
-    <div className="flex flex-col gap-1">
-      <MarkdownMessage message={content} citationMaps={citationMaps} />
-      {showActions && (
-        <MessageActions
-          message={content} // Keep original message content for copy
-          messageId={messageId}
-          traceId={metadata?.traceId}
-          feedbackScore={metadata?.feedbackScore}
-          chatId={chatId}
-          enableShare={enableShare}
-          reload={handleReload}
-          status={status}
-        />
-      )}
-    </div>
-  ) : (
-    <DefaultSkeleton />
-  )
   return (
     <CollapsibleMessage
       role="assistant"
@@ -81,7 +61,23 @@ export function AnswerSection({
       showBorder={false}
       showIcon={false}
     >
-      {message}
+      {content && (
+        <div className="flex flex-col gap-1">
+          <MarkdownMessage message={content} citationMaps={citationMaps} />
+          {showActions && (
+            <MessageActions
+              message={content} // Keep original message content for copy
+              messageId={messageId}
+              traceId={metadata?.traceId}
+              feedbackScore={metadata?.feedbackScore}
+              chatId={chatId}
+              enableShare={enableShare}
+              reload={handleReload}
+              status={status}
+            />
+          )}
+        </div>
+      )}
     </CollapsibleMessage>
   )
 }

components/chat-messages.tsx

@@ -7,6 +7,7 @@ import { UseChatHelpers } from '@ai-sdk/react'
 import type { UIDataTypes, UIMessage, UITools } from '@/lib/types/ai'
 import { cn } from '@/lib/utils'
 
+import { AnimatedLogo } from './ui/animated-logo'
 import { ChatError } from './chat-error'
 import { DefaultSkeleton } from './default-skeleton'
 import { RenderMessage } from './render-message'
@@ -69,10 +70,7 @@ export function ChatMessages({
   if (!sections.length) return null
 
   // Check if loading indicator should be shown
-  const showLoading =
-    isLoading &&
-    sections.length > 0 &&
-    sections[sections.length - 1].assistantMessages.length === 0
+  const showLoading = status === 'submitted' || status === 'streaming'
 
   // Helper function to get tool count with caching
   const getToolCount = (message?: UIMessage): number => {
@@ -180,7 +178,6 @@ export function ChatMessages({
                 onUpdateMessage={onUpdateMessage}
                 reload={reload}
               />
-              {showLoading && <DefaultSkeleton />}
             </div>
 
             {/* Assistant messages */}
@@ -202,6 +199,12 @@ export function ChatMessages({
                 />
               </div>
             ))}
+            {/* Show loading after assistant messages */}
+            {showLoading && sectionIndex === sections.length - 1 && (
+              <div className="flex justify-start py-4">
+                <AnimatedLogo className="h-10 w-10" />
+              </div>
+            )}
             {sectionIndex === sections.length - 1 && (
               <ChatError error={error} />
             )}

components/ui/animated-logo.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function AnimatedLogo({
+  className,
+  ...props
+}: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      fill="currentColor"
+      viewBox="0 0 256 256"
+      role="img"
+      xmlns="http://www.w3.org/2000/svg"
+      className={cn('h-8 w-8', className)}
+      {...props}
+    >
+      <circle cx="128" cy="128" r="128" fill="black"></circle>
+      <g className="animate-[lookAround_2s_ease-in-out_infinite] origin-center">
+        <circle cx="102" cy="128" r="18" fill="white"></circle>
+        <circle cx="154" cy="128" r="18" fill="white"></circle>
+      </g>
+    </svg>
+  )
+}