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:
@@ -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")
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user