popouts/network: better rescan loading

2 files changed, 27 insertions, 15 deletions

diff --git a/components/controls/StyledBusyIndicator.qml b/components/controls/StyledBusyIndicator.qml
index e54aafb..cc97c52 100644
--- a/components/controls/StyledBusyIndicator.qml
+++ b/components/controls/StyledBusyIndicator.qml
@@ -1,3 +1,4 @@
+import qs.services
 import qs.config
 import QtQuick
 import QtQuick.Controls
@@ -7,6 +8,9 @@ BusyIndicator {
 
     property real implicitSize: Appearance.font.size.normal * 3
     property real strokeWidth: Appearance.padding.small
+    property color fgColour: Colours.palette.m3primary
+    property color bgColour: Colours.palette.m3secondaryContainer
+
     property real internalStrokeWidth: strokeWidth
     property string animState
 
@@ -48,6 +52,8 @@ BusyIndicator {
     contentItem: CircularProgress {
         anchors.fill: parent
         strokeWidth: root.internalStrokeWidth
+        fgColour: root.fgColour
+        bgColour: root.bgColour
         padding: root.padding
         startAngle: updater.startFraction * 360
         value: updater.endFraction - updater.startFraction
diff --git a/modules/bar/popouts/Network.qml b/modules/bar/popouts/Network.qml
index 966823e..35146aa 100644
--- a/modules/bar/popouts/Network.qml
+++ b/modules/bar/popouts/Network.qml
@@ -146,11 +146,11 @@ ColumnLayout {
         Layout.fillWidth: true
         implicitHeight: rescanBtn.implicitHeight + Appearance.padding.small * 2
 
-        radius: Appearance.rounding.normal
-        color: Network.scanning ? Colours.tPalette.m3surfaceContainer : Colours.palette.m3primaryContainer
+        radius: Appearance.rounding.full
+        color: Colours.palette.m3primaryContainer
 
         StateLayer {
-            color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer
+            color: Colours.palette.m3onPrimaryContainer
             disabled: Network.scanning || !Network.wifiEnabled
 
             function onClicked(): void {
@@ -160,30 +160,36 @@ ColumnLayout {
 
         RowLayout {
             id: rescanBtn
+
             anchors.centerIn: parent
             spacing: Appearance.spacing.small
+            opacity: Network.scanning ? 0 : 1
 
             MaterialIcon {
                 id: scanIcon
 
                 animate: true
-                text: Network.scanning ? "refresh" : "wifi_find"
-                color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer
-
-                RotationAnimation on rotation {
-                    running: Network.scanning
-                    loops: Animation.Infinite
-                    from: 0
-                    to: 360
-                    duration: 1000
-                }
+                text: "wifi_find"
+                color: Colours.palette.m3onPrimaryContainer
             }
 
             StyledText {
-                text: Network.scanning ? qsTr("Scanning...") : qsTr("Rescan networks")
-                color: Network.scanning ? Colours.palette.m3onSurface : Colours.palette.m3onPrimaryContainer
+                text: qsTr("Rescan networks")
+                color: Colours.palette.m3onPrimaryContainer
+            }
+
+            Behavior on opacity {
+                Anim {}
             }
         }
+
+        StyledBusyIndicator {
+            anchors.centerIn: parent
+            strokeWidth: Appearance.padding.small / 2
+            bgColour: "transparent"
+            implicitHeight: parent.implicitHeight - Appearance.padding.smaller * 2
+            running: Network.scanning
+        }
     }
 
     // Reset connecting state when network changes