feat: implement hx-boost for reliable loading indication

assets/app.js

@@ -5,8 +5,8 @@ import htmx from 'htmx.org'
 
 window.htmx = htmx
 htmx.config.includeIndicatorStyles = false
-htmx.config.historyEnabled = false
-htmx.config.historyCacheSize = 0
+htmx.config.historyEnabled = true
+htmx.config.historyCacheSize = 10
 htmx.config.allowScriptTags = false
 htmx.config.withCredentials = true
 htmx.config.selfRequestsOnly = false

assets/controllers/loading_controller.js

@@ -4,9 +4,14 @@ export default class extends Controller {
 
     static targets = ['indicator']
     static classes = ['hidden']
+    static values = {
+        visible: {
+            type: Boolean,
+            default: false
+        }
+    }
 
     connect() {
-        this.isVisible = false
         this.debounceTimeout = null
 
         // Bind event handlers to preserve context
@@ -40,9 +45,9 @@ export default class extends Controller {
         }
     }
 
-    handleBeforeRequest(event) {
+    handleBeforeRequest() {
         // Don't start a new debounce if already visible
-        if (this.isVisible) {
+        if (true === this.visibleValue) {
             return
         }
 
@@ -52,31 +57,17 @@ export default class extends Controller {
         }, 200)
     }
 
-    handleAfterRequest(event) {
+    handleAfterRequest() {
         // Clear debounce timer if request completes before 200ms
         if (this.debounceTimeout) {
             clearTimeout(this.debounceTimeout)
             this.debounceTimeout = null
         }
 
-        // Check if response contains HX-Redirect header
-        const xhr = event.detail.xhr
-        const hxRedirect = xhr.getResponseHeader('HX-Redirect')
-
-        // Keep loading indicator visible if redirecting
-        if (hxRedirect) {
-            // Ensure indicator is visible during redirect
-            if (!this.isVisible) {
-                this.show()
-            }
-            return
-        }
-
-        // Hide indicator if it's visible
         this.hide()
     }
 
-    handleTimeout(event) {
+    handleTimeout() {
         // Hide loading indicator
         this.hide()
 
@@ -86,23 +77,23 @@ export default class extends Controller {
 
     handlePageShow(event) {
         // event.persisted is true when page is restored from bfcache (back/forward navigation)
-        if (event.persisted) {
+        if (true === event.persisted) {
             this.hide()
         }
     }
 
-    handleHistoryRestore(event) {
+    handleHistoryRestore() {
         // HTMX history restore - hide loading indicator
         this.hide()
     }
 
     show() {
-        this.isVisible = true
+        this.visibleValue = true
         this.indicatorTarget.classList.remove(this.hiddenClass)
     }
 
     hide() {
-        this.isVisible = false
+        this.visibleValue = false
         this.indicatorTarget.classList.add(this.hiddenClass)
     }
 }