Spaces:

broadfield-dev
/

RSS_News

Sleeping

App Files Files Community

broadfield-dev commited on Feb 22

Commit

1969085

verified ·

1 Parent(s): 36f2507

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +16 -8

templates/index.html CHANGED Viewed

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="asság:width=device-width, initial-scale=1.0">
     <title>News Feed Hub</title>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
@@ -32,11 +32,9 @@
         </form>
         <button id="backButton" style="display: none; margin-top: 10px;">Back to Main</button>
     </div>
-    {% if loading %}
-        <div class="loading-container" id="loadingContainer">
-            <span class="loading-spinner"></span>
-        </div>
-    {% endif %}
     {% if has_articles %}
         <div id="articlesContainer">
             {% for category, articles in categorized_articles.items() %}
@@ -181,6 +179,9 @@
                                 }
                             }
                         }
                     }
                     setTimeout(updateArticles, 2000);
                 })
@@ -214,10 +215,17 @@
             tiles.forEach(tile => {
                 lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
             });
             updateArticles();
             // Start checking loading status if loading is active
-            if (document.getElementById('loadingContainer')) {
                 checkLoadingStatus();
             }
@@ -277,4 +285,4 @@
         });
     </script>
 </body>
-</html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>News Feed Hub</title>
     <style>
         body { font-family: Arial, sans-serif; margin: 20px; background-color: #f5f5f5; color: #333; }
         </form>
         <button id="backButton" style="display: none; margin-top: 10px;">Back to Main</button>
     </div>
+    <div class="loading-container" id="loadingContainer" {% if not loading %}style="display: none;"{% endif %}>
+        <span class="loading-spinner"></span>
+    </div>
     {% if has_articles %}
         <div id="articlesContainer">
             {% for category, articles in categorized_articles.items() %}
                                 }
                             }
                         }
+                        // Hide spinner once articles are updated
+                        const loadingContainer = document.getElementById('loadingContainer');
+                        if (loadingContainer) loadingContainer.style.display = 'none';
                     }
                     setTimeout(updateArticles, 2000);
                 })
             tiles.forEach(tile => {
                 lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
             });
+            // Show spinner initially if loading
+            const loadingContainer = document.getElementById('loadingContainer');
+            if (loadingContainer && !document.getElementById('articlesContainer')) {
+                loadingContainer.style.display = 'block';
+            }
             updateArticles();
             // Start checking loading status if loading is active
+            if (loadingContainer) {
                 checkLoadingStatus();
             }
         });
     </script>
 </body>
+</html>