Update templates/index.html

templates/index.html

@@ -96,7 +96,7 @@
             margin-top: 10px;
         }
         #loading {
-            display: none; /* Initially hidden, shown during new feed loading */
+            display: none; /* Initially hidden, shown during new feed loading or search */
             position: fixed;
             top: 0;
             left: 0;
@@ -126,6 +126,7 @@
             margin-top: 20px;
             color: #2c3e50;
             font-size: 1em;
+            display: none; /* Hidden by default, shown when loading new feeds */
         }
     </style>
 </head>
@@ -139,6 +140,41 @@
     </div>
     {% if loading_new_feeds %}
     <div class="loading-message">Loading new RSS feeds in the background...</div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loading = document.getElementById('loading');
+            const form = document.getElementById('searchForm');
+
+            form.addEventListener('submit', () => {
+                loading.style.display = 'block';
+            });
+
+            // Poll until new feeds are loaded
+            function checkNewFeeds() {
+                fetch('/check_feeds')
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.status === "loaded") {
+                            location.reload(); // Refresh to show new articles
+                            document.querySelector('.loading-message').style.display = 'none';
+                        } else if (data.status === "error") {
+                            console.error('Error loading new feeds:', data.message);
+                            loading.style.display = 'none';
+                            alert('Failed to load new RSS feeds. Please try again.');
+                        } else {
+                            setTimeout(checkNewFeeds, 1000); // Check every second
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error checking new feeds:', error);
+                        loading.style.display = 'none';
+                        alert('Network error while loading new feeds. Please try again.');
+                    });
+            }
+            checkNewFeeds();
+            document.querySelector('.loading-message').style.display = 'block';
+        });
+    </script>
     {% endif %}
     {% for category, articles in categorized_articles.items() %}
     <div class="category-section">
@@ -164,41 +200,5 @@
         </div>
     </div>
     {% endfor %}
-
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const form = document.getElementById('searchForm');
-            const loading = document.getElementById('loading');
-            
-            form.addEventListener('submit', () => {
-                loading.style.display = 'block';
-            });
-
-            // Poll until new feeds are loaded (if loading_new_feeds is True)
-            if ("{{ loading_new_feeds }}" === "True") {
-                function checkNewFeeds() {
-                    fetch('/check_feeds')
-                        .then(response => response.json())
-                        .then(data => {
-                            if (data.status === "loaded") {
-                                location.reload(); // Refresh to show new articles
-                            } else if (data.status === "error") {
-                                console.error('Error loading new feeds:', data.message);
-                                loading.style.display = 'none';
-                                alert('Failed to load new RSS feeds. Please try again.');
-                            } else {
-                                setTimeout(checkNewFeeds, 1000); // Check every second
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error checking new feeds:', error);
-                            loading.style.display = 'none';
-                            alert('Network error while loading new feeds. Please try again.');
-                        });
-                }
-                checkNewFeeds();
-            }
-        });
-    </script>
 </body>
 </html>