Add image loading indicator.

Add AutoImage.

qml/component/AutoImage.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+
+Item {
+    property alias source: baseImage.source
+    property alias sourceSize: baseImage.sourceSize.width
+
+    readonly property bool loading: baseImage.status == Image.Loading
+    signal clicked()
+
+    id: rekt
+
+    width: loading ? 128 : baseImage.implicitWidth
+    height: loading ? progressBar.height : baseImage.implicitHeight
+
+    Image {
+        id: baseImage
+    }
+
+    ProgressBar {
+        id: progressBar
+        width: parent.width
+        visible: loading
+
+        indeterminate: true
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        propagateComposedEvents: true
+
+        onClicked: rekt.clicked()
+    }
+}

qml/component/ImageBubble.qml

@@ -9,8 +9,8 @@ AvatarContainer {
     Rectangle {
         id: messageRect
 
-        width: messageImage.implicitWidth + 24
-        height: messageImage.implicitHeight + 24
+        width: messageImage.width + 24
+        height: messageImage.height + 24
 
         color: sentByMe ? background : Material.accent
 
@@ -21,18 +21,14 @@ AvatarContainer {
             height: messageImage.height
             anchors.centerIn: parent
 
-            Image {
+            AutoImage {
                 id: messageImage
                 z: -4
-                sourceSize.width: 128
+                sourceSize: 128
                 source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
 
-                MouseArea {
-                    anchors.fill: parent
-                    propagateComposedEvents: true
                 onClicked: downloadAndOpen()
             }
         }
     }
 }
-}

res.qrc

@@ -31,5 +31,6 @@
         <file>qml/form/SettingGeneralForm.qml</file>
         <file>qml/component/EmojiPicker.qml</file>
         <file>qml/component/EmojiButton.qml</file>
+        <file>qml/component/AutoImage.qml</file>
     </qresource>
 </RCC>