up

templates/assets/js/index.js

@@ -86,3 +86,20 @@ document.addEventListener("htmx:afterOnLoad", function (event) {
  // console.log("Réponse du serveur :", event.detail.xhr.responseText);
 });
 
+// static/js/spinner.js
+// Écoute tous les événements HTMX et affiche/masque le spinner global
+document.body.addEventListener('htmx:send', () => {
+  const s = document.getElementById('loading-spinner');
+  if (s) s.style.display = 'block';
+});
+document.body.addEventListener('htmx:afterOnLoad', () => {
+  const s = document.getElementById('loading-spinner');
+  if (s) s.style.display = 'none';
+});
+// En cas d’erreur réseau
+document.body.addEventListener('htmx:afterRequest', (evt) => {
+  if (evt.detail.xhr.status >= 400) {
+    const s = document.getElementById('loading-spinner');
+    if (s) s.style.display = 'none';
+  }
+});

templates/dashboard.pages.tmpl

@@ -55,6 +55,9 @@
           </aside>
         </div>
         <div class="column is-10">
+            <div id="loading-spinner" class="has-text-centered" style="display:none; position: absolute; top: 1rem; right: 1rem; z-index: 50;">
+    <button class="button is-loading is-white is-large" aria-label="Loading"></button>
+  </div>
           <div id="content">
             <!-- Le contenu spécifique sera chargé ici -->
           </div>