vers. 2.2.0

css/animation.css

@@ -3,6 +3,71 @@
    ======================================== */
 
 
+/* ========================================
+   LOADING OVERLAY
+   ======================================== */
+
+/* Overlay di caricamento a schermo intero */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(16, 25, 75, 0.95);
+    backdrop-filter: blur(8px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+/* Quando l'overlay è attivo */
+.loading-overlay.active {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Contenuto dell'overlay */
+.loading-content {
+    text-align: center;
+    color: white;
+}
+
+/* Spinner grande per il loading overlay */
+.spinner-large {
+    width: 60px;
+    height: 60px;
+    border: 5px solid rgba(255, 255, 255, 0.2);
+    border-top-color: #f7b835;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin: 0 auto 20px;
+}
+
+/* Testo di caricamento */
+.loading-text {
+    font-size: 1.1rem;
+    font-weight: 500;
+    color: white;
+    margin: 0;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Animazione pulse per il testo */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+
 /* Transizione per i link di navigazione */
 .navLink,
 .nav-link,

data/changelog.xml

@@ -2,7 +2,15 @@
 
 <changelog>
 
-<version>
+    <version>
+        <number>2.2.0</number>
+        <logs>
+            <log>E' stato reintrodotto la schermata di caricamento ad ogni selezione di ogni pagina dell'applicazione</log>
+            <log>Correzione e bugfix di problematiche varie.</log>
+        </logs>
+    </version>
+
+    <version>
         <number>2.1.4</number>
         <logs>
             <log>Corretto la visione verticale sui dispositivi mobili</log>

data/radio.xml

@@ -24,7 +24,7 @@
     <contentplayer>https://www.radiocitta105.it/contentrpigplay</contentplayer>
   </station>
 
-  <station>
+  <!-- <station>
     <id>3</id>
     <name>RadioAI</name>
     <slogan>Solo musica AI - Powered by RDL </slogan>
@@ -33,7 +33,7 @@
     <stream>https://srvone.radio.asvhosting.com/listen/radioai/radio.mp3</stream>
     <streamhls>https://srvone.radio.asvhosting.com/hls/radioai/live.m3u8</streamhls>
     <contentplayer></contentplayer>
-  </station>
+  </station> -->
   
   <!-- <station>
     <id>4</id>
@@ -46,7 +46,7 @@
     <contentplayer></contentplayer>
   </station> -->
 
-  <station>
+  <!-- <station>
     <id>5</id>
     <name>Radio People Italy</name>
     <slogan>La radio della Gente</slogan>
@@ -55,6 +55,6 @@
     <stream></stream>
     <streamhls></streamhls>
     <contentplayer>https://www.rpigroup.it/radiopeopleitaly_contentrpigroup/</contentplayer>
-  </station>
+  </station> -->
 
 </radio>

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');
             };
 

pages/mobile.php

@@ -93,6 +93,14 @@
     ?>
 </main>
 
+<!-- Loading Overlay -->
+<div id="loadingOverlay" class="loading-overlay">
+    <div class="loading-content">
+        <div class="spinner-large"></div>
+        <p class="loading-text">Caricamento...</p>
+    </div>
+</div>
+
 <div class="footer">
     <div class="menu-section">
         <a href="<?php echo $base_path; ?>/page/termini-condizioni" data-page="page/termini-condizioni" class="navLink">Termini e Condizioni</a> •