added loading state to login form

src/routes/(auth)/login/(components)/user-auth-form.svelte

@@ -4,22 +4,29 @@
 	import type { SuperValidated } from 'sveltekit-superforms'
 
 	export let form: SuperValidated<FormSchema>
+	export let isLoading: boolean = false
 </script>
 
 <Form.Root method="POST" {form} schema={formSchema} let:config>
 	<Form.Field {config} name="email">
 		<Form.Item>
 			<Form.Label>Email</Form.Label>
-			<Form.Input placeholder="name@example.com" />
+			<Form.Input
+				disabled={isLoading}
+				placeholder="name@example.com" />
 			<Form.Validation />
 		</Form.Item>
 	</Form.Field>
 	<Form.Field {config} name="password">
 		<Form.Item>
 			<Form.Label>Password</Form.Label>
-			<Form.Input type="password" placeholder="••••••••" />
+			<Form.Input
+				disabled={isLoading}
+				type="password"
+				placeholder="••••••••" />
 			<Form.Validation />
 		</Form.Item>
 	</Form.Field>
-	<Form.Button class="w-full">Sign In</Form.Button>
+	<Form.Button disabled={isLoading} class="w-full"
+		>Sign In</Form.Button>
 </Form.Root>

src/routes/(auth)/login/+page.svelte

@@ -4,15 +4,19 @@
 	import UserAuthForm from './(components)/user-auth-form.svelte'
 	import { Button } from '$lib/components/ui/button'
 	import { goto } from '$app/navigation'
+	import { Loader2 } from 'lucide-svelte'
 
 	export let data: PageData
+	let isLoading = false
 
 	const guestLogin = async () => {
+		isLoading = true
 		const response = await fetch('/api/login', {
 			method: 'post',
 		})
 
 		const data = await response.json()
+		isLoading = false
 		if (data.success) {
 			goto('/')
 		}
@@ -42,7 +46,7 @@
 					Enter your email below to login to your account
 				</p>
 			</div>
-			<UserAuthForm form={data.form} />
+			<UserAuthForm form={data.form} {isLoading} />
 			<p class="px-8 text-center text-sm text-muted-foreground">
 				Don't Have An Account? Signup{' '}
 				<a
@@ -51,7 +55,15 @@
 					Here
 				</a>
 			</p>
-			<Button on:click={guestLogin}>Login As Guest</Button>
+			<Button
+				disabled={isLoading}
+				on:click={guestLogin}
+				class="flex gap-2">
+				{#if isLoading}
+					<Loader2 class="animate-spin" />
+				{/if}
+				Login As Guest
+			</Button>
 		</div>
 	</div>
 </div>