From b03acb844a1dd9d67d77dcdb7bde6b5b966fb0e8 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 12 Apr 2024 16:54:45 -0700
Subject: [PATCH] feat: add loading bar during navigation

---
 src/lib/components/Loading.svelte | 30 ++++++++++++++++++++++++++++++
 src/routes/+layout.svelte         |  8 ++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/lib/components/Loading.svelte

diff --git a/src/lib/components/Loading.svelte b/src/lib/components/Loading.svelte
new file mode 100644
index 0000000..dff3978
--- /dev/null
+++ b/src/lib/components/Loading.svelte
@@ -0,0 +1,30 @@
+<script>
+	import { fly } from 'svelte/transition';
+</script>
+
+<div class="w-full fixed top-0 left-0 z-50" transition:fly={{ duration: 200, y: -6 }}>
+	<div class="h-1.5 w-full bg-muted-foreground overflow-hidden">
+		<div class="progress w-full h-full bg-muted left-right"></div>
+	</div>
+</div>
+
+<style lang="postcss">
+	.progress {
+		animation: progress 0.8s infinite linear;
+	}
+
+	.left-right {
+		transform-origin: 0% 50%;
+	}
+	@keyframes progress {
+		0% {
+			transform: translateX(0) scaleX(0);
+		}
+		40% {
+			transform: translateX(0) scaleX(0.4);
+		}
+		100% {
+			transform: translateX(100%) scaleX(0.5);
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5c85e36..a8a1f52 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,8 +10,10 @@
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onMount } from 'svelte';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import Loading from '$lib/components/Loading.svelte';
 
 	let root: HTMLElement | null;
+	let navigating = false;
 
 	onMount(() => {
 		root = document.getElementsByTagName('html')[0];
@@ -20,10 +22,12 @@
 	});
 
 	beforeNavigate(() => {
+		navigating = true;
 		root?.classList.remove('smoothscroll');
 	});
 
 	afterNavigate(() => {
+		navigating = false;
 		root?.classList.add('smoothscroll');
 	});
 </script>
@@ -31,6 +35,10 @@
 <Toaster />
 <ModeWatcher />
 
+{#if navigating}
+	<Loading />
+{/if}
+
 <Navbar />
 <div class="pt-24">
 	<slot />