feat(@desktop/wallet): Implement loading state for collectibles

fixes #9106

ui/app/AppLayouts/Wallet/views/CollectiblesView.qml

@@ -4,7 +4,9 @@ import QtQuick.Controls 2.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+
 import shared.panels 1.0
+import utils 1.0
 
 import "collectibles"
 
@@ -23,33 +25,12 @@ Item {
         height: parent.height
 
         sourceComponent: {
-            if (!root.areCollectionsLoaded)
+            if (root.areCollectionsLoaded && root.collectiblesModel.collectionCount === 0)
-            {
-                return loading
-            } else if (root.collectiblesModel.collectionCount === 0) {
                 return empty;
-            } else if (root.collectiblesModel.count === 0) {
-                return loading
-            }
             return loaded;
         }
     }
 
-    Component {
-        id: loading
-
-        Item {
-            id: loadingIndicator
-            height: 164
-            StatusLoadingIndicator {
-                width: 20
-                height: 20
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
-            }
-        }
-    }
-
     Component {
         id: empty
         Item {
@@ -68,19 +49,16 @@ Item {
         StatusGridView {
             id: gridView
             anchors.fill: parent
-            model: root.collectiblesModel
+            model: root.areCollectionsLoaded ? root.collectiblesModel : Constants.dummyModelItems
             cellHeight: 229
             cellWidth: 176
-            delegate: Item {
+            delegate: CollectibleView {
                 height: gridView.cellHeight
                 width: gridView.cellWidth
-                CollectibleView {
+                collectibleModel: root.areCollectionsLoaded ? model : undefined
-                    collectibleModel: model
+                isLoadingDelegate: !root.areCollectionsLoaded
-                    anchors.fill: parent
+                onCollectibleClicked: {
-                    anchors.bottomMargin: 4
+                    root.collectibleClicked(slug, collectibleId);
-                    onCollectibleClicked: {
-                        root.collectibleClicked(slug, collectibleId);
-                    }
                 }
             }
         }

ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml

@@ -5,23 +5,30 @@ import QtQuick.Layouts 1.13
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
 
 import shared.panels 1.0
 
+import utils 1.0
+
 Item {
     id: root
+
     property var collectibleModel
+    property bool isLoadingDelegate
+
+    signal collectibleClicked(string slug, int collectibleId)
+
+    QtObject {
+        id: d
+        readonly property bool modeDataValid: !!root.collectibleModel && root.collectibleModel !== undefined
+        readonly property bool isLoaded: modeDataValid ? root.collectibleModel.collectionCollectiblesLoaded : false
+    }
 
     implicitHeight: 225
     implicitWidth: 176
 
-    signal collectibleClicked(string slug, int collectibleId)
-
-    readonly property bool isLoaded: root.collectibleModel.collectionCollectiblesLoaded
-
     ColumnLayout {
-        //Layout.fillHeight: true
-        //Layout.fillWidth: true
         width: parent.width
         anchors.horizontalCenter: parent.horizontalCenter
         spacing: 0
@@ -34,38 +41,46 @@ Item {
             implicitWidth: 160
             implicitHeight: 160
             radius: 12
-            image.source: root.collectibleModel.imageUrl
+            image.source: d.modeDataValid ? root.collectibleModel.imageUrl : ""
             border.color: Theme.palette.baseColor2
             border.width: 1
             showLoadingIndicator: true
-            color: root.collectibleModel.backgroundColor
+            color: d.modeDataValid ? root.collectibleModel.backgroundColor : "transparent"
+            Loader {
+                anchors.fill: parent
+                active: root.isLoadingDelegate
+                sourceComponent: LoadingComponent {radius: image.radius}
+            }
         }
-        StatusBaseText {
+        StatusTextWithLoadingState {
             id: collectibleLabel
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+            Layout.leftMargin: 8
             Layout.topMargin: 9
-            Layout.preferredWidth: 144
+            Layout.preferredWidth: isLoadingDelegate ? 134 : 144
             Layout.preferredHeight: 21
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: 15
-            color: Theme.palette.directColor1
+            customColor: Theme.palette.directColor1
             font.weight: Font.DemiBold
             elide: Text.ElideRight
-            text: isLoaded ? root.collectibleModel.name : "..."
+            text: isLoadingDelegate ? Constants.dummyText : d.isLoaded && d.modeDataValid ? root.collectibleModel.name : "..."
+            loading: root.isLoadingDelegate
         }
-        StatusBaseText {
+        StatusTextWithLoadingState {
             id: collectionLabel
-            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-            Layout.topMargin: 0
+            Layout.leftMargin: 8
-            Layout.preferredWidth: 144
+            Layout.preferredWidth: isLoadingDelegate ? 88 : 144
             Layout.preferredHeight: 18
             horizontalAlignment: Text.AlignLeft
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: 13
-            color: Theme.palette.baseColor1
+            customColor: Theme.palette.baseColor1
             elide: Text.ElideRight
-            text: root.collectibleModel.collectionName
+            text: isLoadingDelegate ? Constants.dummyText : d.modeDataValid ? root.collectibleModel.collectionName : ""
+            loading: root.isLoadingDelegate
         }
     }
 
@@ -75,14 +90,14 @@ Item {
         border.width: 1
         border.color: Theme.palette.primaryColor1
         color: Theme.palette.indirectColor3
-        visible: root.isLoaded && mouse.containsMouse
+        visible: d.isLoaded && mouse.containsMouse
     }
     MouseArea {
         id: mouse
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
-            if (root.isLoaded) {
+            if (d.isLoaded) {
                 root.collectibleClicked(root.collectibleModel.collectionSlug, root.collectibleModel.id);
             }
         }

ui/imports/utils/Constants.qml

@@ -656,6 +656,7 @@ QtObject {
     readonly property string generatedWalletType: "generated"
 
     readonly property string dummyText: "Dummy"
+    readonly property int dummyModelItems: 25
 
     readonly property string windows: "windows"
     readonly property string linux: "linux"