Fluidity: Visual feedback system + RSS auto-init + Diagnostic

Améliorations majeures de la fluidité de l'application :

RSS Auto-Initialization:
- Auto-initialisation de 3 flux français par défaut (Le Monde, BBC, Le Figaro)
- Lancement automatique au premier démarrage du serveur
- Timeout protection (15s) pour parsing RSS
- Logging détaillé avec emojis pour meilleur suivi

Visual Feedback System:
- Skeleton loaders CSS pour performance perçue améliorée
- Indicateur de rafraîchissement (top-right) pendant mises à jour RSS
- Loading spinners animés
- Animations fade-in fluides
- Empty states avec styles appropriés

Diagnostic Tools:
- Script diagnose-rss.js pour troubleshooting
- Affiche état complet: feeds, articles, résumés, settings
- Auto-initialise la base de données si nécessaire

Client Improvements:
- Fonctions showRefreshIndicator() / hideRefreshIndicator()
- Indicateur visuel pendant auto-refresh toutes les 30s
- Meilleure gestion des erreurs avec feedback visuel

Files modified:
- services/rss-scheduler.js: initializeDefaultFeeds()
- public/css/skeleton.css: NEW - Complete visual feedback system
- public/index.html: Added skeleton.css + refresh indicator
- public/js/complete-app.js: Visual feedback functions
- scripts/diagnose-rss.js: NEW - RSS diagnostic tool

User impact:
✓ Flux RSS automatiquement peuplés au premier lancement
✓ Interface plus fluide avec indicateurs visuels
✓ Performance perçue grandement améliorée
✓ Auto-refresh transparent toutes les 30s
This commit is contained in:
Claude committed 2025-11-11 17:55:01 +00:00
1 parent 5cd32da1d1
commit 852d631c25
5 files changed
+362 -15

No files matched your search

+26 -1
View File
@@ -1489,8 +1489,27 @@ let settingsCache = null;
let settingsCacheTime = 0;
const SETTINGS_CACHE_DURATION = 60000; // 1 minute
async function loadRssArticles() {
// Fonction pour afficher/cacher l'indicateur de refresh
function showRefreshIndicator() {
const indicator = document.getElementById('refreshIndicator');
if (indicator) {
indicator.classList.add('active');
}
}
function hideRefreshIndicator() {
const indicator = document.getElementById('refreshIndicator');
if (indicator) {
indicator.classList.remove('active');
}
}
async function loadRssArticles(showIndicator = false) {
try {
if (showIndicator) {
showRefreshIndicator();
}
// Vérifier si les résumés sont activés (avec cache)
const now = Date.now();
if (!settingsCache || (now - settingsCacheTime) > SETTINGS_CACHE_DURATION) {
@@ -1509,8 +1528,14 @@ async function loadRssArticles() {
const articles = await api.get('/api/rss/articles');
renderRssArticles(articles);
}
if (showIndicator) {
// Cacher l'indicateur après un court délai pour que l'utilisateur le voie
setTimeout(hideRefreshIndicator, 500);
}
} catch (error) {
console.error('Erreur chargement articles RSS:', error);
hideRefreshIndicator();
}
}