From 0d9b3560466f9c8c189ef874239d03e00990a0b6 Mon Sep 17 00:00:00 2001
From: saberzero1 <github@emilebangma.com>
Date: Sun, 24 May 2026 17:10:03 +0200
Subject: [PATCH] fix: resolve client-side navigation and popover issues

- Fix popover crash on missing Content-Type header (null check)
- Fix SPA loading bar corrupting page via micromorph interference
  (remove bar before morph, use ephemeral DOM elements instead of
  persistent reference)
- Add stopLoading() cleanup in navigation finally block
---
 quartz/components/scripts/popover.inline.ts |  4 +++-
 quartz/components/scripts/spa.inline.ts     | 15 +++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts
index 433f57f..0d6ac1d 100644
--- a/quartz/components/scripts/popover.inline.ts
+++ b/quartz/components/scripts/popover.inline.ts
@@ -60,7 +60,9 @@ async function mouseEnterHandler(
   })
 
   if (!response) return
-  const [contentType] = response.headers.get("Content-Type")!.split(";")
+  const rawContentType = response.headers.get("Content-Type")
+  if (!rawContentType) return
+  const [contentType] = rawContentType.split(";")
   const [contentTypeCategory, typeInfo] = contentType.split("/")
 
   const popoverElement = document.createElement("div")
diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts
index 2898dc4..8c9cfec 100644
--- a/quartz/components/scripts/spa.inline.ts
+++ b/quartz/components/scripts/spa.inline.ts
@@ -44,18 +44,24 @@ const cleanupFns: Set<(...args: any[]) => void> = new Set()
 window.addCleanup = (fn) => cleanupFns.add(fn)
 
 function startLoading() {
+  document.querySelector(".navigation-progress")?.remove()
   const loadingBar = document.createElement("div")
   loadingBar.className = "navigation-progress"
   loadingBar.style.width = "0"
-  if (!document.body.contains(loadingBar)) {
-    document.body.appendChild(loadingBar)
-  }
+  document.body.prepend(loadingBar)
 
   setTimeout(() => {
     loadingBar.style.width = "80%"
   }, 100)
 }
 
+function stopLoading() {
+  const loadingBar = document.querySelector(".navigation-progress")
+  if (loadingBar) {
+    loadingBar.remove()
+  }
+}
+
 let isNavigating = false
 let p: DOMParser
 async function _navigate(url: URL, isBack: boolean = false) {
@@ -101,7 +107,7 @@ async function _navigate(url: URL, isBack: boolean = false) {
   announcer.dataset.persist = ""
   html.body.appendChild(announcer)
 
-  // morph body
+  document.querySelector(".navigation-progress")?.remove()
   micromorph(document.body, html.body)
 
   // scroll into place and add history
@@ -139,6 +145,7 @@ async function navigate(url: URL, isBack: boolean = false) {
     console.error(e)
     window.location.assign(url)
   } finally {
+    stopLoading()
     isNavigating = false
   }
 }