feat: Animation de progression pendant la déconnexion (v1.2.7)

- Ajout d'un spinner circulaire animé pendant la déconnexion
- Rotation fluide avec design violet cohérent
- Textes dynamiques "Déconnexion en cours..." pendant le processus
- Boutons masqués pour éviter les doubles clics
- Transitions en fondu entre icône et spinner
- Délais optimisés pour une expérience fluide

docs/changelog.md

@@ -1,5 +1,27 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.7] - 2025-09-04
+
+### Ajouté
+- **Animation de déconnexion** : Feedback visuel pendant le processus
+  - Spinner circulaire animé avec rotation fluide (1 tour/seconde)
+  - Design cohérent avec le thème violet de l'application
+  - Ombre subtile pour un effet de profondeur
+  - Transition en fondu entre l'icône et le spinner
+
+### Modifié
+- **Modal de déconnexion** : États visuels dynamiques
+  - Textes mis à jour pendant la déconnexion ("Déconnexion en cours...", "Veuillez patienter")
+  - Boutons masqués pendant le processus pour éviter les doubles clics
+  - Délais optimisés : 300ms avant + 500ms après pour une transition fluide
+  - Restauration automatique de l'état initial après déconnexion
+
+### Technique
+- Nouvelles fonctions showLogoutProgress() et hideLogoutProgress()
+- Animation CSS @keyframes spin pour la rotation du spinner
+- Gestion asynchrone avec Promise pour les délais d'animation
+- Structure HTML modifiée avec IDs pour contrôle dynamique
+
 ## [1.2.6] - 2025-09-04
 
 ### Ajouté

index.html

@@ -121,13 +121,16 @@
     <!-- Modal de confirmation de déconnexion -->
     <div id="logoutModal" class="modal-overlay">
       <div class="logout-modal">
-        <div class="logout-modal-icon">
+        <div class="logout-modal-icon" id="logoutIcon">
           <span>👋</span>
         </div>
-        <h2>Déconnexion</h2>
+        <div class="logout-spinner" id="logoutSpinner" style="display: none;">
-        <p>Êtes-vous sûr de vouloir vous déconnecter ?</p>
+          <div class="spinner-ring"></div>
-        <p class="logout-modal-subtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
+        </div>
-        <div class="logout-modal-buttons">
+        <h2 id="logoutTitle">Déconnexion</h2>
+        <p id="logoutText">Êtes-vous sûr de vouloir vous déconnecter ?</p>
+        <p class="logout-modal-subtitle" id="logoutSubtitle">Votre session sera fermée et vous devrez vous reconnecter.</p>
+        <div class="logout-modal-buttons" id="logoutButtons">
           <button id="cancelLogoutBtn" class="btn-modal-cancel">Annuler</button>
           <button id="confirmLogoutBtn" class="btn-modal-confirm">Se déconnecter</button>
         </div>

renderer.js

@@ -208,8 +208,21 @@ function showLogoutModal() {
     };
     
     const handleConfirm = async () => {
-        modal.classList.remove('active');
+        // Afficher l'animation de déconnexion
+        showLogoutProgress();
+        
+        // Attendre un peu pour que l'animation soit visible
+        await new Promise(resolve => setTimeout(resolve, 300));
+        
+        // Effectuer la déconnexion
         await ipcRenderer.invoke('logout');
+        
+        // Attendre encore un peu pour une transition fluide
+        await new Promise(resolve => setTimeout(resolve, 500));
+        
+        // Réinitialiser et fermer
+        modal.classList.remove('active');
+        hideLogoutProgress();
         currentAgent = null;
         currentCentres = [];
         activeCenter = null;
@@ -240,6 +253,47 @@ function showLogoutModal() {
     document.addEventListener('keydown', handleEscape);
 }
 
+// Afficher l'animation de progression de déconnexion
+function showLogoutProgress() {
+    const modal = document.querySelector('.logout-modal');
+    const icon = document.getElementById('logoutIcon');
+    const spinner = document.getElementById('logoutSpinner');
+    const title = document.getElementById('logoutTitle');
+    const text = document.getElementById('logoutText');
+    const subtitle = document.getElementById('logoutSubtitle');
+    const buttons = document.getElementById('logoutButtons');
+    
+    // Masquer l'icône et afficher le spinner
+    icon.style.display = 'none';
+    spinner.style.display = 'block';
+    
+    // Mettre à jour les textes
+    title.textContent = 'Déconnexion en cours...';
+    text.textContent = 'Veuillez patienter';
+    subtitle.textContent = 'Fermeture de votre session...';
+    
+    // Masquer les boutons
+    buttons.style.display = 'none';
+}
+
+// Masquer l'animation de progression de déconnexion
+function hideLogoutProgress() {
+    const icon = document.getElementById('logoutIcon');
+    const spinner = document.getElementById('logoutSpinner');
+    const title = document.getElementById('logoutTitle');
+    const text = document.getElementById('logoutText');
+    const subtitle = document.getElementById('logoutSubtitle');
+    const buttons = document.getElementById('logoutButtons');
+    
+    // Restaurer l'état initial
+    icon.style.display = 'flex';
+    spinner.style.display = 'none';
+    title.textContent = 'Déconnexion';
+    text.textContent = 'Êtes-vous sûr de vouloir vous déconnecter ?';
+    subtitle.textContent = 'Votre session sera fermée et vous devrez vous reconnecter.';
+    buttons.style.display = 'flex';
+}
+
 // === GESTION DES PAGES ===
 function showLoginPage() {
     document.getElementById('loginPage').classList.add('active');

styles-modern.css

@@ -770,6 +770,47 @@ body {
     animation: pulse 2s infinite;
 }
 
+/* Spinner de déconnexion */
+.logout-spinner {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 20px;
+    position: relative;
+}
+
+.spinner-ring {
+    width: 80px;
+    height: 80px;
+    border: 8px solid #f3f4f6;
+    border-top: 8px solid #667eea;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.2);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.logout-modal.processing .logout-modal-icon {
+    animation: fadeOut 0.3s forwards;
+}
+
+.logout-modal.processing .logout-spinner {
+    animation: fadeIn 0.3s forwards;
+}
+
+@keyframes fadeOut {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.8); }
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: scale(0.8); }
+    to { opacity: 1; transform: scale(1); }
+}
+
 .logout-modal h2 {
     margin: 0 0 15px 0;
     color: #333;