Refactor components and modals

frontend/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface LoadingSpinnerProps {
+  overlay?: boolean;
+  text?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({ 
+  overlay = false,
+  text,
+  size = 'md'
+}) => {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-8 h-8',
+    lg: 'w-12 h-12'
+  };
+
+  const spinner = (
+    <div className="flex flex-col items-center justify-center">
+      <div className={`animate-spin rounded-full border-4 border-[var(--border-secondary)] border-t-[var(--color-primary)] ${sizeClasses[size]}`}></div>
+      {text && (
+        <p className="mt-4 text-[var(--text-secondary)] text-sm">{text}</p>
+      )}
+    </div>
+  );
+
+  if (overlay) {
+    return (
+      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+        <div className="bg-[var(--bg-primary)] rounded-lg p-6">
+          {spinner}
+        </div>
+      </div>
+    );
+  }
+
+  return spinner;
+};