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
This commit is contained in:
saberzero1
2026-05-24 17:10:03 +02:00
parent 7f00400ad2
commit 0d9b356046
2 changed files with 14 additions and 5 deletions

View File

@@ -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")

View File

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