vers. 2.2.0

js/app.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let hlsInstance = null;
     let currentXHR = null;
     let isLoading = false;
+    let loadingOverlay = null;
 
     // WeakMap per tracciare i listener degli elementi
     const linkListeners = new WeakMap();
@@ -94,6 +95,27 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     }
 
+    /**
+     * Mostra l'overlay di caricamento
+     */
+    function showLoadingOverlay() {
+        if (!loadingOverlay) {
+            loadingOverlay = document.getElementById('loadingOverlay');
+        }
+        if (loadingOverlay) {
+            loadingOverlay.classList.add('active');
+        }
+    }
+
+    /**
+     * Nasconde l'overlay di caricamento
+     */
+    function hideLoadingOverlay() {
+        if (loadingOverlay) {
+            loadingOverlay.classList.remove('active');
+        }
+    }
+
     /**
      * Caricamento pagina con protezione da race condition
      */
@@ -120,6 +142,9 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
 
+        // Mostra l'overlay di caricamento
+        showLoadingOverlay();
+
         // Animazione fade out
         contentContainer.classList.remove('fade-in');
         contentContainer.classList.add('fade-out');
@@ -138,6 +163,9 @@ document.addEventListener('DOMContentLoaded', function () {
                 if (this.status === 200) {
                     contentContainer.innerHTML = this.responseText;
 
+                    // Nascondi overlay di caricamento
+                    hideLoadingOverlay();
+
                     // Animazione fade in
                     contentContainer.classList.remove('fade-out');
                     contentContainer.classList.add('fade-in');
@@ -175,6 +203,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
                     console.log('Pagina caricata:', page);
                 } else {
+                    hideLoadingOverlay();
                     contentContainer.innerHTML = '<div class="content-page"><h2>Errore</h2><p>Impossibile caricare la pagina. Codice errore: ' + this.status + '</p></div>';
                     contentContainer.classList.remove('fade-out');
                     contentContainer.classList.add('fade-in');
@@ -185,6 +214,7 @@ document.addEventListener('DOMContentLoaded', function () {
             currentXHR.onerror = function () {
                 isLoading = false;
                 currentXHR = null;
+                hideLoadingOverlay();
                 contentContainer.innerHTML = '<div class="content-page"><h2>Errore di connessione</h2><p>Controlla la tua connessione internet e riprova.</p></div>';
                 contentContainer.classList.remove('fade-out');
                 contentContainer.classList.add('fade-in');
@@ -194,6 +224,7 @@ document.addEventListener('DOMContentLoaded', function () {
             currentXHR.onabort = function () {
                 isLoading = false;
                 currentXHR = null;
+                hideLoadingOverlay();
                 console.log('Richiesta XHR annullata');
             };