Make PC3 BusyIndicator visuals keep a 1:1 aspect ratio

Updated the tests so that you can see if the aspect ratio is correct.

Made an animated transition for when `control.running` is false.

Removed the code that updates the RotationAnimator when control.running changes since it didn't work.

Set padding to 0 (see comment).

BUG: 425504

src/declarativeimports/plasmacomponents3/BusyIndicator.qml

@@ -12,38 +12,109 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 T.BusyIndicator {
     id: control
 
-    implicitWidth: contentItem.implicitWidth + leftPadding + rightPadding
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
-    implicitHeight: contentItem.implicitHeight + topPadding + bottomPadding
+                            implicitContentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             implicitContentHeight + topPadding + bottomPadding)
 
-    padding: units.smallSpacing
+    /* PC2 BusyIndicator didn't have padding or margins and
+     * BusyIndicator doesn't need padding since it has no background.
+     * A Control containing a BusyIndicator can have padding instead
+     * (e.g., a ToolBar, a Page or maybe a widget in a Plasma panel).
+     */
+    padding: 0
+
+    contentItem: Item {
+        /* implicitWidth and implicitHeight won't work unless they come
+         * from a child of the contentItem. No idea why.
+         */
+        implicitWidth: PlasmaCore.Units.gridUnit * 2
+        implicitHeight: implicitWidth
+
+        PlasmaCore.SvgItem {
+            id: busyIndicatorSvgItem
+
+            /* Do not use `anchors.fill: parent` in here or else
+             * the aspect ratio won't always be 1:1.
+             */
+            width: Math.min(parent.width, parent.height)
+            height: width
 
-    contentItem: PlasmaCore.SvgItem {
-        id: indicatorItem
-        visible: control.running
             svg: PlasmaCore.Svg {
                 imagePath: "widgets/busywidget"
                 colorGroup: PlasmaCore.ColorScope.colorGroup
             }
             elementId: "busywidget"
 
-        implicitWidth:  units.gridUnit * 2
-        implicitHeight: units.gridUnit * 2
-
-        Connections {
-            target: control
-            onRunningChanged: {
-                rotationAnimator.from = rotation
-                rotationAnimator.to = rotation + 360
-            }
-        }
-
             RotationAnimator on rotation {
                 id: rotationAnimator
                 from: 0
                 to: 360
                 duration: 2000
-            running: control.running && indicatorItem.visible && indicatorItem.opacity > 0;
                 loops: Animation.Infinite
             }
         }
+    }
+
+    state: control.running ? "running" : "hidden"
+
+    states: [
+        State {
+            name: "hidden"
+            PropertyChanges {
+                target: contentItem
+                opacity: 0
+            }
+        },
+        State {
+            name: "running"
+            PropertyChanges {
+                target: contentItem
+                opacity: 1
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            from: "*"
+            to: "hidden"
+            SequentialAnimation {
+                OpacityAnimator {
+                    duration: PlasmaCore.Units.shortDuration
+                    easing.type: Easing.OutQuad
+                }
+                PropertyAction {
+                    target: contentItem
+                    property: "visible"
+                    value: false
+                }
+            }
+            PropertyAction {
+                target: rotationAnimator
+                property: "running"
+                value: false
+            }
+        },
+        Transition {
+            from: "*"
+            to: "running"
+            PropertyAction {
+                target: rotationAnimator
+                property: "running"
+                value: true
+            }
+            SequentialAnimation {
+                PropertyAction {
+                    target: contentItem
+                    property: "visible"
+                    value: true
+                }
+                OpacityAnimator {
+                    duration: PlasmaCore.Units.shortDuration
+                    easing.type: Easing.OutQuad
+                }
+            }
+        }
+    ]
 }

tests/components/busyindicator.qml

@@ -11,15 +11,31 @@ ComponentBase {
 
         PlasmaComponents.Label {
             wrapMode: Text.WordWrap
-            text: "When checking and unchecking the checkbox, " +
+            text: "The BusyIndicator should have a height of 16px and should have a 1:1 aspect ratio"
-                  "the busy indicator should resume where it has " +
+            Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
-                  "paused and not glitch around."
+        }
+        PlasmaComponents.BusyIndicator {
+            Layout.preferredHeight: 16
+        }
+
+        PlasmaComponents.Label {
+            wrapMode: Text.WordWrap
+            text: "The BusyIndicator should use its implicit size."
+            Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
+        }
+        PlasmaComponents.BusyIndicator {}
+
+        PlasmaComponents.Label {
+            wrapMode: Text.WordWrap
+            text: "The BusyIndicator should maintain a 1:1 aspect ratio, pause when unchecked and resume when checked."
         }
 
         RowLayout {
             spacing: PlasmaCore.Units.gridUnit
 
             PlasmaComponents.BusyIndicator {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
                 running: runningButton.checked
             }
 

tests/components/busyindicator3.qml

@@ -11,7 +11,23 @@ ComponentBase {
 
         PlasmaComponents.Label {
             wrapMode: Text.WordWrap
-            text: "The BusyIndicator should disappear when unchecked and restart when checked."
+            text: "The BusyIndicator should have a height of 16px and should have a 1:1 aspect ratio"
+            Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
+        }
+        PlasmaComponents.BusyIndicator {
+            Layout.preferredHeight: 16
+        }
+
+        PlasmaComponents.Label {
+            wrapMode: Text.WordWrap
+            text: "The BusyIndicator should use its implicit size."
+            Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
+        }
+        PlasmaComponents.BusyIndicator {}
+
+        PlasmaComponents.Label {
+            wrapMode: Text.WordWrap
+            text: "The BusyIndicator should maintain a 1:1 aspect ratio, disappear when unchecked and restart when checked."
             Layout.preferredWidth: Math.max(busyIndicatorLayout.width, root.implicitHeaderWidth)
         }
 
@@ -20,6 +36,8 @@ ComponentBase {
             spacing: PlasmaCore.Units.gridUnit
 
             PlasmaComponents.BusyIndicator {
+                Layout.fillWidth: true
+                Layout.fillHeight: true
                 running: runningButton.checked
             }