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

Jacky Zhao

2024-12-27 c91cf97f99d527264d81560f1d311f7c2889a41d

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

 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
}

 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;
}