diff --git a/assets/controllers/toolbar_controller.js b/assets/controllers/toolbar_controller.js
index 229001c..5bf71b1 100644
--- a/assets/controllers/toolbar_controller.js
+++ b/assets/controllers/toolbar_controller.js
@@ -2,17 +2,27 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["dropdown"]
+  static targets = ["dropdown", "icon"]
   static values = {
     currentSort: String,
     currentOrder: String,
     currentStatus: String
   }
 
+  connect() {
+    window.addEventListener('alert:show', this.stopLoading.bind(this));
+  }
+
+  stopLoading() {
+    this.iconTarget.classList.remove('fa-spin');
+  }
+
   refreshMetadata(event) {
     const mangaId = event.currentTarget.dataset.mangaid;
     const url = `/refresh_metadata`;
 
+    this.iconTarget.classList.add('fa-spin');
+
     fetch(url, {
       method: 'POST',
       headers: {
@@ -26,14 +36,6 @@ export default class extends Controller {
           throw new Error('Network response was not ok');
         }
         return response.json();
-      })
-      .then(data => {
-        console.log('Metadata refreshed:', data);
-        // Traitez la réponse ici, par exemple en mettant à jour l'interface utilisateur
-      })
-      .catch(error => {
-        console.error('Error:', error);
-        // Gérez l'erreur ici, par exemple en affichant un message à l'utilisateur
       });
   }
 
diff --git a/templates/components/ToolBarButton.html.twig b/templates/components/ToolBarButton.html.twig
index 3278d04..d30f91f 100644
--- a/templates/components/ToolBarButton.html.twig
+++ b/templates/components/ToolBarButton.html.twig
@@ -15,7 +15,7 @@
         {% endif %}
         {{ buttonAttributes|join(' ') }}
     >
-        <i class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
+        <i data-toolbar-target="icon" class="fas fa-{{ icon }} text-xl group-hover:text-green-500"></i>
         <span class="text-xs">{{ text }}</span>
     </button>
 </div>