feat: improved timeout handling for api client

assets/controllers/loading_controller.js

@@ -12,16 +12,19 @@ export default class extends Controller {
         // Bind event handlers to preserve context
         this.boundHandleBeforeRequest = this.handleBeforeRequest.bind(this)
         this.boundHandleAfterRequest = this.handleAfterRequest.bind(this)
+        this.boundHandleTimeout = this.handleTimeout.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)
     }
 
     disconnect() {
         // Clean up event listeners
         document.body.removeEventListener('htmx:beforeRequest', this.boundHandleBeforeRequest)
         document.body.removeEventListener('htmx:afterRequest', this.boundHandleAfterRequest)
+        document.body.removeEventListener('htmx:timeout', this.boundHandleTimeout)
 
         // Clear any pending timeout
         if (this.debounceTimeout) {
@@ -65,6 +68,14 @@ export default class extends Controller {
         this.hide()
     }
 
+    handleTimeout(event) {
+        // Hide loading indicator
+        this.hide()
+
+        // Show user-friendly error message
+        alert('Die Anfrage hat zu lange gedauert. Bitte versuchen Sie es erneut. Falls das Problem weiterhin besteht, kontaktieren Sie bitte unseren Support.')
+    }
+
     show() {
         this.isVisible = true
         this.indicatorTarget.classList.remove(this.hiddenClass)