try to do better

frontend/src/components/ui/LoadingSpinner.tsx

@@ -0,0 +1,32 @@
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  fullScreen?: boolean;
+  text?: string;
+}
+
+export function LoadingSpinner({ size = 'md', fullScreen = false, text }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-6 h-6 border-2',
+    md: 'w-10 h-10 border-3',
+    lg: 'w-16 h-16 border-4',
+  };
+
+  const spinner = (
+    <div className="flex flex-col items-center gap-3">
+      <div
+        className={`${sizeClasses[size]} border-blue-600 border-t-transparent rounded-full animate-spin`}
+      ></div>
+      {text && <p className="text-gray-600 dark:text-gray-400">{text}</p>}
+    </div>
+  );
+
+  if (fullScreen) {
+    return (
+      <div className="fixed inset-0 bg-white dark:bg-gray-900 flex items-center justify-center z-50">
+        {spinner}
+      </div>
+    );
+  }
+
+  return spinner;
+}