Fix loading shown on login, add base enhance to logout and show loading UI with toast on success.

src/lib/components/header/index.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-	import { enhance } from '$app/forms';
+	import { applyAction, enhance } from '$app/forms';
 	import { ListChecks, ListTodo, LogOut, User } from 'lucide-svelte';
 	import { Button } from '$lib/components/ui/button';
 	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
 	import * as Avatar from "$lib/components/ui/avatar";
 	import Logo from '$components/logo.svelte';
+	import { boredState } from '$lib/stores/boredState';
+	import { invalidateAll } from '$app/navigation';
+	import toast from 'svelte-french-toast';
 
 	export let user: any;
 
@@ -53,7 +56,24 @@
 							</DropdownMenu.Item>
 						</a>
 						<form
-							use:enhance
+							use:enhance={() => {
+								boredState.update((n) => ({ ...n, loading: true }));
+								return async ({ result }) => {
+									console.log(result);
+									if (result.type === 'success' || result.type === 'redirect') {
+										toast.success('Logged Out');
+									} else if (result.type === 'error') {
+										console.log(result);
+										toast.error(`Error: ${result.error.message}`);
+									} else {
+										toast.error(`Something went wrong.`);
+										console.log(result);
+									}
+									await invalidateAll();
+									await applyAction(result);
+									boredState.update((n) => ({ ...n, loading: true }));
+								};
+							}}
 							action="/logout"
 							method="POST"
 						>

src/lib/state/loading.ts

@@ -0,0 +1,36 @@
+import { writable } from 'svelte/store';
+
+const newLoading = () => {
+	const { subscribe, update, set } = writable({
+		status: 'IDLE', // IDLE, LOADING, NAVIGATING
+		message: ''
+	});
+
+	function setNavigate(isNavigating: boolean) {
+		update(() => {
+			return {
+				status: isNavigating ? 'NAVIGATING' : 'IDLE',
+				message: ''
+			};
+		});
+	}
+
+	function setLoading(isLoading: boolean, message = '') {
+		update(() => {
+			return {
+				status: isLoading ? 'LOADING' : 'IDLE',
+				message: isLoading ? message : ''
+			};
+		});
+	}
+
+	return {
+		subscribe,
+		update,
+		set,
+		setNavigate,
+		setLoading
+	};
+};
+
+export const loading = newLoading();

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

@@ -10,11 +10,11 @@
 	import { Button } from '$components/ui/button';
   import * as Alert from "$components/ui/alert";
 	import { boredState } from '$lib/stores/boredState.js';
-	import Portal from '$lib/Portal.svelte';
-	import Loading from '$components/loading.svelte';
 
 	export let data;
-	const { form, errors, enhance, delayed } = superForm(data.form, {
+	const { form, errors, enhance } = superForm(data.form, {
+		onSubmit: () => boredState.update((n) => ({ ...n, loading: true })),
+  	onResult: () => boredState.update((n) => ({ ...n, loading: false })),
 		flashMessage: {
 			module: flashModule,
 			onError: ({ result, message }) => {
@@ -29,15 +29,9 @@
 		taintedMessage: null,
 		validators: signInSchema,
 		validationMethod: 'oninput',
-		delayMs: 250,
+		delayMs: 0,
 	});
 
-	$: {
-		if ($delayed) {
-			boredState.update((n) => ({ ...n, loading: true }));
-		}
-	}
-
 	const flash = flashModule.getFlash(page);
 
 	$: {

src/routes/(auth)/logout/+page.server.ts

@@ -10,6 +10,6 @@ export const actions = {
 		}
 		await auth.invalidateSession(session.sessionId); // invalidate session
 		locals.auth.setSession(null); // remove cookie
-		throw redirect(302, '/login');
+		throw redirect(302, '/');
 	}
 };