1 files changed, 29 insertions, 7 deletions
diff --git a/makima/frontend/src/components/listen/ControlPanel.tsx b/makima/frontend/src/components/listen/ControlPanel.tsx
index f0e5702..f482ec4 100644
--- a/makima/frontend/src/components/listen/ControlPanel.tsx
+++ b/makima/frontend/src/components/listen/ControlPanel.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { Logo } from "../Logo";
 import type { MicrophoneStatus } from "../../hooks/useMicrophone";
+import type { ConnectionStatus } from "../../hooks/useWebSocket";
 import { ContractPickerModal } from "./ContractPickerModal";
 
 export interface ContractOption {
@@ -22,6 +23,8 @@ interface ControlPanelProps {
   selectedContractId: string | null;
   onContractChange: (contractId: string | null) => void;
   contractsLoading?: boolean;
+  // Connection status for loading state
+  connectionStatus?: ConnectionStatus;
 }
 
 function getStatusText(isListening: boolean, micStatus: MicrophoneStatus): string {
@@ -54,6 +57,7 @@ export function ControlPanel({
   selectedContractId,
   onContractChange,
   contractsLoading,
+  connectionStatus,
 }: ControlPanelProps) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const statusText = getStatusText(isListening, micStatus);
@@ -121,18 +125,36 @@ export function ControlPanel({
 
         {/* Connection status */}
         <div
-          className={`inline-flex items-center gap-1.5 px-2 py-1 border ${
+          className={`inline-flex flex-col gap-1 px-2 py-1 border ${
             isConnected
               ? "border-[#3f6fb3] text-[#75aafc]"
+              : connectionStatus === "connecting"
+              ? "border-[#3f6fb3] text-[#9bc3ff]"
               : "border-[rgba(117,170,252,0.25)] text-[#9bc3ff]"
           }`}
         >
-          <span
-            className={`w-1.5 h-1.5 rounded-full ${
-              isConnected ? "bg-[#75aafc]" : "bg-[#3f6fb3]"
-            }`}
-          />
-          {isConnected ? "CONNECTED" : "DISCONNECTED"}
+          <div className="inline-flex items-center gap-1.5">
+            <span
+              className={`w-1.5 h-1.5 rounded-full ${
+                isConnected ? "bg-[#75aafc]" : "bg-[#3f6fb3]"
+              }`}
+            />
+            {isConnected
+              ? "CONNECTED"
+              : connectionStatus === "connecting"
+              ? "LOADING MODELS..."
+              : "DISCONNECTED"}
+          </div>
+          {connectionStatus === "connecting" && (
+            <div className="w-full h-1.5 bg-[#0f1c2f] overflow-hidden">
+              <div
+                className="h-full w-1/3 bg-[#75aafc]"
+                style={{
+                  animation: "loading-slide 1.5s ease-in-out infinite",
+                }}
+              />
+            </div>
+          )}
         </div>
       </div>