Skip to content

Commit fa34a74

Browse files
committed
Merge #455: Add Skeleton loading animation to the Wallet selector
bb95aa7 qml: Explicitly stop Skeleton Animation when not loading (johnny9) 99ca9fd qml: Add fade-in animation to WalletBadge (johnny9) 2ba5148 qml: Add Skeleton loading animation to WalletBadge (johnny9) 6bbd72d qml: Introduce Skeleton.qml (johnny9) bad0648 qml: Fix walletqmlmodel.cpp include order (johnny9) ed5f034 qml: Add initialized property to WalletQmlController (johnny9) Pull request description: This adds the first skeleton loading section to the desktop wallet. Specifically the WalletBadge at the top left corner that is used for selecting a wallet. https://github.com/user-attachments/assets/968c8da2-61af-459b-ad62-6b05c1ed7bb8 ACKs for top commit: hebasto: ACK bb95aa7, I have skimmed through the code and it looks OK. Tree-SHA512: df9dda2bdf3d11965d2cf575ff8db7c9ea0ea97308edc3bd4e4ee65c5ac70c89f491cd26f7393858dd33ce9e8ccf3d90095a56d053797101c1aeee589edcbcbf
2 parents b411e58 + bb95aa7 commit fa34a74

File tree

8 files changed

+155
-36
lines changed

8 files changed

+155
-36
lines changed

src/Makefile.qt.include

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -443,8 +443,9 @@ QML_RES_QML = \
443443
qml/controls/PageStack.qml \
444444
qml/controls/ProgressIndicator.qml \
445445
qml/controls/qmldir \
446-
qml/controls/Setting.qml \
447446
qml/controls/SendOptionsPopup.qml \
447+
qml/controls/Setting.qml \
448+
qml/controls/Skeleton.qml \
448449
qml/controls/TextButton.qml \
449450
qml/controls/Theme.qml \
450451
qml/controls/ToggleButton.qml \

src/qml/bitcoin_qml.qrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
<file>controls/qmldir</file>
5252
<file>controls/SendOptionsPopup.qml</file>
5353
<file>controls/Setting.qml</file>
54+
<file>controls/Skeleton.qml</file>
5455
<file>controls/TextButton.qml</file>
5556
<file>controls/Theme.qml</file>
5657
<file>controls/ToggleButton.qml</file>

src/qml/controls/Skeleton.qml

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
// Copyright (c) 2025 The Bitcoin Core developers
2+
// Distributed under the MIT software license, see the accompanying
3+
// file COPYING or http://www.opensource.org/licenses/mit-license.php.
4+
5+
import QtQuick 2.15
6+
7+
Rectangle {
8+
id: root
9+
property color baseColor: Theme.color.neutral1
10+
property color highlightColor: Theme.color.neutral2
11+
property int shimmerDuration: 2500
12+
property bool loading: true
13+
14+
radius: 3
15+
16+
gradient: Gradient {
17+
orientation: Gradient.Horizontal
18+
GradientStop {
19+
id: stop1
20+
position: 0.0
21+
color: root.baseColor
22+
}
23+
GradientStop {
24+
id: stop2
25+
position: 0.5
26+
color: root.highlightColor
27+
}
28+
GradientStop {
29+
id: stop3;
30+
position: 1
31+
color: root.baseColor
32+
}
33+
}
34+
35+
ParallelAnimation {
36+
running: loading
37+
loops: Animation.Infinite
38+
NumberAnimation {
39+
target: stop1
40+
property: "position"
41+
from: -1.0
42+
to: 1.0
43+
duration: root.shimmerDuration
44+
easing.type: Easing.Linear
45+
}
46+
NumberAnimation {
47+
target: stop2
48+
property: "position"
49+
from: -0.5
50+
to: 1.5
51+
duration: root.shimmerDuration;
52+
easing.type: Easing.Linear
53+
}
54+
NumberAnimation {
55+
target: stop3
56+
property: "position"
57+
from: 0.0
58+
to: 2.0
59+
duration: root.shimmerDuration
60+
easing.type: Easing.Linear
61+
}
62+
}
63+
}

src/qml/models/walletqmlmodel.cpp

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44

55
#include <qml/models/walletqmlmodel.h>
66

7+
#include <qml/models/activitylistmodel.h>
8+
#include <qml/models/sendrecipient.h>
9+
#include <qml/models/walletqmlmodeltransaction.h>
10+
711
#include <consensus/amount.h>
812
#include <interfaces/wallet.h>
913
#include <key_io.h>
1014
#include <outputtype.h>
11-
#include <qml/models/activitylistmodel.h>
12-
#include <qml/models/sendrecipient.h>
13-
#include <qml/models/walletqmlmodeltransaction.h>
1415
#include <qt/bitcoinunits.h>
1516
#include <wallet/coincontrol.h>
1617
#include <wallet/wallet.h>

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: 74 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,81 @@ 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+
loading: root.loading
47+
}
48+
ColumnLayout {
49+
spacing: 2
50+
Layout.preferredHeight: 30
5351
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 !== ""
52+
53+
Skeleton {
54+
Layout.preferredHeight: 15
55+
Layout.preferredWidth: 50
56+
loading: root.loading
57+
}
58+
59+
Skeleton {
60+
Layout.preferredHeight: 15
61+
Layout.preferredWidth: 114
62+
loading: root.loading
63+
}
64+
}
65+
}
66+
67+
RowLayout {
68+
visible: !root.loading
69+
70+
opacity: visible ? 1 : 0
71+
72+
Behavior on opacity {
73+
NumberAnimation { duration: 400 }
74+
}
75+
76+
anchors.leftMargin: 5
77+
anchors.rightMargin: 5
78+
anchors.centerIn: parent
79+
clip: true
80+
spacing: 5
81+
Icon {
82+
id: icon
83+
visible: root.showIcon
84+
source: "image://images/singlesig-wallet"
85+
color: Theme.color.neutral8
86+
size: 30
87+
Layout.minimumWidth: 30
88+
Layout.preferredWidth: 30
89+
Layout.maximumWidth: 30
6190
}
62-
CoreText {
63-
id: balanceText
64-
visible: root.showBalance
65-
text: "" + root.balance
66-
color: Theme.color.neutral7
91+
ColumnLayout {
92+
spacing: 2
93+
CoreText {
94+
horizontalAlignment: Text.AlignLeft
95+
Layout.fillWidth: true
96+
wrap: false
97+
id: buttonText
98+
font.pixelSize: 13
99+
text: root.text
100+
color: root.textColor
101+
bold: true
102+
visible: root.text !== ""
103+
}
104+
CoreText {
105+
id: balanceText
106+
visible: root.showBalance
107+
text: "" + root.balance
108+
color: Theme.color.neutral7
109+
}
67110
}
68111
}
69112
}

src/qml/walletqmlcontroller.cpp

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,4 +120,7 @@ void WalletQmlController::initialize()
120120
m_selected_wallet = m_wallets.front();
121121
Q_EMIT selectedWalletChanged();
122122
}
123+
124+
m_initialized = true;
125+
Q_EMIT initializedChanged();
123126
}

src/qml/walletqmlcontroller.h

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,22 @@
66
#define BITCOIN_QML_WALLETQMLCONTROLLER_H
77

88
#include <qml/models/walletqmlmodel.h>
9+
910
#include <interfaces/handler.h>
1011
#include <interfaces/node.h>
1112
#include <interfaces/wallet.h>
1213

14+
#include <memory>
15+
1316
#include <QMutex>
1417
#include <QObject>
1518
#include <QThread>
16-
#include <memory>
1719

1820
class WalletQmlController : public QObject
1921
{
2022
Q_OBJECT
2123
Q_PROPERTY(WalletQmlModel* selectedWallet READ selectedWallet NOTIFY selectedWalletChanged)
24+
Q_PROPERTY(bool initialized READ initialized NOTIFY initializedChanged)
2225

2326
public:
2427
explicit WalletQmlController(interfaces::Node& node, QObject *parent = nullptr);
@@ -29,16 +32,19 @@ class WalletQmlController : public QObject
2932

3033
WalletQmlModel* selectedWallet() const;
3134
void unloadWallets();
35+
bool initialized() const { return m_initialized; }
3236

3337
Q_SIGNALS:
3438
void selectedWalletChanged();
39+
void initializedChanged();
3540

3641
public Q_SLOTS:
3742
void initialize();
3843

3944
private:
4045
void handleLoadWallet(std::unique_ptr<interfaces::Wallet> wallet);
4146

47+
bool m_initialized{false};
4248
interfaces::Node& m_node;
4349
WalletQmlModel* m_selected_wallet;
4450
QObject* m_worker;

0 commit comments

Comments
 (0)