From c99e242eb7b9eb5b231f966eda533387e2364635 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 16 Apr 2021 14:51:20 +0300
Subject: [PATCH] Fixed button loading animation

---
 public/themes/arya-blue/theme.css               | 4 ++--
 public/themes/arya-green/theme.css              | 4 ++--
 public/themes/arya-orange/theme.css             | 4 ++--
 public/themes/arya-purple/theme.css             | 4 ++--
 public/themes/bootstrap4-dark-blue/theme.css    | 4 ++--
 public/themes/bootstrap4-dark-purple/theme.css  | 4 ++--
 public/themes/bootstrap4-light-blue/theme.css   | 4 ++--
 public/themes/bootstrap4-light-purple/theme.css | 4 ++--
 public/themes/fluent-light/theme.css            | 4 ++--
 public/themes/luna-amber/theme.css              | 4 ++--
 public/themes/luna-blue/theme.css               | 4 ++--
 public/themes/luna-green/theme.css              | 4 ++--
 public/themes/luna-pink/theme.css               | 4 ++--
 public/themes/md-dark-deeppurple/theme.css      | 4 ++--
 public/themes/md-dark-indigo/theme.css          | 4 ++--
 public/themes/md-light-deeppurple/theme.css     | 4 ++--
 public/themes/md-light-indigo/theme.css         | 4 ++--
 public/themes/mdc-dark-deeppurple/theme.css     | 4 ++--
 public/themes/mdc-dark-indigo/theme.css         | 4 ++--
 public/themes/mdc-light-deeppurple/theme.css    | 4 ++--
 public/themes/mdc-light-indigo/theme.css        | 4 ++--
 public/themes/nova-accent/theme.css             | 4 ++--
 public/themes/nova-alt/theme.css                | 4 ++--
 public/themes/nova-vue/theme.css                | 4 ++--
 public/themes/nova/theme.css                    | 4 ++--
 public/themes/rhea/theme.css                    | 4 ++--
 public/themes/saga-blue/theme.css               | 4 ++--
 public/themes/saga-green/theme.css              | 4 ++--
 public/themes/saga-orange/theme.css             | 4 ++--
 public/themes/saga-purple/theme.css             | 4 ++--
 public/themes/vela-blue/theme.css               | 4 ++--
 public/themes/vela-green/theme.css              | 4 ++--
 public/themes/vela-orange/theme.css             | 4 ++--
 public/themes/vela-purple/theme.css             | 4 ++--
 src/components/button/Button.vue                | 3 ++-
 35 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index bdad921c9..2b9629c33 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index df6f1464c..831f9a91c 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 1b7c2411a..e7b3debb9 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index cd9ce1a00..678f6c066 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index c5c4bd3bc..7172594bd 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 85397705e..3ff8372fd 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 68e893999..e90aa0a87 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index dc590f011..6e685ac5a 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 137be7e8c..d351c7e2e 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index e934265ac..f0d21a817 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index c18d685d1..83a638c70 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 4a485ac11..fd8ce5faf 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index c08c633c8..a7d2d76c3 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index f7e99e243..809b31cef 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 3705169b9..5fe331d71 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index fb41d9dca..828af2a6e 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 1d863d951..898235490 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index d74d75c32..1552044d3 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index cd17de417..f0959267e 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index bb317311d..1a8945709 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 9a2d308ce..820838ca7 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1722,10 +1722,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index b2d22f07f..625babc93 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 3db90edc3..4ab1378a7 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 406fa3db2..fb49725e3 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index 3215aac48..61ce07edd 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1710,10 +1710,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 95f9c99b0..3286c9a88 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 04222d16a..73161ff81 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 7d9b4030a..2c04d0300 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index c60941bbc..a439d1387 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index a00bace2a..f51bb521e 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 2e8332a5a..811cef64b 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index ad89b1f4a..91a6b3371 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 14765c06c..1b245cea8 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 5d367ca6b..f73023e12 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1698,10 +1698,10 @@
 .p-button.p-button-lg .p-button-icon {
   font-size: 1.25rem;
 }
-.p-button.p-button-loading .p-button-label {
+.p-button.p-button-loading-label-only .p-button-label {
   margin-left: 0.5rem;
 }
-.p-button.p-button-loading .p-button-icon {
+.p-button.p-button-loading-label-only .p-button-loading-icon {
   margin-right: 0;
 }
 
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index eacd34639..04d4187e0 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -47,7 +47,8 @@ export default {
                 'p-button-icon-only': this.icon && !this.label,
                 'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                 'p-disabled': this.$attrs.disabled || this.loading,
-                'p-button-loading': this.loading
+                'p-button-loading': this.loading,
+                'p-button-loading-label-only': this.loading && !this.icon && this.label
             }
         },
         iconClass() {