From 658b64df74a695e884ca6914a099e6c91c5e222a Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Thu, 25 Aug 2022 13:02:36 -0700
Subject: [PATCH] Added page navigation progress indicator

---
 .../navigation-loading-bar.svelte              | 18 ++++++++++++++++++
 .../shared-components/side-bar/side-bar.svelte |  7 +++----
 web/src/routes/+layout.svelte                  | 15 +++++++++++++++
 web/src/routes/auth/login/+page.svelte         |  9 ++++-----
 4 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 web/src/lib/components/shared-components/navigation-loading-bar.svelte

diff --git a/web/src/lib/components/shared-components/navigation-loading-bar.svelte b/web/src/lib/components/shared-components/navigation-loading-bar.svelte
new file mode 100644
index 0000000000..c4f7f63b0c
--- /dev/null
+++ b/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>
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte
index db3249b185..3760bf0f56 100644
--- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte
+++ b/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}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index b927b8fbd9..537e021998 100644
--- a/web/src/routes/+layout.svelte
+++ b/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 />
 
diff --git a/web/src/routes/auth/login/+page.svelte b/web/src/routes/auth/login/+page.svelte
index 27287db12f..aff854ff19 100644
--- a/web/src/routes/auth/login/+page.svelte
+++ b/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>