Rework the LoadingScreen and HBusyIndicator

src/icons/light-thin/loader.svg

@@ -0,0 +1,80 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created using Krita: http://krita.org -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="18pt"
+   height="18pt"
+   viewBox="0 0 18 18"
+   version="1.1"
+   id="svg1304"
+   sodipodi:docname="loader.svg"
+   inkscape:version="">
+  <metadata
+     id="metadata1308">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="640"
+     inkscape:window-height="480"
+     id="namedview1306"
+     showgrid="false"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     inkscape:snap-text-baseline="true"
+     inkscape:snap-page="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:zoom="22.627417"
+     inkscape:cx="4.9912351"
+     inkscape:cy="12.313093"
+     inkscape:current-layer="svg1304">
+    <sodipodi:guide
+       position="16.125,8.9765625"
+       orientation="0,1"
+       id="guide1316"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="9,16.382812"
+       orientation="1,0"
+       id="guide1318"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1301" />
+  <path
+     id="shape0"
+     d="M 9,0.07593943 C 4.0716875,0.07593943 0.07593943,4.0716875 0.07593943,9 c 0,4.928312 3.99574807,8.924061 8.92406057,8.924061 4.928312,0 8.924061,-3.995749 8.924061,-8.924061 C 17.924061,4.0716875 13.928312,0.07593943 9,0.07593943 Z"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:0.15800691;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.11764706"
+     sodipodi:nodetypes="sssss" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:0.15;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0.8669725"
+     d="M 12,0.1015625 C 5.4289167,0.1015625 0.1015625,5.4289167 0.1015625,12 0.1015625,18.571083 5.4289167,23.898437 12,23.898438"
+     transform="scale(0.75)"
+     id="path1310"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="csc" />
+</svg>

src/qml/Base/HBusyIndicator.qml

@@ -1,36 +1,27 @@
 import QtQuick 2.12
 import QtQuick.Controls 2.12
+import QtQuick.Shapes 1.12
 
 BusyIndicator {
     id: indicator
-    implicitWidth: Math.min(192, Math.max(64, parent.width / 5))
+    implicitWidth: theme ? theme.controls.loader.defaultDimension : 96
-    implicitHeight: 10
+    implicitHeight: implicitWidth
 
-    contentItem: Item {
+    contentItem: HIcon {
-        Rectangle {
+        svgName: "loader"
-            id: circle
+        dimension: indicator.width
-            width: height
+        property var pr: dimension
-            height: indicator.height
+        colorize: theme ? theme.controls.loader.colorize : "white"
-            radius: height / 2
+        mipmap: true
 
-            ColorAnimation on color {
+        RotationAnimation on rotation {
-                // Can't swap direct colors values
+            id: rotationAnimation
-                property string c1: "white"
+            from: 0
-                property string c2: theme ? theme.colors.accentText : "cyan"
+            to: 360
-
+            running: true
-                id: colorAnimation
+            loops: Animation.Infinite
-                from: c1
+            duration: theme ? (theme.animationDuration * 6) : 600
-                to: c2
+            easing.type: Easing.Linear
-                duration: 1000
-                onStopped: {[c1, c2] = [c2, c1]; start()}
-            }
-
-            XAnimator on x {
-                from: 0
-                to: indicator.width - circle.width
-                duration: colorAnimation.duration / 2
-                onStopped: {[from, to] = [to, from]; start()}
-            }
         }
     }
 }

src/qml/Base/HIcon.qml

@@ -8,7 +8,9 @@ HImage {
 
     source:
         svgName ?
-        ("../../icons/" + theme.preferredIconPack + "/" + svgName + ".svg") :
+        ("../../icons/" +
+         (theme ? theme.preferredIconPack : "light-thin") +
+         "/" + svgName + ".svg") :
         ""
 
     sourceSize.width: svgName ? dimension : 0

src/qml/LoadingScreen.qml

@@ -1,12 +1,22 @@
 import QtQuick 2.12
 import "Base"
-import "utils.js" as Utils
 
-HRectangle {
+Item {
-    color: theme ? theme.controls.box.background : "#0f1222"
+    Rectangle {
-    Behavior on color { HNumberAnimation {} }
+        anchors.fill: parent
+        scale: Math.max(
+            1.6, Math.ceil(parent.parent.width / parent.parent.height)
+        )
+        rotation: 45 * 3
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: Qt.hsla(0.73, 0.25, 0.25, 1) }
+            GradientStop { position: 1.0; color: Qt.hsla(0.52, 1, 0.08, 1) }
+        }
+    }
 
     HBusyIndicator {
         anchors.centerIn: parent
+        width: Math.min(160, parent.width - 16, parent.height - 16)
+        height: width
     }
 }

src/qml/Pages/EditAccount/EditAccount.qml

@@ -49,6 +49,7 @@ HPage {
             Layout.preferredHeight: childrenRect.height
 
             HLoader {
+                anchors.centerIn: parent
                 width: parent.width
                 source: ready ?
                         modelData :

src/themes/Default.qpl

@@ -79,6 +79,10 @@ colors:
 // Generic UI controls
 
 controls:
+    loader:
+        int defaultDimension: 80
+        color colorize: "white"
+
     box:
         color background: colors.strongBackground
         int radius:       theme.radius