From 30ec2d578099ecc57b8a6897f1dc5b6ec4f7f99f Mon Sep 17 00:00:00 2001
From: Jean-Luc Makiola <business@jeanlucmakiola.de>
Date: Wed, 11 Mar 2026 22:32:30 +0100
Subject: [PATCH] feat(03-01): add loading spinners to Login, Register, and
 BudgetSetup submit buttons

- LoginPage: Spinner replaces button text during loading, min-w-[120px] prevents layout shift
- RegisterPage: Spinner replaces button text during loading, min-w-[120px] prevents layout shift
- BudgetSetup: Spinner replaces create button text during saving, min-w-[120px] prevents layout shift
- All buttons remain disabled during loading/saving to prevent double-submit
---
 frontend/src/components/BudgetSetup.tsx | 5 +++--
 frontend/src/pages/LoginPage.tsx        | 5 +++--
 frontend/src/pages/RegisterPage.tsx     | 5 +++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/BudgetSetup.tsx b/frontend/src/components/BudgetSetup.tsx
index b4a9833..e53915e 100644
--- a/frontend/src/components/BudgetSetup.tsx
+++ b/frontend/src/components/BudgetSetup.tsx
@@ -4,6 +4,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/componen
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Spinner } from '@/components/ui/spinner'
 import { budgets as budgetsApi, type Budget } from '@/lib/api'
 
 interface Props {
@@ -89,8 +90,8 @@ export function BudgetSetup({ existingBudgets, onCreated, onCancel }: Props) {
       </CardContent>
       <CardFooter className="flex gap-2 justify-end">
         <Button variant="outline" onClick={onCancel}>{t('common.cancel')}</Button>
-        <Button onClick={handleCreate} disabled={saving || !name || !startDate || !endDate}>
-          {t('common.create')}
+        <Button onClick={handleCreate} disabled={saving || !name || !startDate || !endDate} className="min-w-[120px]">
+          {saving ? <Spinner /> : t('common.create')}
         </Button>
       </CardFooter>
     </Card>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 69ccc42..4ffc4e2 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Spinner } from '@/components/ui/spinner'
 import { palette } from '@/lib/palette'
 import type { AuthContext } from '@/hooks/useAuth'
 
@@ -78,8 +79,8 @@ export function LoginPage({ auth: { login }, onToggle }: Props) {
               onChange={(e) => setPassword(e.target.value)}
               required
             />
-            <Button type="submit" disabled={loading} className="w-full">
-              {t('auth.login')}
+            <Button type="submit" disabled={loading} className="w-full min-w-[120px]">
+              {loading ? <Spinner /> : t('auth.login')}
             </Button>
             <a href="/api/auth/oidc" className="block">
               <Button type="button" variant="outline" className="w-full">
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 9bcce16..6da54e5 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -5,6 +5,7 @@ import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Spinner } from '@/components/ui/spinner'
 import { palette } from '@/lib/palette'
 import type { AuthContext } from '@/hooks/useAuth'
 
@@ -86,8 +87,8 @@ export function RegisterPage({ auth: { register }, onToggle }: Props) {
               required
               minLength={8}
             />
-            <Button type="submit" disabled={loading} className="w-full">
-              {t('auth.register')}
+            <Button type="submit" disabled={loading} className="w-full min-w-[120px]">
+              {loading ? <Spinner /> : t('auth.register')}
             </Button>
           </CardContent>
         </form>