From c100d2c1edd7823e15a29998714b00f91b2a9eec Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 7 Apr 2024 03:07:59 -0700
Subject: [PATCH] feat: add loading bar component

---
 src/lib/components/BackToTop.svelte     |  2 +-
 src/lib/components/LoadingBar.svelte    | 38 +++++++++++++++++++++++++
 src/lib/components/Navbar/Navbar.svelte |  2 +-
 src/lib/components/Toc/TocHeader.svelte |  2 +-
 src/routes/+layout.svelte               |  7 +++++
 5 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/components/LoadingBar.svelte

diff --git a/src/lib/components/BackToTop.svelte b/src/lib/components/BackToTop.svelte
index 4a20ab2..96cc601 100644
--- a/src/lib/components/BackToTop.svelte
+++ b/src/lib/components/BackToTop.svelte
@@ -23,7 +23,7 @@
 <svelte:window on:scroll={handleScroll} />
 
 {#if showButton}
-	<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
+	<div class="fixed bottom-10 right-10 z-30" transition:fly={{ y: 50, duration: 150 }}>
 		<Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
 	</div>
 {/if}
diff --git a/src/lib/components/LoadingBar.svelte b/src/lib/components/LoadingBar.svelte
new file mode 100644
index 0000000..a299fd3
--- /dev/null
+++ b/src/lib/components/LoadingBar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Progress } from 'bits-ui';
+	import { fly } from 'svelte/transition';
+
+	export let state: 'loading' | 'done' = 'done';
+
+	let value = 0;
+
+	let hidden = true;
+
+	$: {
+		if (state === 'loading') {
+			hidden = false;
+			value = 0;
+		} else {
+			hidden = false;
+			value = 100;
+		}
+		setTimeout(() => {
+			hidden = true;
+		}, 1500);
+	}
+</script>
+
+{#if !hidden}
+	<div class="fixed top-0 right-0 w- z-40" transition:fly={{ y: -25, duration: 500 }}>
+		<Progress.Root
+			{value}
+			max={100}
+			class="relative h-[15px] overflow-hidden bg-dark-10 shadow-mini-inset rounded-r-xl"
+		>
+			<div
+				class="h-full w-full flex-1 bg-foreground shadow-mini-inset transition-all duration-1000 ease-in-out rounded-r-xl"
+				style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (100 ?? 1)}%)`}
+			/>
+		</Progress.Root>
+	</div>
+{/if}
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte
index e142629..4513aff 100644
--- a/src/lib/components/Navbar/Navbar.svelte
+++ b/src/lib/components/Navbar/Navbar.svelte
@@ -26,7 +26,7 @@
 	});
 </script>
 
-<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-40 font-display">
+<nav class="h-24 bg-background bg-opacity-50 backdrop-blur-lg fixed w-full z-30 font-display">
 	<div class="container mx-auto flex justify-between items-center h-full gap-6 overflow-x-auto">
 		<Drawer />
 		{#if current === 'blog'}
diff --git a/src/lib/components/Toc/TocHeader.svelte b/src/lib/components/Toc/TocHeader.svelte
index b247579..b2b3a19 100644
--- a/src/lib/components/Toc/TocHeader.svelte
+++ b/src/lib/components/Toc/TocHeader.svelte
@@ -23,7 +23,7 @@
 	};
 </script>
 
-<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-30 lg:hidden">
+<nav class="fixed top-24 left-0 w-full bg-background bg-opacity-50 backdrop-blur-lg z-20 lg:hidden">
 	<Accordion.Root class="px-8" bind:value>
 		<Accordion.Item value="toc">
 			<Accordion.Trigger
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5c85e36..b3947fd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -10,9 +10,12 @@
 	import { Toaster } from '$lib/components/ui/sonner';
 	import { onMount } from 'svelte';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
+	import LoadingBar from '$lib/components/LoadingBar.svelte';
 
 	let root: HTMLElement | null;
 
+	let loadingState: 'loading' | 'done' = 'done';
+
 	onMount(() => {
 		root = document.getElementsByTagName('html')[0];
 
@@ -21,16 +24,20 @@
 
 	beforeNavigate(() => {
 		root?.classList.remove('smoothscroll');
+		loadingState = 'loading';
 	});
 
 	afterNavigate(() => {
 		root?.classList.add('smoothscroll');
+		loadingState = 'done';
 	});
 </script>
 
 <Toaster />
 <ModeWatcher />
 
+<LoadingBar state={loadingState} />
+
 <Navbar />
 <div class="pt-24">
 	<slot />