NBusyIndicator (aka Spinner)

Modules/Bar/WiFiMenu.qml

@@ -104,7 +104,7 @@ NLoader {
             delegate: Item {
               width: parent.width
               height: modelData.ssid === passwordPromptSsid
-                    && showPasswordPrompt ? 108 : 48 // 48 for network + 60 for password prompt
+                      && showPasswordPrompt ? 108 * scaling : Style.baseWidgetSize * 1.5 * scaling
 
               ColumnLayout {
                 anchors.fill: parent
@@ -112,7 +112,7 @@ NLoader {
 
                 Rectangle {
                   Layout.fillWidth: true
-                Layout.preferredHeight: 48
+                  Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling
                   radius: Style.radiusMedium * scaling
                   color: modelData.connected ? Colors.accentPrimary : (networkMouseArea.containsMouse ? Colors.highlight : "transparent")
 
@@ -167,15 +167,15 @@ NLoader {
                       visible: network.connectStatusSsid === modelData.ssid
                                && (network.connectStatus !== "" || network.connectingSsid === modelData.ssid)
 
-                    // TBC
+                      NBusyIndicator {
-                    // Spinner {
+                        visible: network.connectingSsid === modelData.ssid
-                    //   visible: network.connectingSsid === modelData.ssid
+                        running: network.connectingSsid === modelData.ssid
-                    //   running: network.connectingSsid === modelData.ssid
+                        color: Colors.accentPrimary
-                    //   color: Colors.accentPrimary
+                        anchors.centerIn: parent
-                    //   anchors.centerIn: parent
+                        size: 22 * scaling
-                    //   size: 22
+                      }
-                    // }
 
+                      // TBC: Does nothing on my setup
                       NText {
                         visible: network.connectStatus === "success" && !network.connectingSsid
                         text: "check_circle"
@@ -185,6 +185,7 @@ NLoader {
                         anchors.centerIn: parent
                       }
 
+                      // TBC: Does nothing on my setup
                       NText {
                         visible: network.connectStatus === "error" && !network.connectingSsid
                         text: "error"
@@ -198,8 +199,8 @@ NLoader {
                     NText {
                       visible: modelData.connected
                       text: "connected"
-                    color: networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.accentPrimary
                       font.pointSize: Style.fontSizeSmall * scaling
+                      color: modelData.connected ? Colors.backgroundPrimary : (networkMouseArea.containsMouse ? Colors.backgroundPrimary : Colors.textPrimary)
                     }
                   }
 

Widgets/NBusyIndicator.qml

@@ -0,0 +1,56 @@
+import QtQuick
+import qs.Services
+
+Item {
+  id: root
+
+  readonly property real scaling: Scaling.scale(screen)
+
+  property bool running: false
+  property color color: "white"
+  property int size: baseWidgetSize * 0.5 * scaling
+  property int strokeWidth: 2 * scaling
+  property int duration: 1000
+
+  implicitWidth: size
+  implicitHeight: size
+
+  Canvas {
+    id: canvas
+    anchors.fill: parent
+
+    onPaint: {
+      var ctx = getContext("2d")
+      ctx.reset()
+
+      var centerX = width / 2
+      var centerY = height / 2
+      var radius = Math.min(width, height) / 2 - strokeWidth / 2
+
+      ctx.strokeStyle = root.color
+      ctx.lineWidth = root.strokeWidth
+      ctx.lineCap = "round"
+
+      // Draw arc with gap (270 degrees with 90 degree gap)
+      ctx.beginPath()
+      ctx.arc(centerX, centerY, radius, -Math.PI / 2 + rotationAngle, -Math.PI / 2 + rotationAngle + Math.PI * 1.5)
+      ctx.stroke()
+    }
+
+    property real rotationAngle: 0
+
+    onRotationAngleChanged: {
+      requestPaint()
+    }
+
+    NumberAnimation {
+      target: canvas
+      property: "rotationAngle"
+      running: root.running
+      from: 0
+      to: 2 * Math.PI
+      duration: root.duration
+      loops: Animation.Infinite
+    }
+  }
+}