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

+7
View File
@@ -14,6 +14,7 @@
<link rel="stylesheet" href="/css/layout.css">
<link rel="stylesheet" href="/css/components.css">
<link rel="stylesheet" href="/css/animations.css">
<link rel="stylesheet" href="/css/skeleton.css">
</head>
<body>
<!-- Header -->
@@ -295,6 +296,12 @@
<input type="file" id="imageInput" accept="image/*" style="display: none;">
<input type="file" id="fileInput" style="display: none;">
<!-- Refresh indicator -->
<div class="refresh-indicator" id="refreshIndicator">
<div class="loading-spinner"></div>
<span>Mise à jour...</span>
</div>
<!-- JavaScript -->
<script src="/js/complete-app.js"></script>
</body>