feat: add loading bar during navigation

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>

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 />