Add radial progress bars to images

src/qml/Base/HAvatar.qml

@@ -46,6 +46,7 @@ Rectangle {
     HMxcImage {
         id: avatarImage
         anchors.fill: parent
+        progressBar.visible: false
         visible: Boolean(sourceOverride || mxc)
         z: 2
         sourceSize.width: parent.width
@@ -53,7 +54,6 @@ Rectangle {
         fillMode: Image.PreserveAspectCrop
         animate: false
         clientUserId: avatar.clientUserId
-        loadingLabel.font.pixelSize: theme.fontSize.small
 
         HoverHandler { id: hoverHandler }
 

src/qml/Base/HCircleProgressBar.qml

@@ -12,7 +12,7 @@ RadialBar {
     spanAngle: 360
 
     from: 0
-    to: 100
+    to: 1
     value: 0
 
     showText: true

src/qml/Base/HImage.qml

@@ -12,9 +12,8 @@ Image {
 
 
     property bool animate: true
-
     property bool animated: Utils.urlExtension(image.source) === "gif"
-    readonly property alias loadingLabel: loadingLabel
+    property alias progressBar: progressBar
 
 
     Component {
@@ -65,15 +64,15 @@ Image {
         sourceComponent: animate && animated ? animatedImageComponent : null
     }
 
-
+    HCircleProgressBar {
-    HLabel {
+        id: progressBar
-        id: loadingLabel
         anchors.centerIn: parent
+        width: Math.min(parent.width, parent.height) * 0.5
+        height: width
         visible: image.status === Image.Loading
-        text: qsTr("%1%").arg(progress)
+        value: image.progress
+        text: Math.round(value * 100) + "%"
 
-        property int progress: Math.round(image.progress * 100)
+        Behavior on value { HNumberAnimation { factor: 2 } }
-
-        Behavior on progress { HNumberAnimation { factor: 2 } }
     }
 }

src/qml/Base/HMxcImage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.12
 
 HImage {
     id: image
+    progressBar.indeterminate: isMxc
     source: sourceOverride || (show ? cachedPath : "")
     onWidthChanged: Qt.callLater(update)
     onHeightChanged: Qt.callLater(update)
@@ -9,7 +10,7 @@ HImage {
     onMxcChanged: {
         Qt.callLater(update)
 
-        if (mxc.startsWith("mxc://")) {
+        if (isMxc) {
             py.callCoro("mxc_to_http", [mxc], http => {
                 image.httpUrl = http || ""
             })
@@ -28,6 +29,7 @@ HImage {
     property bool show: false
     property string cachedPath: ""
     property string httpUrl: ""
+    readonly property bool isMxc: mxc.startsWith("mxc://")
 
 
     function update() {
@@ -41,7 +43,7 @@ HImage {
 
         if (! image) return  // if it was destroyed
 
-        if (! image.mxc.startsWith("mxc://")) {
+        if (! isMxc) {
             if (source != mxc) source = mxc
             show = image.visible
             return