Added page navigation progress indicator

web/src/routes/+layout.svelte

@@ -8,10 +8,13 @@
 	import { onMount } from 'svelte';
 	import { checkAppVersion } from '$lib/utils/check-app-version';
 	import { page } from '$app/stores';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import NavigationLoadingBar from '$lib/components/shared-components/navigation-loading-bar.svelte';
 
 	let shouldShowAnnouncement: boolean;
 	let localVersion: string;
 	let remoteVersion: string;
+	let showNavigationLoadingBar = false;
 
 	onMount(async () => {
 		const res = await checkAppVersion();
@@ -20,11 +23,23 @@
 		localVersion = res.localVersion ?? 'unknown';
 		remoteVersion = res.remoteVersion ?? 'unknown';
 	});
+
+	beforeNavigate(() => {
+		showNavigationLoadingBar = true;
+	});
+
+	afterNavigate(() => {
+		showNavigationLoadingBar = false;
+	});
 </script>
 
 <main>
 	{#key $page.url}
 		<div in:fade={{ duration: 100 }}>
+			{#if showNavigationLoadingBar}
+				<NavigationLoadingBar />
+			{/if}
+
 			<slot />
 			<DownloadPanel />
 

web/src/routes/auth/login/+page.svelte

@@ -3,10 +3,6 @@
 	import { fade } from 'svelte/transition';
 
 	import LoginForm from '$lib/components/forms/login-form.svelte';
-
-	const onLoginSuccess = () => {
-		goto('/photos');
-	};
 </script>
 
 <svelte:head>
@@ -15,6 +11,9 @@
 
 <section class="h-screen w-screen flex place-items-center place-content-center">
 	<div in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
-		<LoginForm on:success={onLoginSuccess} on:first-login={() => goto('/auth/change-password')} />
+		<LoginForm
+			on:success={() => goto('/photos')}
+			on:first-login={() => goto('/auth/change-password')}
+		/>
 	</div>
 </section>