From 3439d1c34be5c7460e6d474b3d9a79cfd6866af3 Mon Sep 17 00:00:00 2001
From: Bart De Vries <bart@mogwai.be>
Date: Thu, 29 Apr 2021 22:46:07 +0200
Subject: [PATCH] Add progress loader symbols to loading images and refreshing
 feeds

---
 src/qml/FeedListDelegate.qml  |  2 +-
 src/qml/ImageWithFallback.qml | 30 ++++++++++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/qml/FeedListDelegate.qml b/src/qml/FeedListDelegate.qml
index 0d444dda..2402d45b 100644
--- a/src/qml/FeedListDelegate.qml
+++ b/src/qml/FeedListDelegate.qml
@@ -59,6 +59,7 @@ Controls.ItemDelegate {
             anchors.fill: parent
             imageSource: feed.cachedImage
             imageTitle: feed.name
+            isLoading: feed.refreshing
         }
 
         Rectangle {
@@ -69,7 +70,6 @@ Controls.ItemDelegate {
             width: actionsButton.width
             height: actionsButton.height
             color: Kirigami.Theme.highlightColor
-            opacity: 0.8
             radius: Kirigami.Units.smallSpacing - 2 * borderWidth
         }
 
diff --git a/src/qml/ImageWithFallback.qml b/src/qml/ImageWithFallback.qml
index 25d2bb9f..229febdf 100644
--- a/src/qml/ImageWithFallback.qml
+++ b/src/qml/ImageWithFallback.qml
@@ -20,12 +20,14 @@ Item {
     property int absoluteRadius: 0
     property real fractionalRadius: 0.0
     property string imageTitle: ""
+    property bool isLoading: false
 
     Loader {
+        //active: !isLoading
         id: imageLoader
         anchors.fill: parent
         asynchronous: true
-        sourceComponent: imageSource === "no-image" ? fallbackImg : (imageSource === "" ? fallbackImg : realImg )
+        sourceComponent: imageSource === "no-image" ? fallbackImg : (imageSource === "" ? loaderSymbol : realImg )
         opacity: root.imageOpacity
         layer.enabled: (root.absoluteRadius > 0 || root.fractionalRadius > 0)
         layer.effect: OpacityMask {
@@ -84,7 +86,7 @@ Item {
                         anchors.right: parent.right
                         padding: 10
                         text: root.imageTitle
-                        level: 2
+                        level: 3
                         color: "white"
                         wrapMode: Text.Wrap
                         elide: Text.ElideRight
@@ -99,4 +101,28 @@ Item {
             }
         }
     }
+
+    Component {
+        id: loaderSymbol
+        Item {
+            anchors.fill: parent
+            Rectangle {
+                color: "white"
+                opacity: 0.5
+                anchors.fill: parent
+            }
+            Controls.BusyIndicator {
+                anchors.centerIn: parent
+                width: parent.width / 2
+                height: parent.height / 2
+            }
+        }
+    }
+
+    Loader {
+        active: isLoading
+        sourceComponent: loaderSymbol
+        anchors.fill: parent
+        //anchors.centerIn: parent
+    }
 }