loader delete message

HE-Arc · Dec 16, 2024 · 08dc972 · 08dc972
1 parent c57ff13
commit 08dc972
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 10 deletions.
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -21,16 +21,17 @@
     background-color: #415A77;
 }
 
-.btn-inactive{
+.btn-inactive {
     background-color: #778DA9;
 }
 
-.btn-active{
+.btn-active {
     background-color: #1B263B;
 }
 
 .scrollbar-hide::-webkit-scrollbar {
-    display: none; /* Masque la barre de défilement */
+    display: none;
+    /* Masque la barre de défilement */
 }
 
 .tertiary-background-app {
@@ -46,4 +47,23 @@
     width: 50px;
     height: 50px;
     border-radius: 50%;
-  } 
+}
+
+.spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/resources/views/dashboard.blade.php b/resources/views/dashboard.blade.php
@@ -118,11 +118,14 @@ function loadChat(chatId, discussionName, discussionPicture, newOpening = true)
                 // Ajout de la poubelle pour les messages de l'utilisateur
                 if (isCurrentUser) {
                     messageContent += `
-                        <button onclick="deleteMessage(${message.id}, ${chatId})"
-                            class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
-                            title="Supprimer le message">
-                            🗑️
-                        </button>`;
+                    <button onclick="deleteMessageWithLoader(${message.id}, ${chatId})"
+                        class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
+                        title="Supprimer le message">
+                        🗑️
+                    </button>
+                    <span id="loader-${message.id}" style="display:none;">
+                        <div class="spinner"></div> 
+                    </span>`;
                 }
 
                 // Ajouter le contenu au conteneur du message
@@ -284,7 +287,6 @@ function deleteMessage(messageId, discussionId) {
         return response.json();
     })
     .then(data => {
-        alert(data.message || "Message supprimé.");
         const messageElement = document.getElementById(`message-div-${messageId}`);
         if (messageElement) {
             messageElement.remove();
@@ -297,5 +299,24 @@ function deleteMessage(messageId, discussionId) {
     });
 }
 
+function deleteMessageWithLoader(messageId, chatId) {
+    const loader = document.getElementById(`loader-${messageId}`);
+    const button = event.target;  
+    button.style.display = 'none';  
+    loader.style.display = 'inline';  
+    
+    
+    deleteMessage(messageId, chatId)
+        .then(() => {
+            loader.style.display = 'none';  
+            button.style.display = 'inline'; 
+        })
+        .catch((error) => {
+            console.error(error);
+            loader.style.display = 'none';  
+            button.style.display = 'inline'; 
+        });
+}
+
     startAutoRefresh();
 </script>