status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

fixes #9106
This commit is contained in:
Khushboo Mehta 2023-01-31 16:19:07 +05:30 committed by Anthony Laibe
parent 36f562243c
commit 9e23f78180
3 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
View File

@ -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)
{
return loading
} else if (root.collectiblesModel.collectionCount === 0) {
if (root.areCollectionsLoaded && 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: model
anchors.fill: parent
anchors.bottomMargin: 4
onCollectibleClicked: {
root.collectibleClicked(slug, collectibleId);
}
collectibleModel: root.areCollectionsLoaded ? model : undefined
isLoadingDelegate: !root.areCollectionsLoaded
onCollectibleClicked: {
root.collectibleClicked(slug, collectibleId);
}
}
}

59
ui/app/AppLayouts/Wallet/views/collectibles/CollectibleView.qml
View File

@ -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.topMargin: 0
Layout.preferredWidth: 144
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.leftMargin: 8
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,16 +90,16 @@ 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);
}
}
}
}
}

1
ui/imports/utils/Constants.qml
View File

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