From 49b9cbf47c172c65dc265d213c609ad5e651a6a9 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 6 Oct 2022 11:25:02 -0400
Subject: [PATCH] #7023 Fix loading icon in button

---
 src/definitions/elements/button.less         | 17 +++++++++++++++++
 src/definitions/elements/icon.less           |  6 +++---
 src/themes/default/elements/button.variables |  1 +
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/definitions/elements/button.less b/src/definitions/elements/button.less
index ebe3d7d29..35a130d7b 100755
--- a/src/definitions/elements/button.less
+++ b/src/definitions/elements/button.less
@@ -879,6 +879,23 @@
   transform: translateY(-50%);
 }
 
+/* Loading */
+.ui.labeled.icon.button > .icon.loading {
+  animation: none;
+}
+.ui.labeled.icon.button > .icon.loading:before {
+  animation: labeled-button-icon-loading @loadingIconDuration linear infinite;
+}
+
+@keyframes labeled-button-icon-loading {
+  from {
+    transform: translateY(-50%) rotate(0deg);
+  }
+  to {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
 .ui.labeled.icon.buttons .button > .icon {
   border-radius: 0em;
 }
diff --git a/src/definitions/elements/icon.less b/src/definitions/elements/icon.less
index 0cfc3dee2..4444e523f 100755
--- a/src/definitions/elements/icon.less
+++ b/src/definitions/elements/icon.less
@@ -73,16 +73,16 @@ i.icon.loading {
   line-height: 1;
 }
 
-i.icon.loading:before {
+i.icon.loading {
   animation: icon-loading @loadingDuration linear infinite;
 }
 
 @keyframes icon-loading {
   from {
-    transform: translateY(-50%) rotate(0deg);
+    transform: rotate(0deg);
   }
   to {
-    transform: translateY(-50%) rotate(360deg);
+    transform: rotate(360deg);
   }
 }
 
diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
index caaf58406..6eb9d3286 100644
--- a/src/themes/default/elements/button.variables
+++ b/src/themes/default/elements/button.variables
@@ -162,6 +162,7 @@
 
 /* Icon */
 @iconButtonOpacity: 0.9;
+@loadingIconDuration: 2s;
 
 /* Labeled */
 @labeledLabelFontSize: @medium;