Login loading icon

Add standard mechanism in HButton for loading icon display;
have HImage and HIcon base components.

harmonyqml/components/base/HButton.qml

@@ -3,11 +3,19 @@ import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.4
 
 Button {
-    property alias fontSize: buttonLabel.font.pixelSize
+    property int fontSize: HStyle.fontSize.normal
     property color backgroundColor: "lightgray"
     property alias overlayOpacity: buttonBackgroundOverlay.opacity
     property string iconName: ""
     property bool circle: false
+    property bool loading: false
+
+    property int contentWidth: 0
+
+    function loadingUntilFutureDone(future) {
+        loading = true
+        future.onGotResult.connect(function() { loading = false })
+    }
 
     id: button
     display: Button.TextBesideIcon
@@ -26,37 +34,44 @@ Button {
         }
     }
 
-    contentItem: HRowLayout {
-        spacing: button.text && iconName ? 5 : 0
+    Component {
+        id: buttonContent
 
-        Component {
-            id: buttonIcon
-            Image {
-                cache: true
-                mipmap: true
-                source: "../../icons/" + iconName + ".svg"
-                fillMode: Image.PreserveAspectFit
-                width: button.text ? 20 : 24
-                height: width
+        HRowLayout {
+            id: contentLayout
+            spacing: button.text && iconName ? 5 : 0
+            Component.onCompleted: contentWidth = implicitWidth
+
+            HIcon {
+                svgName: loading ? "hourglass" : iconName
+                dimension: contentLayout.height
+            }
+
+            HLabel {
+                text: button.text
+                font.pixelSize: fontSize
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             }
         }
-        Loader {
-            sourceComponent: iconName ? buttonIcon : undefined
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+    }
+
+    Component {
+        id: loadingOverlay
+        HRowLayout {
+            HIcon {
+                svgName: "hourglass"
+                Layout.preferredWidth: contentWidth || -1
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
         }
+    }
 
-        HLabel {
-            id: buttonLabel
-
-            text: button.text
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-
-            elide: Text.ElideRight
-            maximumLineCount: 1
-            Layout.maximumWidth: button.width - buttonIcon.width
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        }
+    contentItem: Loader {
+        sourceComponent:
+            loading && ! iconName ? loadingOverlay : buttonContent
     }
 
     MouseArea {

harmonyqml/components/base/HIcon.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+
+HImage {
+    property var svgName: null
+    property int dimension: 20
+
+    source: "../../icons/" + (svgName || "none") + ".svg"
+    sourceSize.width: svgName ? dimension : 0
+    sourceSize.height: svgName ? dimension : 0
+}

harmonyqml/components/base/HImage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Image {
+    asynchronous: true
+    cache: true
+    mipmap: true
+    fillMode: Image.PreserveAspectFit
+}

harmonyqml/components/pages/LoginPage.qml

@@ -11,9 +11,9 @@ Image {
     source: "../../images/login_background.jpg"
 
     function login() {
-        Backend.clientManager.new(
+        loginButton.loadingUntilFutureDone(Backend.clientManager.new(
             "matrix.org", identifierField.text, passwordField.text
-        )
+        ))
     }
 
     Rectangle {
@@ -119,10 +119,13 @@ Image {
                 Base.HButton {
                     text: qsTr("Register")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
                 }
                 Base.HButton {
+                    id: loginButton
                     text: qsTr("Login")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
 
                     MouseArea {
                         anchors.fill: parent
@@ -132,6 +135,7 @@ Image {
                 Base.HButton {
                     text: qsTr("Forgot?")
                     Layout.fillWidth: true
+                    Layout.preferredHeight: 32
                 }
             }
         }