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/spec-view/components/spec-empty-state.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button';
-import { FileText, FilePlus2, Loader2 } from 'lucide-react';
+import { FileText, FilePlus2 } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { PHASE_LABELS } from '../constants';
 
 interface SpecEmptyStateProps {
@@ -36,7 +37,7 @@ export function SpecEmptyState({
         {isProcessing && (
           <div className="flex items-center gap-3 px-6 py-3.5 rounded-xl bg-linear-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
             <div className="relative">
-              <Loader2 className="w-5 h-5 animate-spin text-primary shrink-0" />
+              <Spinner size="md" className="shrink-0" />
               <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
             </div>
             <div className="flex flex-col gap-1 min-w-0">
@@ -64,7 +65,7 @@ export function SpecEmptyState({
           <div className="mb-6 flex justify-center">
             <div className="p-4 rounded-full bg-primary/10">
               {isCreating ? (
-                <Loader2 className="w-12 h-12 text-primary animate-spin" />
+                <Spinner size="xl" className="w-12 h-12" />
               ) : (
                 <FilePlus2 className="w-12 h-12 text-primary" />
               )}

apps/ui/src/components/views/spec-view/components/spec-header.tsx

@@ -3,7 +3,8 @@ import {
   HeaderActionsPanel,
   HeaderActionsPanelTrigger,
 } from '@/components/ui/header-actions-panel';
-import { Save, Sparkles, Loader2, FileText, AlertCircle, ListPlus, RefreshCcw } from 'lucide-react';
+import { Save, Sparkles, FileText, AlertCircle, ListPlus, RefreshCcw } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import { PHASE_LABELS } from '../constants';
 
 interface SpecHeaderProps {
@@ -59,7 +60,7 @@ export function SpecHeader({
           {isProcessing && (
             <div className="hidden lg:flex items-center gap-3 px-6 py-3.5 rounded-xl bg-linear-to-r from-primary/15 to-primary/5 border border-primary/30 shadow-lg backdrop-blur-md">
               <div className="relative">
-                <Loader2 className="w-5 h-5 animate-spin text-primary shrink-0" />
+                <Spinner size="md" className="shrink-0" />
                 <div className="absolute inset-0 w-5 h-5 animate-ping text-primary/20" />
               </div>
               <div className="flex flex-col gap-1 min-w-0">
@@ -83,7 +84,7 @@ export function SpecHeader({
           {/* Mobile processing indicator */}
           {isProcessing && (
             <div className="lg:hidden flex items-center gap-2 px-3 py-2 rounded-lg bg-primary/10 border border-primary/20">
-              <Loader2 className="w-4 h-4 animate-spin text-primary" />
+              <Spinner size="sm" />
               <span className="text-xs font-medium text-primary">Processing...</span>
             </div>
           )}
@@ -157,7 +158,7 @@ export function SpecHeader({
         {/* Status messages in panel */}
         {isProcessing && (
           <div className="flex items-center gap-3 p-3 rounded-lg bg-primary/10 border border-primary/20">
-            <Loader2 className="w-4 h-4 animate-spin text-primary shrink-0" />
+            <Spinner size="sm" className="shrink-0" />
             <div className="flex flex-col gap-0.5 min-w-0">
               <span className="text-sm font-medium text-primary">
                 {isSyncing

apps/ui/src/components/views/spec-view/dialogs/create-spec-dialog.tsx

@@ -1,4 +1,5 @@
-import { Sparkles, Clock, Loader2 } from 'lucide-react';
+import { Sparkles, Clock } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import {
   Dialog,
   DialogContent,
@@ -163,7 +164,7 @@ export function CreateSpecDialog({
           >
             {isCreatingSpec ? (
               <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                <Spinner size="sm" className="mr-2" />
                 Generating...
               </>
             ) : (

apps/ui/src/components/views/spec-view/dialogs/regenerate-spec-dialog.tsx

@@ -1,4 +1,5 @@
-import { Sparkles, Clock, Loader2 } from 'lucide-react';
+import { Sparkles, Clock } from 'lucide-react';
+import { Spinner } from '@/components/ui/spinner';
 import {
   Dialog,
   DialogContent,
@@ -158,7 +159,7 @@ export function RegenerateSpecDialog({
             >
               {isRegenerating ? (
                 <>
-                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  <Spinner size="sm" className="mr-2" />
                   Regenerating...
                 </>
               ) : (