From 96fb4fe9998131752873e63a93e2ce3fc48bf81c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 30 Sep 2025 17:05:10 +0000
Subject: [PATCH 1/2] feat: Add spinning loader for AI token generation

This commit introduces a spinning loader on the top-left plant icon to indicate when the AI is generating tokens. A new `IsLoadingProvider` is created to manage the loading state, which is updated from the `Chat` component based on the `isGenerating` streamable value. The `Header` component consumes this state to conditionally apply a counter-clockwise spinning animation.
---
 app/globals.css                    | 13 +++++++++
 app/layout.tsx                     | 43 ++++++++++++++++--------------
 components/chat.tsx                | 19 ++++++++++++-
 components/header.tsx              | 13 ++++++++-
 components/is-loading-provider.tsx | 30 +++++++++++++++++++++
 5 files changed, 96 insertions(+), 22 deletions(-)
 create mode 100644 components/is-loading-provider.tsx
diff --git a/app/globals.css b/app/globals.css
index fd4bcddd..56dd31d8 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -237,3 +237,16 @@
 .mapboxgl-ctrl-group button {
   pointer-events: auto !important;
 }
+
+@keyframes spin-counter-clockwise {
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+}
+
+.animate-spin-counter-clockwise {
+  animation: spin-counter-clockwise 1s linear infinite;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index ab3f150b..6bdfe725 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -12,6 +12,7 @@ import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
 import { MapLoadingProvider } from '@/components/map-loading-context';
+import { IsLoadingProvider } from '@/components/is-loading-provider';
 import ConditionalLottie from '@/components/conditional-lottie';
 
 const fontSans = FontSans({
@@ -54,26 +55,28 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={cn('font-sans antialiased', fontSans.variable)}>
-        <MapToggleProvider>
-          <ProfileToggleProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapLoadingProvider>
-                <Header />
-                <ConditionalLottie />
-                {children}
-                <Sidebar />
-                <Footer />
-                <Toaster />
-              </MapLoadingProvider>
-            </ThemeProvider>
-          </ProfileToggleProvider>
-        </MapToggleProvider>
+        <IsLoadingProvider>
+          <MapToggleProvider>
+            <ProfileToggleProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="earth"
+                enableSystem
+                disableTransitionOnChange
+                themes={['light', 'dark', 'earth']}
+              >
+                <MapLoadingProvider>
+                  <Header />
+                  <ConditionalLottie />
+                  {children}
+                  <Sidebar />
+                  <Footer />
+                  <Toaster />
+                </MapLoadingProvider>
+              </ThemeProvider>
+            </ProfileToggleProvider>
+          </MapToggleProvider>
+        </IsLoadingProvider>
         <Analytics />
         <SpeedInsights />
       </body>
diff --git a/components/chat.tsx b/components/chat.tsx
index 59c4d914..0efeb67d 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -6,7 +6,9 @@ import { ChatPanel } from './chat-panel'
 import { ChatMessages } from './chat-messages'
 import { EmptyScreen } from './empty-screen'
 import { Mapbox } from './map/mapbox-map'
-import { useUIState, useAIState } from 'ai/rsc'
+import { useUIState, useAIState, useStreamableValue, type StreamableValue } from 'ai/rsc'
+import { useIsLoading } from '@/components/is-loading-provider'
+import type { UIState } from '@/app/actions'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
 import SettingsView from "@/components/settings/settings-view";
@@ -17,6 +19,19 @@ type ChatProps = {
   id?: string // This is the chatId
 }
 
+function LoadingStateUpdater({ messages }: { messages: UIState }) {
+  const { setIsLoading } = useIsLoading();
+  const lastMessage = messages[messages.length - 1];
+  const isGenerating = lastMessage?.isGenerating;
+  const [loading] = useStreamableValue(isGenerating);
+
+  useEffect(() => {
+    setIsLoading(loading || false);
+  }, [loading, setIsLoading]);
+
+  return null;
+}
+
 export function Chat({ id }: ChatProps) {
   const router = useRouter()
   const path = usePathname()
@@ -75,6 +90,7 @@ export function Chat({ id }: ChatProps) {
   if (isMobile) {
     return (
       <MapDataProvider> {/* Add Provider */}
+        <LoadingStateUpdater messages={messages} />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
             {activeView ? <SettingsView /> : <Mapbox />}
@@ -104,6 +120,7 @@ export function Chat({ id }: ChatProps) {
   // Desktop layout
   return (
     <MapDataProvider> {/* Add Provider */}
+      <LoadingStateUpdater messages={messages} />
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
         <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
diff --git a/components/header.tsx b/components/header.tsx
index 0a370612..e139e8e6 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Image from 'next/image'
+import { useIsLoading } from './is-loading-provider'
 import { ModeToggle } from './mode-toggle'
 import { cn } from '@/lib/utils'
 import HistoryContainer from './history-container'
@@ -15,6 +16,8 @@ import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
 
 export const Header = () => {
+  const { isLoading } = useIsLoading()
+
   return (
     <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-10 backdrop-blur md:backdrop-blur-none bg-background/80 md:bg-transparent">
       <div>
@@ -25,7 +28,15 @@ export const Header = () => {
       
       <div className="absolute left-1">
         <Button variant="ghost" size="icon">
-          <Image src="/images/logo.svg" alt="Logo" width={24} height={24} className="h-6 w-auto" />
+          <Image
+            src="/images/logo.svg"
+            alt="Logo"
+            width={24}
+            height={24}
+            className={cn('h-6 w-auto', {
+              'animate-spin-counter-clockwise': isLoading
+            })}
+          />
         </Button>
       </div>
       
diff --git a/components/is-loading-provider.tsx b/components/is-loading-provider.tsx
new file mode 100644
index 00000000..93b9d17f
--- /dev/null
+++ b/components/is-loading-provider.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from 'react'
+
+interface IsLoadingContextType {
+  isLoading: boolean
+  setIsLoading: (isLoading: boolean) => void
+}
+
+const IsLoadingContext = createContext<IsLoadingContextType | undefined>(
+  undefined
+)
+
+export function IsLoadingProvider({ children }: { children: ReactNode }) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  return (
+    <IsLoadingContext.Provider value={{ isLoading, setIsLoading }}>
+      {children}
+    </IsLoadingContext.Provider>
+  )
+}
+
+export function useIsLoading() {
+  const context = useContext(IsLoadingContext)
+  if (context === undefined) {
+    throw new Error('useIsLoading must be used within an IsLoadingProvider')
+  }
+  return context
+}
\ No newline at end of file

From e8fa0ba3813ef2b2503e6f3625d1ed8b88ecbef7 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 30 Sep 2025 17:16:57 +0000
Subject: [PATCH 2/2] feat: Add spinning loader for AI token generation

This commit introduces a spinning loader on the top-left plant icon to indicate when the AI is generating tokens. A new `IsLoadingProvider` is created to manage the loading state, which is updated from the `Chat` component based on the `isGenerating` streamable value. The `Header` component consumes this state to conditionally apply a counter-clockwise spinning animation.
---
 components/header.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/header.tsx b/components/header.tsx
index e139e8e6..a7b48aed 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React from 'react'
 import Image from 'next/image'
 import { useIsLoading } from './is-loading-provider'
