I wanted to add nprogress to a demo application and show the progress bar only on boosted requests. My first idea was to do it like this:
window.addEventListener('htmx:beforeRequest', (event) => {
if(event.detail.boosted) {
console.log(event);
NProgress.start();
}
});
window.addEventListener('htmx:afterRequest', (event) => {
if(event.detail.boosted) {
console.log("Done")
console.log(event)
NProgress.done();
}
});
However, when going back in history the NProgressBar gets shown again (see video) even though I wouldn’t expect it to show. I also created a demo Laravel application here.
Thank you in advance.