Update templates/index.html

templates/index.html

@@ -36,9 +36,9 @@
         {% for category, articles in categorized_articles.items() %}
         <div class="category-section">
             <div class="category-title">{{ category }}</div>
-            <div class="tiles">
+            <div class="tiles" id="category-{{ category }}">
                 {% for article in articles %}
-                <div class="article-tile">
+                <div class="article-tile" data-published="{{ article.published }}">
                     {% if article.image != "svg" %}
                     <img src="{{ article.image }}" alt="Article Image">
                     {% else %}
@@ -66,7 +66,23 @@
                 .then(response => response.json())
                 .then(data => {
                     if (data.status === "complete") {
-                        location.reload();  // Refresh page when loading is done
+                        // Soft refresh: fetch updated articles without full reload
+                        fetch('/')
+                            .then(response => response.text())
+                            .then(html => {
+                                const parser = new DOMParser();
+                                const doc = parser.parseFromString(html, 'text/html');
+                                const newCategories = doc.querySelectorAll('.category-section');
+                                newCategories.forEach(newCat => {
+                                    const catId = newCat.querySelector('.tiles').id;
+                                    const existingCat = document.getElementById(catId);
+                                    if (existingCat) {
+                                        existingCat.innerHTML = newCat.querySelector('.tiles').innerHTML;
+                                    }
+                                });
+                                document.querySelector('.loading-message').style.display = 'none';
+                            })
+                            .catch(error => console.error('Error updating articles:', error));
                     } else {
                         setTimeout(checkLoadingStatus, 2000);  // Check every 2 seconds
                     }
@@ -76,6 +92,7 @@
                     setTimeout(checkLoadingStatus, 2000);  // Retry on error
                 });
         }
+
         document.addEventListener('DOMContentLoaded', () => {
             checkLoadingStatus();
         });