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
|
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 [contentTypeCategory, typeInfo] = contentType.split("/")
|
||||||
|
|
||||||
const popoverElement = document.createElement("div")
|
const popoverElement = document.createElement("div")
|
||||||
|
|||||||
@@ -44,18 +44,24 @@ const cleanupFns: Set<(...args: any[]) => void> = new Set()
|
|||||||
window.addCleanup = (fn) => cleanupFns.add(fn)
|
window.addCleanup = (fn) => cleanupFns.add(fn)
|
||||||
|
|
||||||
function startLoading() {
|
function startLoading() {
|
||||||
|
document.querySelector(".navigation-progress")?.remove()
|
||||||
const loadingBar = document.createElement("div")
|
const loadingBar = document.createElement("div")
|
||||||
loadingBar.className = "navigation-progress"
|
loadingBar.className = "navigation-progress"
|
||||||
loadingBar.style.width = "0"
|
loadingBar.style.width = "0"
|
||||||
if (!document.body.contains(loadingBar)) {
|
document.body.prepend(loadingBar)
|
||||||
document.body.appendChild(loadingBar)
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
loadingBar.style.width = "80%"
|
loadingBar.style.width = "80%"
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function stopLoading() {
|
||||||
|
const loadingBar = document.querySelector(".navigation-progress")
|
||||||
|
if (loadingBar) {
|
||||||
|
loadingBar.remove()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
let isNavigating = false
|
let isNavigating = false
|
||||||
let p: DOMParser
|
let p: DOMParser
|
||||||
async function _navigate(url: URL, isBack: boolean = false) {
|
async function _navigate(url: URL, isBack: boolean = false) {
|
||||||
@@ -101,7 +107,7 @@ async function _navigate(url: URL, isBack: boolean = false) {
|
|||||||
announcer.dataset.persist = ""
|
announcer.dataset.persist = ""
|
||||||
html.body.appendChild(announcer)
|
html.body.appendChild(announcer)
|
||||||
|
|
||||||
// morph body
|
document.querySelector(".navigation-progress")?.remove()
|
||||||
micromorph(document.body, html.body)
|
micromorph(document.body, html.body)
|
||||||
|
|
||||||
// scroll into place and add history
|
// scroll into place and add history
|
||||||
@@ -139,6 +145,7 @@ async function navigate(url: URL, isBack: boolean = false) {
|
|||||||
console.error(e)
|
console.error(e)
|
||||||
window.location.assign(url)
|
window.location.assign(url)
|
||||||
} finally {
|
} finally {
|
||||||
|
stopLoading()
|
||||||
isNavigating = false
|
isNavigating = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user