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

@@ -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"
     }

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
+                    }
+                }
             }
         }