Skip to content

Commit 7af5708

Browse files
hebastohebasto
committed
Merge #460: Add Skeleton loading to Activity
b987ae5 qml: Add Skeleton loading to Activity (johnny9) Pull request description: https://github.com/user-attachments/assets/0b934c17-e1e3-4d60-b846-8b86949f8765 Top commit has no ACKs. Tree-SHA512: 0b3033a0285fb8df3ced6672d9285e88140599791bad77e5247f99931e11b8d8462ca3a620452e086c0e35a8f627e2e0e79f9cb89d8e2c86954d3a6e1b682f2f
2 parents 989bbe0 + b987ae5 commit 7af5708

File tree

1 file changed

+141
-93
lines changed

1 file changed

+141
-93
lines changed

‎src/qml/pages/wallet/Activity.qml

Lines changed: 141 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -38,117 +38,165 @@ PageStack {
3838
bold: true
3939
}
4040

41-
contentItem: ListView {
42-
id: listView
43-
clip: true
44-
model: walletController.selectedWallet.activityListModel
45-
delegate: ItemDelegate {
46-
id: delegate
47-
required property string address;
48-
required property string amount;
49-
required property string date;
50-
required property int depth;
51-
required property string label;
52-
required property int status;
53-
required property int type;
54-
55-
HoverHandler {
56-
cursorShape: Qt.PointingHandCursor
57-
}
41+
contentItem: Item {
42+
Loader {
43+
id: skeletonOverlay
44+
45+
width: Math.min(parent.width - 40, 600)
5846

59-
onClicked: stackView.push(detailsPage)
6047

61-
width: ListView.view.width
48+
active: !walletController.initialized
6249

63-
background: Item {
64-
Separator {
65-
anchors.bottom: parent.bottom
66-
width: parent.width
50+
sourceComponent: Column {
51+
spacing: 0
52+
Repeater {
53+
model: 5
54+
delegate: ItemDelegate {
55+
height: 51
56+
width: skeletonOverlay.width
57+
contentItem: RowLayout {
58+
spacing: 12
59+
Skeleton {
60+
Layout.leftMargin: 6
61+
width: 15
62+
height: 15
63+
}
64+
Skeleton {
65+
height: 15
66+
Layout.fillWidth: true
67+
}
68+
Skeleton {
69+
width: 75
70+
height: 15
71+
}
72+
Skeleton {
73+
width: 120
74+
height: 15
75+
}
76+
}
77+
background: Item {
78+
Separator {
79+
anchors.bottom: parent.bottom
80+
width: parent.width
81+
}
82+
}
83+
}
6784
}
6885
}
86+
}
6987

70-
contentItem: RowLayout {
71-
Icon {
72-
Layout.alignment: Qt.AlignCenter
73-
Layout.margins: 6
74-
source: {
75-
if (delegate.type == Transaction.RecvWithAddress
76-
|| delegate.type == Transaction.RecvFromOther) {
77-
"qrc:/icons/triangle-down"
78-
} else if (delegate.type == Transaction.Generated) {
79-
"qrc:/icons/coinbase"
80-
} else {
81-
"qrc:/icons/triangle-up"
82-
}
88+
ListView {
89+
id: listView
90+
clip: true
91+
model: walletController.selectedWallet.activityListModel
92+
delegate: ItemDelegate {
93+
id: delegate
94+
required property string address;
95+
required property string amount;
96+
required property string date;
97+
required property int depth;
98+
required property string label;
99+
required property int status;
100+
required property int type;
101+
102+
HoverHandler {
103+
cursorShape: Qt.PointingHandCursor
104+
}
105+
106+
onClicked: stackView.push(detailsPage)
107+
108+
width: ListView.view.width
109+
110+
background: Item {
111+
Separator {
112+
anchors.bottom: parent.bottom
113+
width: parent.width
83114
}
84-
color: {
85-
if (delegate.status == Transaction.Confirmed) {
86-
if (delegate.type == Transaction.RecvWithAddress ||
87-
delegate.type == Transaction.RecvFromOther ||
88-
delegate.type == Transaction.Generated) {
89-
Theme.color.green
115+
}
116+
117+
contentItem: RowLayout {
118+
Icon {
119+
Layout.alignment: Qt.AlignCenter
120+
Layout.margins: 6
121+
source: {
122+
if (delegate.type == Transaction.RecvWithAddress
123+
|| delegate.type == Transaction.RecvFromOther) {
124+
"qrc:/icons/triangle-down"
125+
} else if (delegate.type == Transaction.Generated) {
126+
"qrc:/icons/coinbase"
90127
} else {
91-
Theme.color.orange
128+
"qrc:/icons/triangle-up"
92129
}
93-
} else {
94-
Theme.color.blue
95130
}
131+
color: {
132+
if (delegate.status == Transaction.Confirmed) {
133+
if (delegate.type == Transaction.RecvWithAddress ||
134+
delegate.type == Transaction.RecvFromOther ||
135+
delegate.type == Transaction.Generated) {
136+
Theme.color.green
137+
} else {
138+
Theme.color.orange
139+
}
140+
} else {
141+
Theme.color.blue
142+
}
143+
}
144+
size: 14
96145
}
97-
size: 14
98-
}
99-
CoreText {
100-
Layout.alignment: Qt.AlignCenter
101-
Layout.fillWidth: true
102-
Layout.preferredWidth: 0
103-
Layout.margins: 6
104-
color: delegate.hovered ? Theme.color.orange : Theme.color.neutral9
105-
elide: Text.ElideMiddle
106-
text: {
107-
if (delegate.label != "") {
108-
delegate.label
109-
} else {
110-
delegate.address
146+
CoreText {
147+
Layout.alignment: Qt.AlignCenter
148+
Layout.fillWidth: true
149+
Layout.preferredWidth: 0
150+
Layout.margins: 6
151+
color: delegate.hovered ? Theme.color.orange : Theme.color.neutral9
152+
elide: Text.ElideMiddle
153+
text: {
154+
if (delegate.label != "") {
155+
delegate.label
156+
} else {
157+
delegate.address
158+
}
111159
}
160+
font.pixelSize: 15
161+
horizontalAlignment: Text.AlignLeft
162+
clip: true
112163
}
113-
font.pixelSize: 15
114-
horizontalAlignment: Text.AlignLeft
115-
clip: true
116-
}
117164

118-
CoreText {
119-
Layout.alignment: Qt.AlignCenter
120-
Layout.margins: 6
121-
text: delegate.date
122-
font.pixelSize: 15
123-
horizontalAlignment: Text.AlignRight
124-
}
165+
CoreText {
166+
Layout.alignment: Qt.AlignCenter
167+
Layout.margins: 6
168+
text: delegate.date
169+
font.pixelSize: 15
170+
horizontalAlignment: Text.AlignRight
171+
}
125172

126-
CoreText {
127-
Layout.alignment: Qt.AlignCenter
128-
Layout.margins: 6
129-
text: delegate.amount
130-
font.pixelSize: 15
131-
horizontalAlignment: Text.AlignRight
132-
color: {
133-
if (delegate.type == Transaction.RecvWithAddress
134-
|| delegate.type == Transaction.RecvFromOther
135-
|| delegate.type == Transaction.Generated) {
136-
Theme.color.green
137-
} else {
138-
Theme.color.neutral9
173+
CoreText {
174+
Layout.alignment: Qt.AlignCenter
175+
Layout.margins: 6
176+
text: delegate.amount
177+
font.pixelSize: 15
178+
horizontalAlignment: Text.AlignRight
179+
color: {
180+
if (delegate.type == Transaction.RecvWithAddress
181+
|| delegate.type == Transaction.RecvFromOther
182+
|| delegate.type == Transaction.Generated) {
183+
Theme.color.green
184+
} else {
185+
Theme.color.neutral9
186+
}
139187
}
140188
}
141-
}
142189

143-
Component {
144-
id: detailsPage
145-
ActivityDetails {
146-
amount: delegate.amount
147-
date: delegate.date
148-
depth: delegate.depth
149-
type: delegate.type
150-
status: delegate.status
151-
address: delegate.address
190+
Component {
191+
id: detailsPage
192+
ActivityDetails {
193+
amount: delegate.amount
194+
date: delegate.date
195+
depth: delegate.depth
196+
type: delegate.type
197+
status: delegate.status
198+
address: delegate.address
199+
}
152200
}
153201
}
154202
}

0 commit comments

Comments
 (0)