From c91cf97f99d527264d81560f1d311f7c2889a41d Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 26 Dec 2024 21:18:17 -0800
Subject: [PATCH] feat(spa): add loading bar (#1684)

---
 quartz/components/scripts/spa.inline.ts | 15 +++++++++++++++
 quartz/styles/base.scss                 | 11 +++++++++++
 2 files changed, 26 insertions(+)

diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 1790bca..b67dad0 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -42,8 +42,22 @@ function notifyNav(url: FullSlug) {
 const cleanupFns: Set<(...args: any[]) => void> = new Set()
 window.addCleanup = (fn) => cleanupFns.add(fn)
 
+function startLoading() {
+  const loadingBar = document.createElement("div")
+  loadingBar.className = "navigation-progress"
+  loadingBar.style.width = "0"
+  if (!document.body.contains(loadingBar)) {
+    document.body.appendChild(loadingBar)
+  }
+
+  setTimeout(() => {
+    loadingBar.style.width = "80%"
+  }, 100)
+}
+
 let p: DOMParser
 async function navigate(url: URL, isBack: boolean = false) {
+  startLoading()
   p = p || new DOMParser()
   const contents = await fetch(`${url}`)
     .then((res) => {
@@ -104,6 +118,7 @@ async function navigate(url: URL, isBack: boolean = false) {
   if (!isBack) {
     history.pushState({}, "", url)
   }
+
   notifyNav(getFullSlug(window))
   delete announcer.dataset.persist
 }
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 512af0d..4b79ea0 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -587,3 +587,14 @@ iframe.pdf {
   width: 100%;
   border-radius: 5px;
 }
+
+.navigation-progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 3px;
+  background: var(--secondary);
+  transition: width 0.2s ease;
+  z-index: 9999;
+}