refactor: replace Loader2 with Spinner component across the application

This update standardizes the loading indicators by replacing all instances of Loader2 with the new Spinner component. The Spinner component provides a consistent look and feel for loading states throughout the UI, enhancing the user experience.

Changes include:
- Updated loading indicators in various components such as popovers, modals, and views.
- Ensured that the Spinner component is used with appropriate sizes for different contexts.

No functional changes were made; this is purely a visual and structural improvement.

apps/ui/src/components/views/setup-view/steps/claude-setup-step.tsx

@@ -14,7 +14,6 @@ import { useAppStore } from '@/store/app-store';
 import { getElectronAPI } from '@/lib/electron';
 import {
   CheckCircle2,
-  Loader2,
   Key,
   ArrowRight,
   ArrowLeft,
@@ -27,6 +26,7 @@ import {
   XCircle,
   Trash2,
 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { toast } from 'sonner';
 import { StatusBadge, TerminalOutput } from '../components';
 import { useCliStatus, useCliInstallation, useTokenSave } from '../hooks';
@@ -330,7 +330,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
               Authentication Methods
             </CardTitle>
             <Button variant="ghost" size="sm" onClick={checkStatus} disabled={isChecking}>
-              <RefreshCw className={`w-4 h-4 ${isChecking ? 'animate-spin' : ''}`} />
+              {isChecking ? <Spinner size="sm" /> : <RefreshCw className="w-4 h-4" />}
             </Button>
           </div>
           <CardDescription>
@@ -412,7 +412,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                     >
                       {isInstalling ? (
                         <>
-                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          <Spinner size="sm" className="mr-2" />
                           Installing...
                         </>
                       ) : (
@@ -435,7 +435,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                 {/* CLI Verification Status */}
                 {cliVerificationStatus === 'verifying' && (
                   <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
-                    <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+                    <Spinner size="md" />
                     <div>
                       <p className="font-medium text-foreground">Verifying CLI authentication...</p>
                       <p className="text-sm text-muted-foreground">Running a test query</p>
@@ -494,7 +494,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                   >
                     {cliVerificationStatus === 'verifying' ? (
                       <>
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        <Spinner size="sm" className="mr-2" />
                         Verifying...
                       </>
                     ) : cliVerificationStatus === 'error' ? (
@@ -574,7 +574,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                     >
                       {isSavingApiKey ? (
                         <>
-                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          <Spinner size="sm" className="mr-2" />
                           Saving...
                         </>
                       ) : (
@@ -589,11 +589,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                         className="border-red-500/50 text-red-500 hover:bg-red-500/10 hover:text-red-400"
                         data-testid="delete-anthropic-key-button"
                       >
-                        {isDeletingApiKey ? (
-                          <Loader2 className="w-4 h-4 animate-spin" />
-                        ) : (
-                          <Trash2 className="w-4 h-4" />
-                        )}
+                        {isDeletingApiKey ? <Spinner size="sm" /> : <Trash2 className="w-4 h-4" />}
                       </Button>
                     )}
                   </div>
@@ -602,7 +598,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                 {/* API Key Verification Status */}
                 {apiKeyVerificationStatus === 'verifying' && (
                   <div className="flex items-center gap-3 p-4 rounded-lg bg-blue-500/10 border border-blue-500/20">
-                    <Loader2 className="w-5 h-5 text-blue-500 animate-spin" />
+                    <Spinner size="md" />
                     <div>
                       <p className="font-medium text-foreground">Verifying API key...</p>
                       <p className="text-sm text-muted-foreground">Running a test query</p>
@@ -642,7 +638,7 @@ export function ClaudeSetupStep({ onNext, onBack, onSkip }: ClaudeSetupStepProps
                   >
                     {apiKeyVerificationStatus === 'verifying' ? (
                       <>
-                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                        <Spinner size="sm" className="mr-2" />
                         Verifying...
                       </>
                     ) : apiKeyVerificationStatus === 'error' ? (