Add basic loading indicator to images

live-reload.sh

@@ -12,8 +12,6 @@ make clean
 qmake harmonyqml.pro CONFIG+=dev && make
 
 while true; do
-    killall -9 harmonyqml
-
     find src harmonyqml.pro -type f |
     entr -cdnr sh -c \
         "qmake harmonyqml.pro CONFIG+=dev && make && ./harmonyqml $*"

src/qml/Base/HAvatar.qml

@@ -51,6 +51,7 @@ Rectangle {
         fillMode: Image.PreserveAspectCrop
         source: Qt.resolvedUrl(imageUrl)
         animate: false
+        loadingLabel.font.pixelSize: theme.fontSize.small
 
         HoverHandler { id: hoverHandler }
 

src/qml/Base/HImage.qml

@@ -14,6 +14,7 @@ Image {
     property bool animate: true
 
     readonly property bool animated: Utils.urlExtension(image.source) == "gif"
+    readonly property alias loadingLabel: loadingLabel
 
 
     Component {
@@ -58,8 +59,19 @@ Image {
     }
 
     HLoader {
-        id: loader
         anchors.fill: parent
         sourceComponent: animate && animated ? animatedImageComponent : null
     }
+
+
+    HLabel {
+        id: loadingLabel
+        anchors.centerIn: parent
+        visible: image.status === Image.Loading
+        text: qsTr("%1%").arg(progress)
+
+        property int progress: Math.round(image.progress * 100)
+
+        Behavior on progress { HNumberAnimation { factor: 2 } }
+    }
 }

src/qml/Chat/Timeline/EventContent.qml

@@ -149,6 +149,16 @@ HRowLayout {
                 Layout.leftMargin: pureMedia ? 0 : contentLabel.leftPadding
                 Layout.rightMargin: pureMedia ? 0 : contentLabel.rightPadding
 
+                Layout.minimumWidth:
+                    type === EventDelegate.Media.Image ?
+                    (info.media_width ||
+                     (item ? item.loadingLabel.implicitWidth : -1)) : -1
+
+                Layout.minimumHeight:
+                    type === EventDelegate.Media.Image ?
+                    (info.media_height ||
+                     (item ? item.loadingLabel.implicitHeight : -1)) : -1
+
                 // Layout.minimumWidth:
                 //     type === EventDelegate.Media.File ?
                 //     theme.chat.message.fileMinWidth : -1
@@ -163,7 +173,7 @@ HRowLayout {
                 //     -1
 
                 Layout.maximumWidth: messageBodyWidth
-                Layout.maximumHeight: eventList.height / 1.5
+                Layout.maximumHeight: eventList.height / 2
             }
         }
     }