Added page navigation progress indicator

web/src/lib/components/shared-components/navigation-loading-bar.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { cubicOut } from 'svelte/easing';
+	import { tweened } from 'svelte/motion';
+
+	const progress = tweened(0, {
+		duration: 1000,
+		easing: cubicOut
+	});
+
+	onMount(() => {
+		progress.set(90);
+	});
+</script>
+
+<div class="absolute top-0 left-0 w-screen h-[3px] bg-white z-[999999999]">
+	<span class="absolute bg-immich-primary h-[3px]" style:width={`${$progress}%`} />
+</div>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 
 	import { AppSideBarSelection } from '$lib/models/admin-sidebar-selection';
 	import { onMount } from 'svelte';
@@ -24,7 +23,7 @@
 </script>
 
 <section id="sidebar" class="flex flex-col gap-1 pt-8 pr-6">
-	<a sveltekit:prefetch href={$page.routeId != 'photos' ? `/photos` : null}>
+	<a sveltekit:prefetch sveltekit:noscroll href={$page.routeId !== 'photos' ? `/photos` : null}>
 		<SideBarButton
 			title="Photos"
 			logo={ImageOutline}
@@ -32,7 +31,7 @@
 			isSelected={selectedAction === AppSideBarSelection.PHOTOS}
 		/></a
 	>
-	<a sveltekit:prefetch href={$page.routeId != 'sharing' ? `/sharing` : null}>
+	<a sveltekit:prefetch href={$page.routeId !== 'sharing' ? `/sharing` : null}>
 		<SideBarButton
 			title="Sharing"
 			logo={AccountMultipleOutline}
@@ -43,7 +42,7 @@
 	<div class="text-xs ml-5 my-4">
 		<p>LIBRARY</p>
 	</div>
-	<a sveltekit:prefetch href={$page.routeId != 'albums' ? `/albums` : null}>
+	<a sveltekit:prefetch href={$page.routeId !== 'albums' ? `/albums` : null}>
 		<SideBarButton
 			title="Albums"
 			logo={ImageAlbum}

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>