From a3525c63e3f7412f781c64d50997d1639f403cab Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 20 May 2021 12:14:40 +0200
Subject: [PATCH] feat(StatusIconTabButton): introduce image loading state and
 fallback

This commit introduces a loading indicator for cases where `icon.source`
is set (a custom image/icon) to improve UX of the component.

It also falls back to a letter identicon in case loading the image source
wasn't successful.

Usage:

```
StatusIconTabButton {
    icon.source: "SOME URL THAT CAN'T BE RESOLVED"
    icon.color: "red" // in case fallback is used, icon.color will be gray by default
    name: "Some channel" // used to generated letter identicon as fallback
}
```

Closes #37
---
 ui/StatusQ/sandbox/Controls.qml               |  8 +++++
 .../StatusQ/Controls/StatusIconTabButton.qml  | 31 +++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/ui/StatusQ/sandbox/Controls.qml b/ui/StatusQ/sandbox/Controls.qml
index e0b22d2904..91a4627329 100644
--- a/ui/StatusQ/sandbox/Controls.qml
+++ b/ui/StatusQ/sandbox/Controls.qml
@@ -18,6 +18,14 @@ GridLayout {
         icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
     }
 
+    StatusIconTabButton {
+        icon.color: Theme.palette.miscColor9
+        // This icon source is flawed and demonstrates the fallback case
+        // when the image source can't be loaded
+        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
+        name: "Pascal"
+    }
+
     StatusIconTabButton {
         name: "#status"
     }
diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml
index df79aaa98b..bac5462c30 100644
--- a/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml
+++ b/ui/StatusQ/src/StatusQ/Controls/StatusIconTabButton.qml
@@ -40,10 +40,37 @@ TabButton {
 
         Component {
             id: imageIcon
-            StatusRoundedImage {
+            Item {
                 width: 28
                 height: 28
-                image.source: icon.source
+                StatusRoundedImage {
+                    id: statusRoundImage
+                    width: parent.width
+                    height: parent.height
+                    image.source: icon.source
+                }
+                Loader {
+                    sourceComponent: {
+                        switch (statusRoundImage.image.status) {
+                            case Image.Loading:
+                              return statusLoadingIndicator
+                              break;
+                            case Image.Error:
+                              return letterIdenticon
+                              break;
+                        }
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error
+                }
+
+                Component {
+                    id: statusLoadingIndicator
+                    StatusLoadingIndicator {
+                        color: Theme.palette.directColor6
+                    }
+                }
             }
         }