feat: add loading spinner state to buttons and wallet connect button

components/ui/button.test.tsx

@@ -18,4 +18,10 @@ describe('Button', () => {
     fireEvent.click(screen.getByRole('button'))
     expect(handleClick).toHaveBeenCalledTimes(1)
   })
+
+  it('shows spinner when isLoading is true', () => {
+    render(<Button isLoading>Submit</Button>)
+    const button = screen.getByRole('button')
+    expect(button.querySelector('svg')).toBeInTheDocument()
+  })
 })

components/ui/button.tsx

@@ -6,7 +6,7 @@ import { Loader2 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

components/wallet-button.tsx

@@ -31,11 +31,11 @@ export function WalletButton() {
     return (
       <Button
         onClick={connectWallet}
-        disabled={isLoading}
+        isLoading={isLoading}
         variant="outline"
       >
         <Wallet className="mr-2 h-4 w-4" />
-        {isLoading ? 'Connecting...' : 'Connect Wallet'}
+        Connect Wallet
       </Button>
     );
   }