Update templates/index.html

templates/index.html

@@ -19,8 +19,8 @@
         .description { color: #555; font-size: 0.9em; height: 150px; overflow-y: clip; }
         .published { font-size: 0.8em; color: #95a5a6; }
         .no-articles { text-align: center; color: #2c3e50; margin-top: 20px; }
-        .loading-message { text-align: center; color: #3498db; margin: 10px 0; }
-        .loading-spinner { display: none; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; margin-left: 10px; }
+        .loading-container { text-align: center; margin: 10px 0; }
+        .loading-spinner { display: inline-block; border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
@@ -33,12 +33,14 @@
         <button id="backButton" style="display: none; margin-top: 10px;">Back to Main</button>
     </div>
     {% if loading %}
-        <div class="loading-message">Fetching new RSS feeds in the background...</div>
+        <div class="loading-container" id="loadingContainer">
+            <span class="loading-spinner"></span>
+        </div>
     {% endif %}
     {% if has_articles %}
         {% for category, articles in categorized_articles.items() %}
         <div class="category-section">
-            <div class="category-title" onclick="toggleCategory('{{ category }}')">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}"></span></div>
+            <div class="category-title" onclick="toggleCategory('{{ category }}')">{{ category }} <span class="loading-spinner" id="spinner-{{ category }}" style="display: none;"></span></div>
             <div class="tiles" id="category-{{ category }}" data-last-update="0">
                 {% for article in articles %}
                 <div class="article-tile" data-published="{{ article.published }}" data-id="{{ loop.index }}">
@@ -72,12 +74,10 @@
             const tilesDiv = document.getElementById(`category-${category}`);
             const allTilesDiv = document.getElementById(`all-${category}`);
             if (expandedCategories.has(category)) {
-                // Collapse: show only 10 articles
                 tilesDiv.style.display = 'grid';
                 allTilesDiv.style.display = 'none';
                 expandedCategories.delete(category);
             } else {
-                // Expand: load all articles
                 spinner.style.display = 'inline-block';
                 fetch(`/get_all_articles/${category}`)
                     .then(response => response.json())
@@ -177,7 +177,8 @@
                                 }
                             }
                         }
-                        document.querySelector('.loading-message').style.display = 'none';
+                        const loadingContainer = document.getElementById('loadingContainer');
+                        if (loadingContainer) loadingContainer.style.display = 'none';
                     }
                     setTimeout(updateArticles, 2000);
                 })
@@ -187,6 +188,22 @@
                 });
         }
 
+        function checkLoadingStatus() {
+            fetch('/check_loading')
+                .then(response => response.json())
+                .then(data => {
+                    if (data.status === 'complete') {
+                        window.location.reload(); // Refresh the page when loading is complete
+                    } else {
+                        setTimeout(checkLoadingStatus, 2000); // Check again after 2 seconds
+                    }
+                })
+                .catch(error => {
+                    console.error('Error checking loading status:', error);
+                    setTimeout(checkLoadingStatus, 2000);
+                });
+        }
+
         document.addEventListener('DOMContentLoaded', () => {
             const tiles = document.querySelectorAll('.tiles');
             tiles.forEach(tile => {
@@ -194,6 +211,11 @@
             });
             updateArticles();
 
+            // Start checking loading status if loading is active
+            if (document.getElementById('loadingContainer')) {
+                checkLoadingStatus();
+            }
+
             const form = document.getElementById('searchForm');
             const backButton = document.getElementById('backButton');
             form.addEventListener('submit', (event) => {
@@ -214,7 +236,7 @@
 
                         const categoriesHtml = Object.entries(data.categorized_articles).map(([cat, articles]) => `
                             <div class="category-section">
-                                <div class="category-title" onclick="toggleCategory('${cat}')">${cat} <span class="loading-spinner" id="spinner-${cat}"></span></div>
+                                <div class="category-title" onclick="toggleCategory('${cat}')">${cat} <span class="loading-spinner" id="spinner-${cat}" style="display: none;"></span></div>
                                 <div class="tiles" id="category-${cat}" data-last-update="0">
                                     ${articles.map((article, index) => `
                                         <div class="article-tile" data-published="${article.published}" data-id="${index}">