feat(spa): add loading bar (#1684)

jackyzha0 · Dec 27, 2024 · c91cf97 · c91cf97
1 parent 05e6f05
commit c91cf97
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git 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
@@ -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;
+}