Skip to content

Add Skeleton loading to Activity #460

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 5, 2025
Merged

Add Skeleton loading to Activity #460

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 141 additions & 93 deletions src/qml/pages/wallet/Activity.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,117 +38,165 @@ PageStack {
bold: true
}

contentItem: ListView {
id: listView
clip: true
model: walletController.selectedWallet.activityListModel
delegate: ItemDelegate {
id: delegate
required property string address;
required property string amount;
required property string date;
required property int depth;
required property string label;
required property int status;
required property int type;

HoverHandler {
cursorShape: Qt.PointingHandCursor
}
contentItem: Item {
Loader {
id: skeletonOverlay

width: Math.min(parent.width - 40, 600)

onClicked: stackView.push(detailsPage)

width: ListView.view.width
active: !walletController.initialized

background: Item {
Separator {
anchors.bottom: parent.bottom
width: parent.width
sourceComponent: Column {
spacing: 0
Repeater {
model: 5
delegate: ItemDelegate {
height: 51
width: skeletonOverlay.width
contentItem: RowLayout {
spacing: 12
Skeleton {
Layout.leftMargin: 6
width: 15
height: 15
}
Skeleton {
height: 15
Layout.fillWidth: true
}
Skeleton {
width: 75
height: 15
}
Skeleton {
width: 120
height: 15
}
}
background: Item {
Separator {
anchors.bottom: parent.bottom
width: parent.width
}
}
}
}
}
}

contentItem: RowLayout {
Icon {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
source: {
if (delegate.type == Transaction.RecvWithAddress
|| delegate.type == Transaction.RecvFromOther) {
"qrc:/icons/triangle-down"
} else if (delegate.type == Transaction.Generated) {
"qrc:/icons/coinbase"
} else {
"qrc:/icons/triangle-up"
}
ListView {
id: listView
clip: true
model: walletController.selectedWallet.activityListModel
delegate: ItemDelegate {
id: delegate
required property string address;
required property string amount;
required property string date;
required property int depth;
required property string label;
required property int status;
required property int type;

HoverHandler {
cursorShape: Qt.PointingHandCursor
}

onClicked: stackView.push(detailsPage)

width: ListView.view.width

background: Item {
Separator {
anchors.bottom: parent.bottom
width: parent.width
}
color: {
if (delegate.status == Transaction.Confirmed) {
if (delegate.type == Transaction.RecvWithAddress ||
delegate.type == Transaction.RecvFromOther ||
delegate.type == Transaction.Generated) {
Theme.color.green
}

contentItem: RowLayout {
Icon {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
source: {
if (delegate.type == Transaction.RecvWithAddress
|| delegate.type == Transaction.RecvFromOther) {
"qrc:/icons/triangle-down"
} else if (delegate.type == Transaction.Generated) {
"qrc:/icons/coinbase"
} else {
Theme.color.orange
"qrc:/icons/triangle-up"
}
} else {
Theme.color.blue
}
color: {
if (delegate.status == Transaction.Confirmed) {
if (delegate.type == Transaction.RecvWithAddress ||
delegate.type == Transaction.RecvFromOther ||
delegate.type == Transaction.Generated) {
Theme.color.green
} else {
Theme.color.orange
}
} else {
Theme.color.blue
}
}
size: 14
}
size: 14
}
CoreText {
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
Layout.preferredWidth: 0
Layout.margins: 6
color: delegate.hovered ? Theme.color.orange : Theme.color.neutral9
elide: Text.ElideMiddle
text: {
if (delegate.label != "") {
delegate.label
} else {
delegate.address
CoreText {
Layout.alignment: Qt.AlignCenter
Layout.fillWidth: true
Layout.preferredWidth: 0
Layout.margins: 6
color: delegate.hovered ? Theme.color.orange : Theme.color.neutral9
elide: Text.ElideMiddle
text: {
if (delegate.label != "") {
delegate.label
} else {
delegate.address
}
}
font.pixelSize: 15
horizontalAlignment: Text.AlignLeft
clip: true
}
font.pixelSize: 15
horizontalAlignment: Text.AlignLeft
clip: true
}

CoreText {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
text: delegate.date
font.pixelSize: 15
horizontalAlignment: Text.AlignRight
}
CoreText {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
text: delegate.date
font.pixelSize: 15
horizontalAlignment: Text.AlignRight
}

CoreText {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
text: delegate.amount
font.pixelSize: 15
horizontalAlignment: Text.AlignRight
color: {
if (delegate.type == Transaction.RecvWithAddress
|| delegate.type == Transaction.RecvFromOther
|| delegate.type == Transaction.Generated) {
Theme.color.green
} else {
Theme.color.neutral9
CoreText {
Layout.alignment: Qt.AlignCenter
Layout.margins: 6
text: delegate.amount
font.pixelSize: 15
horizontalAlignment: Text.AlignRight
color: {
if (delegate.type == Transaction.RecvWithAddress
|| delegate.type == Transaction.RecvFromOther
|| delegate.type == Transaction.Generated) {
Theme.color.green
} else {
Theme.color.neutral9
}
}
}
}

Component {
id: detailsPage
ActivityDetails {
amount: delegate.amount
date: delegate.date
depth: delegate.depth
type: delegate.type
status: delegate.status
address: delegate.address
Component {
id: detailsPage
ActivityDetails {
amount: delegate.amount
date: delegate.date
depth: delegate.depth
type: delegate.type
status: delegate.status
address: delegate.address
}
}
}
}
Expand Down
Loading