small fix, don't worry about it

app/frontend/src/shared/components/LoadingSpinner.tsx

@@ -0,0 +1,51 @@
+interface LoadingSpinnerProps {
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function LoadingSpinner({ size = 'md', className = '' }: LoadingSpinnerProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4 border-2',
+    md: 'w-8 h-8 border-2',
+    lg: 'w-12 h-12 border-3',
+  };
+
+  return (
+    <div
+      className={`${sizeClasses[size]} border-[var(--border-primary)] border-t-[var(--text-accent)] rounded-full animate-spin ${className}`}
+      role="status"
+      aria-label="Loading"
+    >
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
+
+interface LoadingOverlayProps {
+  message?: string;
+}
+
+export function LoadingOverlay({ message = 'Loading...' }: LoadingOverlayProps) {
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50">
+      <div className="bg-[var(--bg-primary)] border border-[var(--border-primary)] rounded-lg p-6 flex flex-col items-center gap-4">
+        <LoadingSpinner size="lg" />
+        <p className="text-sm text-[var(--text-secondary)]">{message}</p>
+      </div>
+    </div>
+  );
+}
+
+interface LoadingStateProps {
+  message?: string;
+  className?: string;
+}
+
+export function LoadingState({ message = 'Loading...', className = '' }: LoadingStateProps) {
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 py-12 ${className}`}>
+      <LoadingSpinner size="md" />
+      <p className="text-sm text-[var(--text-secondary)]">{message}</p>
+    </div>
+  );
+}