diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 3e3728623..bf0fb3916 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -7,7 +7,7 @@
 </a>
 
 <ng-template #content>
-  <my-loader size="sm" [loading]="loading"></my-loader>
+  <my-loader size="sm" [ngClass]="{ displayed: loading }" [loading]="loading"></my-loader>
   <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
 
   <span *ngIf="label" class="button-label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 611fc2094..964590e29 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -29,7 +29,7 @@ span[class$=-button] {
 .action-button {
   width: 100%; // useful for ellipsis, allow to define a max-width on host component
 
-  my-loader {
+  my-loader.displayed {
     @include margin-right(3px);
 
     display: inline-flex;