feat: login animation

ui/onboarding/CreatePasswordModal.qml

@@ -54,7 +54,34 @@ ModalPopup {
         font.pixelSize: 12
     }
 
-    footer: StyledButton {
+    footer: Item {
+        anchors.top: parent.bottom
+        anchors.right: parent.right
+        anchors.bottom: popup.bottom
+        anchors.left: parent.left
+
+        Image {
+            id: loadingImg
+            visible: loading
+            anchors.top: submitBtn.top
+            anchors.topMargin: Theme.padding
+            anchors.right: submitBtn.left
+            anchors.rightMargin: Theme.padding
+            source: "../app/img/settings.svg"
+            width: 20
+            height: 20
+            fillMode: Image.Stretch
+            RotationAnimator {
+                target: loadingImg;
+                from: 0;
+                to: 360;
+                duration: 1200
+                running: true
+                loops: Animation.Infinite
+            }
+        }
+
+        StyledButton {
             id: submitBtn
             anchors.bottom: parent.bottom
             anchors.topMargin: Theme.padding
@@ -127,6 +154,7 @@ ModalPopup {
             }
         }
     }
+}
 
 /*##^##
 Designer {

ui/onboarding/Login.qml

@@ -133,7 +133,7 @@ Item {
 
         Button {
             id: submitBtn
-            visible: txtPassword.text.length > 0
+            visible: !loading && txtPassword.text.length > 0
             width: 40
             height: 40
             anchors.left: txtPassword.right
@@ -150,7 +150,7 @@ Item {
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.verticalCenter: parent.verticalCenter
                 // TODO replace by a real loading image
-                source: loading ? "../app/img/refresh.svg" : "../app/img/arrowUp.svg"
+                source: "../app/img/arrowUp.svg"
                 width: 13.5
                 height: 17.5
                 fillMode: Image.PreserveAspectFit
@@ -170,6 +170,26 @@ Item {
             }
         }
 
+        Image {
+            id: loadingImg
+            visible: loading
+            anchors.left: txtPassword.right
+            anchors.leftMargin: Theme.padding
+            anchors.verticalCenter: txtPassword.verticalCenter
+            source: "../app/img/settings.svg"
+            width: 30
+            height: 30
+            fillMode: Image.Stretch
+            RotationAnimator {
+                target: loadingImg;
+                from: 0;
+                to: 360;
+                duration: 1200
+                running: true
+                loops: Animation.Infinite
+            }
+        }
+
         MessageDialog {
             id: loginError
             title: "Login failed"