update form button to have loading spinner + added flex gap-2 to button style

frontend/src/lib/components/ui/button/index.ts

@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { Button as ButtonPrimitive } from 'bits-ui'
 
 const buttonVariants = tv({
-	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+	base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 flex gap-2',
 	variants: {
 		variant: {
 			default:

frontend/src/routes/(app)/projects/[id]/settings/(components)/form.svelte

@@ -9,6 +9,7 @@
 	} from 'sveltekit-superforms'
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: SuperValidated<Infer<FormSchema>>
 
@@ -26,7 +27,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <form
@@ -42,5 +43,10 @@
 		<Form.Description>Update Project Name</Form.Description>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button class="w-fit">Save</Form.Button>
+	<Form.Button class="w-fit">
+		{#if $submitting}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		Save
+	</Form.Button>
 </form>

frontend/src/routes/(app)/projects/[id]/settings/+page.svelte

@@ -9,6 +9,7 @@
 	import { toast } from 'svelte-sonner'
 	import { Checkbox } from '$lib/components/ui/checkbox'
 	import { Input } from '$lib/components/ui/input'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: PageData
 
@@ -28,7 +29,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <div class="py-4 px-10 space-y-6 max-w-2xl">
@@ -88,8 +89,12 @@
 							variant="outline"
 							on:click={() => (deleteDialogOpen = false)}
 							>Cancel</Button>
-						<Form.Button variant="destructive" class="w-fit"
-							>Delete</Form.Button>
+						<Form.Button variant="destructive" class="w-fit">
+							{#if $submitting}
+								<LoaderCircle class="animate-spin" />
+							{/if}
+							Delete
+						</Form.Button>
 					</div>
 				</form>
 			</Dialog.Content>

frontend/src/routes/(app)/settings/account/(components)/form.svelte

@@ -10,6 +10,7 @@
 	} from 'sveltekit-superforms'
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: SuperValidated<Infer<FormSchema>>
 
@@ -27,7 +28,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <form method="POST" use:enhance class="flex flex-col gap-6">
@@ -81,5 +82,10 @@
 		<Form.Description>Confirm New Password</Form.Description>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button class="w-fit">Save</Form.Button>
+	<Form.Button class="w-fit">
+		{#if $submitting}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		Save
+	</Form.Button>
 </form>

frontend/src/routes/(app)/settings/qr/(components)/form.svelte

@@ -10,6 +10,7 @@
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
 	import DemoQr from './DemoQR.svelte'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: SuperValidated<Infer<FormSchema>>
 
@@ -27,7 +28,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <DemoQr
@@ -51,5 +52,10 @@
 		<Form.Description>QR Code foreground color</Form.Description>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button class="w-fit">Save</Form.Button>
+	<Form.Button class="w-fit">
+		{#if $submitting}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		Save
+	</Form.Button>
 </form>

frontend/src/routes/(auth)/login/(components)/form.svelte

@@ -9,6 +9,7 @@
 	} from 'sveltekit-superforms'
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: SuperValidated<Infer<FormSchema>>
 
@@ -26,7 +27,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <form method="POST" use:enhance class="flex flex-col gap-4">
@@ -51,5 +52,10 @@
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button>Login</Form.Button>
+	<Form.Button>
+		{#if $submitting}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		Login
+	</Form.Button>
 </form>

frontend/src/routes/(auth)/signup/(components)/form.svelte

@@ -9,6 +9,7 @@
 	} from 'sveltekit-superforms'
 	import { zodClient } from 'sveltekit-superforms/adapters'
 	import { toast } from 'svelte-sonner'
+	import { LoaderCircle } from 'lucide-svelte'
 
 	export let data: SuperValidated<Infer<FormSchema>>
 
@@ -26,7 +27,7 @@
 		},
 	})
 
-	const { form: formData, enhance } = form
+	const { form: formData, enhance, submitting } = form
 </script>
 
 <form method="POST" use:enhance class="flex flex-col gap-4">
@@ -65,5 +66,10 @@
 		</Form.Control>
 		<Form.FieldErrors />
 	</Form.Field>
-	<Form.Button>Sign Up</Form.Button>
+	<Form.Button>
+		{#if $submitting}
+			<LoaderCircle class="animate-spin" />
+		{/if}
+		Sign Up
+	</Form.Button>
 </form>