feat: implement screendesign

assets/controllers/loading_controller.js

@@ -13,11 +13,17 @@ export default class extends Controller {
         this.boundHandleBeforeRequest = this.handleBeforeRequest.bind(this)
         this.boundHandleAfterRequest = this.handleAfterRequest.bind(this)
         this.boundHandleTimeout = this.handleTimeout.bind(this)
+        this.boundHandlePageShow = this.handlePageShow.bind(this)
+        this.boundHandleHistoryRestore = this.handleHistoryRestore.bind(this)
 
         // Listen to HTMX events
         document.body.addEventListener('htmx:beforeRequest', this.boundHandleBeforeRequest)
         document.body.addEventListener('htmx:afterRequest', this.boundHandleAfterRequest)
         document.body.addEventListener('htmx:timeout', this.boundHandleTimeout)
+        document.body.addEventListener('htmx:historyRestore', this.boundHandleHistoryRestore)
+
+        // Listen for browser back/forward navigation
+        window.addEventListener('pageshow', this.boundHandlePageShow)
     }
 
     disconnect() {
@@ -25,6 +31,8 @@ export default class extends Controller {
         document.body.removeEventListener('htmx:beforeRequest', this.boundHandleBeforeRequest)
         document.body.removeEventListener('htmx:afterRequest', this.boundHandleAfterRequest)
         document.body.removeEventListener('htmx:timeout', this.boundHandleTimeout)
+        document.body.removeEventListener('htmx:historyRestore', this.boundHandleHistoryRestore)
+        window.removeEventListener('pageshow', this.boundHandlePageShow)
 
         // Clear any pending timeout
         if (this.debounceTimeout) {
@@ -76,6 +84,18 @@ export default class extends Controller {
         alert('Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut. Falls das Problem weiterhin besteht, kontaktieren Sie bitte unseren Support.')
     }
 
+    handlePageShow(event) {
+        // event.persisted is true when page is restored from bfcache (back/forward navigation)
+        if (event.persisted) {
+            this.hide()
+        }
+    }
+
+    handleHistoryRestore(event) {
+        // HTMX history restore - hide loading indicator
+        this.hide()
+    }
+
     show() {
         this.isVisible = true
         this.indicatorTarget.classList.remove(this.hiddenClass)