78 lines
2.1 KiB
JavaScript
78 lines
2.1 KiB
JavaScript
const INDICATOR_ID = 'loading-indicator'
|
|
const HIDDEN_CLASS = 'invisible'
|
|
const GRACE_PERIOD_MS = 500
|
|
const DEBOUNCE_MS = 200
|
|
|
|
let debounceTimeout = null
|
|
let historyRestoreGracePeriod = false
|
|
|
|
function getIndicator() {
|
|
return document.getElementById(INDICATOR_ID)
|
|
}
|
|
|
|
function show() {
|
|
const indicator = getIndicator()
|
|
if (indicator) {
|
|
indicator.classList.remove(HIDDEN_CLASS)
|
|
}
|
|
}
|
|
|
|
function hide() {
|
|
if (debounceTimeout) {
|
|
clearTimeout(debounceTimeout)
|
|
debounceTimeout = null
|
|
}
|
|
const indicator = getIndicator()
|
|
if (indicator) {
|
|
indicator.classList.add(HIDDEN_CLASS)
|
|
}
|
|
}
|
|
|
|
function handleBeforeRequest() {
|
|
// Ignore requests triggered during history restore grace period
|
|
if (true === historyRestoreGracePeriod) {
|
|
return
|
|
}
|
|
|
|
// Don't start a new debounce if already pending
|
|
if (debounceTimeout) {
|
|
return
|
|
}
|
|
|
|
// Show indicator after delay
|
|
debounceTimeout = setTimeout(() => {
|
|
show()
|
|
}, DEBOUNCE_MS)
|
|
}
|
|
|
|
function handleHistoryRestore() {
|
|
hide()
|
|
|
|
// Set grace period to ignore change events triggered by history restore
|
|
historyRestoreGracePeriod = true
|
|
setTimeout(() => {
|
|
historyRestoreGracePeriod = false
|
|
}, GRACE_PERIOD_MS)
|
|
}
|
|
|
|
function handleTimeout() {
|
|
hide()
|
|
alert('Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut. Falls das Problem weiterhin besteht, kontaktieren Sie bitte unseren Support.')
|
|
}
|
|
|
|
function handleBeforeHistorySave() {
|
|
// Hide indicator before HTMX saves the page to history cache
|
|
hide()
|
|
}
|
|
|
|
// Initialize event listeners
|
|
document.body.addEventListener('htmx:beforeRequest', handleBeforeRequest)
|
|
document.body.addEventListener('htmx:afterRequest', hide)
|
|
document.body.addEventListener('htmx:timeout', handleTimeout)
|
|
document.body.addEventListener('htmx:historyRestore', handleHistoryRestore)
|
|
document.body.addEventListener('htmx:sendError', hide)
|
|
document.body.addEventListener('htmx:responseError', hide)
|
|
document.body.addEventListener('htmx:beforeHistorySave', handleBeforeHistorySave)
|
|
|
|
window.addEventListener('pageshow', hide)
|
|
window.addEventListener('popstate', handleHistoryRestore) |