feat: Add loading state to Auth forms

- Added `Spinner` component
- Updated `Button` component to support `isLoading` prop
- Implemented loading state in `Auth` page for login and signup forms
- Improves UX by preventing multiple submissions and providing visual feedback

Author: google-labs-jules[bot]

.Jules/palette.md

@@ -1 +1,5 @@
 # Palette Journal
+
+## 2025-05-21 - [Feedback on Auth]
+**Learning:** Users often click submit multiple times on authentication forms if there's no immediate visual feedback, causing race conditions or frustration.
+**Action:** Always add a loading spinner and disable the button immediately upon submission for async auth operations.

web/components/ui/Button.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
 import { THEMES } from '../../constants';
 import { useTheme } from '../../contexts/ThemeContext';
+import { Spinner } from './Spinner';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
   size?: 'sm' | 'md' | 'lg';
+  isLoading?: boolean;
 }
 
 export const Button: React.FC<ButtonProps> = ({
   children,
   variant = 'primary',
   size = 'md',
   className = '',
+  isLoading = false,
   ...props
 }) => {
   const { style } = useTheme();
@@ -47,8 +50,11 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <button
       className={`${baseStyles} ${sizeStyles[size]} ${themeStyles} ${className}`}
+      disabled={isLoading || props.disabled}
+      aria-busy={isLoading}
       {...props}
     >
+      {isLoading && <Spinner size={size === 'sm' ? 16 : 20} />}
       {children}
     </button>
   );

web/components/ui/Spinner.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Loader2 } from 'lucide-react';
+
+interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
+  size?: number | string;
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const Spinner: React.FC<SpinnerProps> = ({
+  size = 20,
+  className = '',
+  ariaLabel = 'Loading',
+  ...props
+}) => {
+  return (
+    <Loader2
+      className={`animate-spin ${className}`}
+      size={size}
+      aria-label={ariaLabel}
+      {...props}
+    />
+  );
+};

web/pages/Auth.tsx

@@ -251,8 +251,8 @@ export const Auth = () => {
                 </motion.div>
               )}
 
-              <Button type="submit" disabled={loading} className={`w-full py-4 text-lg ${isNeo ? 'rounded-none' : ''}`}>
-                {loading ? 'Processing...' : isLogin ? 'Log In' : 'Create Account'} <ArrowRight size={20} />
+              <Button type="submit" isLoading={loading} className={`w-full py-4 text-lg ${isNeo ? 'rounded-none' : ''}`}>
+                {isLogin ? 'Log In' : 'Create Account'} <ArrowRight size={20} />
               </Button>
             </form>