Use HBusyIndicator as button loading indicator

src/gui/Base/HButton.qml

@@ -13,7 +13,6 @@ Button {
     leftPadding: padded ? spacing / (circle ? 1.5 : 1) : 0
     rightPadding: leftPadding
 
-    iconItem.svgName: loading ? "hourglass" : icon.name
     icon.color: theme.icons.colorize
 
     // Must be explicitely set to display correctly on KDE

src/gui/Base/HButtonContent.qml

@@ -21,60 +21,34 @@ HRowLayout {
     Behavior on opacity { HNumberAnimation {} }
 
 
-    HIcon {
-        property bool loading: button.loading || false
-
-        id: icon
-        svgName: button.icon.name
-        colorize: button.icon.color
-        // cache: button.icon.cache  // XXX: need Qt 5.13+
-
-        onLoadingChanged: if (! loading) resetAnimations.start()
+    Item {
+        visible: button.icon.name || button.loading
 
+        Layout.preferredWidth: icon.width
         Layout.fillHeight: true
         Layout.alignment: Qt.AlignCenter
 
+        HIcon {
+            id: icon
+            svgName: button.icon.name
+            colorize: button.icon.color
+            // cache: button.icon.cache  // TODO: need Qt 5.13+
 
-        ParallelAnimation {
-            id: resetAnimations
-            HNumberAnimation { target: icon; property: "opacity"; to: 1 }
-            HNumberAnimation { target: icon; property: "rotation"; to: 0 }
+            width: svgName ? implicitWidth : 0
+            visible: width > 0
+
+            opacity: button.loading ? 0 : 1
+
+            Behavior on opacity { HNumberAnimation {} }
         }
 
+        HBusyIndicator {
+            width: height
+            height: parent.height
+            opacity: button.loading ? 1 : 0
+            visible: opacity > 0
 
-        HNumberAnimation on opacity {
-            id: blink
-            from: 1
-            to: 0.5
-            factor: 2
-            running: button.loading || false
-            onFinished: { [from, to] = [to, from]; start() }
-        }
-
-        SequentialAnimation {
-            running: button.loading || false
-            loops: Animation.Infinite
-
-            HPauseAnimation { factor: blink.factor * 8 }
-
-            HNumberAnimation {
-                id: rotation1
-                target: icon
-                property: "rotation"
-                from: 0
-                to: 180
-                factor: blink.factor
-            }
-
-            HPauseAnimation { factor: blink.factor * 8 }
-
-            HNumberAnimation {
-                target: rotation1.target
-                property: rotation1.property
-                from: rotation1.to
-                to: 360
-                factor: rotation1.factor
-            }
+            Behavior on opacity { HNumberAnimation {} }
         }
     }
 

src/gui/Base/HTabButton.qml

@@ -12,7 +12,6 @@ TabButton {
     leftPadding: spacing
     rightPadding: leftPadding
 
-    iconItem.svgName: loading ? "hourglass" : icon.name
     icon.color: theme.icons.colorize
 
     implicitWidth: Math.max(

src/icons/thin/hourglass.svg

@@ -1,5 +0,0 @@
-<svg enable-background="new 0 0 1000 1000" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
-    <path d="m926 68v-8.3c0-27.4-22.4-49.8-49.8-49.8h-752.5c-27.3.1-49.7 22.5-49.7 49.9v8.2c0 27.4 22.4 49.8 49.8 49.8h19.2c9.9 0 9.1 9.2 9.1 13.9 0 55.3 22.7 119.2 40 160 34.8 81.9 114.1 149 179.2 196.4 11.9 8.7 9 16.7 2.1 22.2-63.1 50.6-146.1 115.2-181.3 198-17.1 40.2-39.3 102.7-40 157.4-.1 5.6 2.2 16.5-11.2 16.5h-17.1c-27.4 0-49.8 22.4-49.8 49.8v8.3c0 27.4 22.4 49.8 49.8 49.8h752.5c27.4 0 49.8-22.4 49.8-49.8v-8.3c0-27.4-22.4-49.8-49.8-49.8h-10.8c-19.8 0-17.8-14.8-17.6-22.5 1.4-51.1-13.6-109.1-35.6-152.7-48.9-97-125.9-158.7-173.4-194.4-10.3-7.7-11.3-17.3 0-25.1 48.9-33.7 124.5-97.5 173.4-194.5 23.4-46.5 38.9-109.3 35.1-162.6-.3-4.3-.6-12.6 10.6-12.6h18.3c27.3 0 49.7-22.4 49.7-49.8zm-153.4 205c-45.5 90.3-118.4 154.8-181.9 193.8-3.8 2.3-11.1 8.1-11.1 24.3v19.3c0 17.1 7.8 20.9 11.8 23.4 63.4 39 135.8 103.4 181.1 193.3 20.9 41.6 31.8 91.8 30.7 131.8-.2 8.3 3 23.4-18.7 23.4h-569.6c-19 0-18.3-9.5-18.2-14.7.3-36.4 12.9-86.8 36.3-141.8 40.6-95.5 125.9-155.1 182.7-190.7 2.5-1.6 7.4-4.4 7.4-19.5v-28.9c0-15.6-7.5-21.7-11.4-24.2-56.7-35.8-139-94.9-178.7-188.1-23.7-55.6-36.2-106.5-36.3-142.9 0-4.8.6-13.6 11.2-13.6h582.9c11.8 0 11.6 8.9 12 13.6 3.3 41.2-7.6 96.5-30.2 141.5z"/>
-    <path d="m488.4 563.6-194 242.7c-6.4 8-3.3 14.6 7 14.6h397.2c10.3 0 13.4-6.6 7-14.6l-194-242.7c-6.4-8-16.8-8-23.2 0z"/>
-    <path d="m486.8 450.8c7.3 7.2 19.2 7.2 26.4 0l97.6-97.3c7.3-7.2 4.8-13.2-5.5-13.2h-210.6c-10.3 0-12.7 5.9-5.5 13.2z"/>
-</svg>