feat: Implement button loading states

src/components/auth/AuthDiagnostics.tsx

@@ -31,32 +31,38 @@ interface AuthDiagnosticsData {
 export function AuthDiagnostics() {
   const [diagnostics, setDiagnostics] = useState<AuthDiagnosticsData | null>(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
 
   const runDiagnostics = async () => {
-    const storageStatus = authStorage.getStorageStatus();
-    const { data: { session }, error: sessionError } = await supabase.auth.getSession();
+    setIsRefreshing(true);
+    try {
+      const storageStatus = authStorage.getStorageStatus();
+      const { data: { session }, error: sessionError } = await supabase.auth.getSession();
     
-    const results = {
-      timestamp: new Date().toISOString(),
-      storage: storageStatus,
-      session: {
-        exists: !!session,
-        user: session?.user?.email || null,
-        expiresAt: session?.expires_at || null,
-        error: sessionError?.message || null,
-      },
-      network: {
-        online: navigator.onLine,
-      },
-      environment: {
-        url: window.location.href,
-        isIframe: window.self !== window.top,
-        cookiesEnabled: navigator.cookieEnabled,
-      }
-    };
-    
-    setDiagnostics(results);
-    logger.debug('Auth diagnostics', { results });
+      const results = {
+        timestamp: new Date().toISOString(),
+        storage: storageStatus,
+        session: {
+          exists: !!session,
+          user: session?.user?.email || null,
+          expiresAt: session?.expires_at || null,
+          error: sessionError?.message || null,
+        },
+        network: {
+          online: navigator.onLine,
+        },
+        environment: {
+          url: window.location.href,
+          isIframe: window.self !== window.top,
+          cookiesEnabled: navigator.cookieEnabled,
+        }
+      };
+      
+      setDiagnostics(results);
+      logger.debug('Auth diagnostics', { results });
+    } finally {
+      setIsRefreshing(false);
+    }
   };
 
   useEffect(() => {
@@ -119,7 +125,7 @@ export function AuthDiagnostics() {
             ⚠️ Running in iframe - storage may be restricted
           </div>
         )}
-        <Button onClick={runDiagnostics} variant="outline" size="sm" className="w-full mt-2">
+        <Button onClick={runDiagnostics} loading={isRefreshing} loadingText="Refreshing..." variant="outline" size="sm" className="w-full mt-2">
           Refresh Diagnostics
         </Button>
       </CardContent>