Skip to content

Commit 2ba5148

Browse files
committed
qml: Add Skeleton loading animation to WalletBadge
1 parent 6bbd72d commit 2ba5148

File tree

2 files changed

+66
-31
lines changed

2 files changed

+66
-31
lines changed

src/qml/pages/wallet/DesktopWallets.qml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ Page {
2929
implicitHeight: 46
3030
text: walletController.selectedWallet.name
3131
balance: walletController.selectedWallet.balance
32+
loading: !walletController.initialized
3233

3334
MouseArea {
3435
anchors.fill: parent

src/qml/pages/wallet/WalletBadge.qml

Lines changed: 65 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ Button {
2222
property bool showBalance: true
2323
property bool showIcon: true
2424
property string balance: "0.0 000 000"
25+
property bool loading: false
2526

2627
checkable: true
2728
hoverEnabled: AppMode.isDesktop
@@ -31,39 +32,72 @@ Button {
3132
topPadding: 0
3233
clip: true
3334

34-
contentItem: RowLayout {
35-
anchors.leftMargin: 5
36-
anchors.rightMargin: 5
37-
clip: true
38-
spacing: 5
39-
Icon {
40-
id: icon
41-
visible: root.showIcon
42-
source: "image://images/singlesig-wallet"
43-
color: Theme.color.neutral8
44-
size: 30
45-
Layout.minimumWidth: 30
46-
Layout.preferredWidth: 30
47-
Layout.maximumWidth: 30
48-
}
49-
ColumnLayout {
50-
spacing: 2
51-
CoreText {
52-
horizontalAlignment: Text.AlignLeft
35+
contentItem: Item {
36+
RowLayout {
37+
visible: root.loading
38+
anchors.leftMargin: 5
39+
anchors.rightMargin: 5
40+
anchors.centerIn: parent
41+
spacing: 5
42+
43+
Skeleton {
44+
Layout.preferredHeight: 30
45+
Layout.preferredWidth: 30
46+
}
47+
ColumnLayout {
48+
spacing: 2
49+
Layout.preferredHeight: 30
5350
Layout.fillWidth: true
54-
wrap: false
55-
id: buttonText
56-
font.pixelSize: 13
57-
text: root.text
58-
color: root.textColor
59-
bold: true
60-
visible: root.text !== ""
51+
52+
Skeleton {
53+
Layout.preferredHeight: 15
54+
Layout.preferredWidth: 50
55+
}
56+
57+
Skeleton {
58+
Layout.preferredHeight: 15
59+
Layout.preferredWidth: 114
60+
}
61+
}
62+
}
63+
64+
RowLayout {
65+
visible: !root.loading
66+
67+
anchors.leftMargin: 5
68+
anchors.rightMargin: 5
69+
anchors.centerIn: parent
70+
clip: true
71+
spacing: 5
72+
Icon {
73+
id: icon
74+
visible: root.showIcon
75+
source: "image://images/singlesig-wallet"
76+
color: Theme.color.neutral8
77+
size: 30
78+
Layout.minimumWidth: 30
79+
Layout.preferredWidth: 30
80+
Layout.maximumWidth: 30
6181
}
62-
CoreText {
63-
id: balanceText
64-
visible: root.showBalance
65-
text: "" + root.balance
66-
color: Theme.color.neutral7
82+
ColumnLayout {
83+
spacing: 2
84+
CoreText {
85+
horizontalAlignment: Text.AlignLeft
86+
Layout.fillWidth: true
87+
wrap: false
88+
id: buttonText
89+
font.pixelSize: 13
90+
text: root.text
91+
color: root.textColor
92+
bold: true
93+
visible: root.text !== ""
94+
}
95+
CoreText {
96+
id: balanceText
97+
visible: root.showBalance
98+
text: "" + root.balance
99+
color: Theme.color.neutral7
100+
}
67101
}
68102
}
69103
}

0 commit comments

Comments
 (0)