From aa8f50a6c2a4477296a2debdb906be15531e8129 Mon Sep 17 00:00:00 2001
From: Black Hat <bhat@encom.eu.org>
Date: Sat, 18 Aug 2018 18:59:23 +0800
Subject: [PATCH] Add image loading indicator.

Add AutoImage.
---
 qml/component/AutoImage.qml   | 34 ++++++++++++++++++++++++++++++++++
 qml/component/ImageBubble.qml | 14 +++++---------
 res.qrc                       |  1 +
 3 files changed, 40 insertions(+), 9 deletions(-)
 create mode 100644 qml/component/AutoImage.qml

diff --git a/qml/component/AutoImage.qml b/qml/component/AutoImage.qml
new file mode 100644
index 0000000..75fbc61
--- /dev/null
+++ b/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()
+    }
+}
diff --git a/qml/component/ImageBubble.qml b/qml/component/ImageBubble.qml
index fe473da..887b37e 100644
--- a/qml/component/ImageBubble.qml
+++ b/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,17 +21,13 @@ 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()
-                }
+                onClicked: downloadAndOpen()
             }
         }
     }
diff --git a/res.qrc b/res.qrc
index 5cafb40..3365c4d 100644
--- a/res.qrc
+++ b/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>