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/github-issues-view/components/issue-detail-panel.tsx

@@ -4,7 +4,6 @@ import {
   X,
   Wand2,
   ExternalLink,
-  Loader2,
   CheckCircle,
   Clock,
   GitPullRequest,
@@ -14,6 +13,7 @@ import {
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
@@ -87,7 +87,7 @@ export function IssueDetailPanel({
             if (isValidating) {
               return (
                 <Button variant="default" size="sm" disabled>
-                  <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                  <Spinner size="sm" className="mr-1" />
                   Validating...
                 </Button>
               );
@@ -297,9 +297,7 @@ export function IssueDetailPanel({
               <span className="text-sm font-medium">
                 Comments {totalCount > 0 && `(${totalCount})`}
               </span>
-              {commentsLoading && (
-                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
-              )}
+              {commentsLoading && <Spinner size="xs" />}
               {commentsExpanded ? (
                 <ChevronUp className="h-4 w-4 text-muted-foreground" />
               ) : (
@@ -340,7 +338,7 @@ export function IssueDetailPanel({
                     >
                       {loadingMore ? (
                         <>
-                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                          <Spinner size="sm" className="mr-2" />
                           Loading...
                         </>
                       ) : (

apps/ui/src/components/views/github-issues-view/components/issue-row.tsx

@@ -2,12 +2,12 @@ import {
   Circle,
   CheckCircle2,
   ExternalLink,
-  Loader2,
   CheckCircle,
   Sparkles,
   GitPullRequest,
   User,
 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import type { IssueRowProps } from '../types';
@@ -97,7 +97,7 @@ export function IssueRow({
           {/* Validating indicator */}
           {isValidating && (
             <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-primary/10 text-primary border border-primary/20 animate-in fade-in duration-200">
-              <Loader2 className="h-3 w-3 animate-spin" />
+              <Spinner size="xs" />
               Analyzing...
             </span>
           )}

apps/ui/src/components/views/github-issues-view/components/issues-list-header.tsx

@@ -1,5 +1,6 @@
 import { CircleDot, RefreshCw } from 'lucide-react';
 import { Button } from '@/components/ui/button';
+import { Spinner } from '@/components/ui/spinner';
 import { cn } from '@/lib/utils';
 import type { IssuesStateFilter } from '../types';
 import { IssuesFilterControls } from './issues-filter-controls';
@@ -77,7 +78,7 @@ export function IssuesListHeader({
           </div>
         </div>
         <Button variant="outline" size="sm" onClick={onRefresh} disabled={refreshing}>
-          <RefreshCw className={cn('h-4 w-4', refreshing && 'animate-spin')} />
+          {refreshing ? <Spinner size="sm" /> : <RefreshCw className="h-4 w-4" />}
         </Button>
       </div>