From c91cf97f99d527264d81560f1d311f7c2889a41d Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Fri, 27 Dec 2024 05:18:17 +0000
Subject: [PATCH] feat(spa): add loading bar (#1684)
---
quartz/styles/base.scss | 11 +++++++++++
quartz/components/scripts/spa.inline.ts | 15 +++++++++++++++
2 files changed, 26 insertions(+), 0 deletions(-)
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 @@
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 @@
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 @@
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;
+}
--
Gitblit v1.10.0