chore: re-add sticker loading UI

The sticker loading UI was removed when the StatusChatInput and friends were added in. This PR re-adds the sticker loading UI introduced in PR# 955 (https://github.com/status-im/nim-status-client/pull/955).

src/app/chat/views/stickers.nim

@@ -100,10 +100,10 @@ QtObject:
     self.stickerPacksLoaded()
     self.installedStickerPacksUpdated()
 
-  proc getNumInstalledStickerPacks(self: StickersView): QVariant {.slot.} =
+  proc getNumInstalledStickerPacks(self: StickersView): int {.slot.} =
-    newQVariant(self.status.stickers.installedStickerPacks.len)
+    self.status.stickers.installedStickerPacks.len
 
-  QtProperty[QVariant] numInstalledStickerPacks:
+  QtProperty[int] numInstalledStickerPacks:
     read = getNumInstalledStickerPacks
     notify = installedStickerPacksUpdated
 

ui/shared/status/StatusChatInput.qml

@@ -488,7 +488,6 @@ Rectangle {
         onStickerSelected: {
             control.stickerSelected(hashId, packId)
             messageInputField.forceActiveFocus();
-            stickersPopup.close()
         }
         onClosed: {
             stickersBtn.highlighted = false

ui/shared/status/StatusStickerList.qml

@@ -22,19 +22,12 @@ GridView {
             anchors.fill: parent
             anchors.topMargin: 4
             anchors.leftMargin: 4
-            Image {
+            ImageLoader {
                 width: 80
                 height: 80
-                sourceSize.width: width
-                sourceSize.height: height
-                fillMode: Image.PreserveAspectFit
                 source: "https://ipfs.infura.io/ipfs/" + url
-                MouseArea {
+                onClicked: {
-                    cursorShape: Qt.PointingHandCursor
+                    root.stickerClicked(hash, packId)
-                    anchors.fill: parent
-                    onClicked: {
-                        root.stickerClicked(hash, packId)
-                    }
                 }
             }
         }

ui/shared/status/StatusStickersPopup.qml

@@ -8,10 +8,12 @@ import "../../shared/status"
 import "../../app/AppLayouts/Chat/ChatColumn/samples"
 
 Popup {
-    id: popup
+    id: root
     property var recentStickers: StickerData {}
     property var stickerPackList: StickerPackData {}
     signal stickerSelected(string hashId, string packId)
+    property int installedPacksCount: chatsModel.stickers.numInstalledStickerPacks
+    property bool stickerPacksLoaded: false
     width: 360
     height: 440
     modal: false
@@ -75,10 +77,11 @@ Popup {
             Item {
                 id: noStickerPacks
                 anchors.fill: parent
-                visible: stickerGrid.count <= 0 || stickerPackListView.count <= 0
+                visible: false
 
                 Image {
                     id: imgNoStickers
+                    visible: lblNoStickersYet.visible || lblNoRecentStickers.visible
                     width: 56
                     height: 56
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -96,7 +99,7 @@ Popup {
 
                     StyledText {
                         id: lblNoStickersYet
-                        visible: stickerPackListView.count <= 0
+                        visible: root.installedPacksCount === 0
                         anchors.fill: parent
                         font.pixelSize: 15
                         //% "You don't have any stickers yet"
@@ -107,7 +110,7 @@ Popup {
 
                     StyledText {
                         id: lblNoRecentStickers
-                        visible: stickerPackListView.count > 0 && stickerGrid.count <= 0
+                        visible: stickerPackListView.selectedPackId === -1 && chatsModel.stickers.recent.rowCount() === 0 && !lblNoStickersYet.visible
                         anchors.fill: parent
                         font.pixelSize: 15
                         //% "Recently used stickers will appear here"
@@ -118,7 +121,7 @@ Popup {
                 }
 
                 StyledButton {
-                    visible: stickerPackListView.count <= 0
+                    visible: lblNoStickersYet.visible
                     //% "Get Stickers"
                     label: qsTrId("get-stickers")
                     anchors.top: noStickersContainer.bottom
@@ -135,7 +138,29 @@ Popup {
                 id: stickerGrid
                 model: recentStickers
                 onStickerClicked: {
-                    popup.stickerSelected(hash, packId)
+                    root.stickerSelected(hash, packId)
+                    root.close()
+                }
+            }
+            StatusStickerList {
+                id: loadingGrid
+                visible: chatsModel.stickers.recent.rowCount() === 0
+                interactive: false
+                model: new Array(20)
+                delegate: Item {
+                    width: stickerGrid.cellWidth
+                    height: stickerGrid.cellHeight
+                    Column {
+                        anchors.fill: parent
+                        anchors.topMargin: 4
+                        anchors.leftMargin: 4
+                        Rectangle {
+                            width: 80
+                            height: 80
+                            radius: width / 2
+                            color: Style.current.backgroundHover
+                        }
+                    }
                 }
             }
         }
@@ -150,15 +175,13 @@ Popup {
             Layout.bottomMargin: 8
             Layout.alignment: Qt.AlignTop | Qt.AlignLeft
 
-            RoundedIcon {
+            StatusRoundButton {
                 id: btnAddStickerPack
-                anchors.left: parent.left
+                size: "medium"
-                anchors.top: parent.top
+                icon.name: "plusSign"
-                width: 24
+                implicitWidth: 24
-                height: 24
+                implicitHeight: 24
-                iconWidth: 13.5
+                state: root.stickerPacksLoaded ? "default" : "pending"
-                iconHeight: 13.5
-                source: "../../app/img/plusSign.svg"
                 onClicked: {
                     stickersContainer.visible = false
                     stickerMarket.visible = true
@@ -215,9 +238,32 @@ Popup {
                             }
                         }
                     }
+                    Repeater {
+                        id: loadingStickerPackListView
+                        model: new Array(7)
+
+                        delegate: Rectangle {
+                            width: 24
+                            height: 24
+                            Layout.preferredHeight: height
+                            Layout.preferredWidth: width
+                            radius: width / 2
+                            color: Style.current.backgroundHover
+                        }
+                    }
                 }
             }
         }
     }
+    Connections {
+        target: chatsModel.stickers
+        onStickerPacksLoaded: {
+            root.stickerPacksLoaded = true
+            stickerPackListView.visible = true
+            loadingGrid.visible = false
+            loadingStickerPackListView.model = []
+            noStickerPacks.visible = installedPacksCount === 0 || chatsModel.stickers.recent.rowCount() === 0
+        }
+    }
 }