Merge bitcoin-core#455: Add Skeleton loading animation to the Wallet selector

9a24e34 qml: Explicitly stop Skeleton Animation when not loading (johnny9)
933335e qml: Add fade-in animation to WalletBadge (johnny9)
264f0b1 qml: Add Skeleton loading animation to WalletBadge (johnny9)
0cfcffd qml: Introduce Skeleton.qml (johnny9)
0e0a957 qml: Fix walletqmlmodel.cpp include order (johnny9)
d8b12db 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 9a24e34, I have skimmed through the code and it looks OK.

Tree-SHA512: df9dda2bdf3d11965d2cf575ff8db7c9ea0ea97308edc3bd4e4ee65c5ac70c89f491cd26f7393858dd33ce9e8ccf3d90095a56d053797101c1aeee589edcbcbf

Author: hebasto

qml/bitcoin_qml.qrc

@@ -51,6 +51,7 @@
         <file>controls/qmldir</file>
         <file>controls/SendOptionsPopup.qml</file>
         <file>controls/Setting.qml</file>
+        <file>controls/Skeleton.qml</file>
         <file>controls/TextButton.qml</file>
         <file>controls/Theme.qml</file>
         <file>controls/ToggleButton.qml</file>

qml/controls/Skeleton.qml

@@ -0,0 +1,63 @@
+// Copyright (c) 2025 The Bitcoin Core developers
+// Distributed under the MIT software license, see the accompanying
+// file COPYING or http://www.opensource.org/licenses/mit-license.php.
+
+import QtQuick 2.15
+
+Rectangle {
+    id: root
+    property color baseColor: Theme.color.neutral1
+    property color highlightColor: Theme.color.neutral2
+    property int shimmerDuration: 2500
+    property bool loading: true
+
+    radius: 3
+
+    gradient: Gradient {
+        orientation: Gradient.Horizontal
+        GradientStop {
+            id: stop1
+            position: 0.0
+            color: root.baseColor
+        }
+        GradientStop {
+            id: stop2
+            position: 0.5
+            color: root.highlightColor
+        }
+        GradientStop {
+            id: stop3;
+            position: 1
+            color: root.baseColor
+        }
+    }
+
+    ParallelAnimation  {
+        running: loading
+        loops: Animation.Infinite
+        NumberAnimation {
+            target: stop1
+            property: "position"
+            from: -1.0
+            to: 1.0
+            duration: root.shimmerDuration
+            easing.type: Easing.Linear
+        }
+        NumberAnimation {
+            target: stop2
+            property: "position"
+            from: -0.5
+            to: 1.5
+            duration: root.shimmerDuration;
+            easing.type: Easing.Linear
+        }
+        NumberAnimation {
+            target: stop3
+            property: "position"
+            from: 0.0
+            to: 2.0
+            duration: root.shimmerDuration
+            easing.type: Easing.Linear
+        }
+    }
+}

qml/models/walletqmlmodel.cpp

@@ -4,13 +4,14 @@
 
 #include <qml/models/walletqmlmodel.h>
 
+#include <qml/models/activitylistmodel.h>
+#include <qml/models/sendrecipient.h>
+#include <qml/models/walletqmlmodeltransaction.h>
+
 #include <consensus/amount.h>
 #include <interfaces/wallet.h>
 #include <key_io.h>
 #include <outputtype.h>
-#include <qml/models/activitylistmodel.h>
-#include <qml/models/sendrecipient.h>
-#include <qml/models/walletqmlmodeltransaction.h>
 #include <qt/bitcoinunits.h>
 #include <wallet/coincontrol.h>
 #include <wallet/wallet.h>

qml/pages/wallet/DesktopWallets.qml

@@ -29,6 +29,7 @@ Page {
             implicitHeight: 46
             text: walletController.selectedWallet.name
             balance: walletController.selectedWallet.balance
+            loading: !walletController.initialized
 
             MouseArea {
                 anchors.fill: parent

qml/pages/wallet/WalletBadge.qml

@@ -22,6 +22,7 @@ Button {
     property bool showBalance: true
     property bool showIcon: true
     property string balance: "0.0 000 000"
+    property bool loading: false
 
     checkable: true
     hoverEnabled: AppMode.isDesktop
@@ -31,39 +32,81 @@ Button {
     topPadding: 0
     clip: true
 
-    contentItem: RowLayout {
-        anchors.leftMargin: 5
-        anchors.rightMargin: 5
-        clip: true
-        spacing: 5
-        Icon {
-            id: icon
-            visible: root.showIcon
-            source: "image://images/singlesig-wallet"
-            color: Theme.color.neutral8
-            size: 30
-            Layout.minimumWidth: 30
-            Layout.preferredWidth: 30
-            Layout.maximumWidth: 30
-        }
-        ColumnLayout {
-            spacing: 2
-            CoreText {
-                horizontalAlignment: Text.AlignLeft
+    contentItem: Item {
+        RowLayout {
+            visible: root.loading
+            anchors.leftMargin: 5
+            anchors.rightMargin: 5
+            anchors.centerIn: parent
+            spacing: 5
+
+            Skeleton {
+                Layout.preferredHeight: 30
+                Layout.preferredWidth: 30
+                loading: root.loading
+            }
+            ColumnLayout {
+                spacing: 2
+                Layout.preferredHeight: 30
                 Layout.fillWidth: true
-                wrap: false
-                id: buttonText
-                font.pixelSize: 13
-                text: root.text
-                color: root.textColor
-                bold: true
-                visible: root.text !== ""
+
+                Skeleton {
+                    Layout.preferredHeight: 15
+                    Layout.preferredWidth: 50
+                    loading: root.loading
+                }
+
+                Skeleton {
+                    Layout.preferredHeight: 15
+                    Layout.preferredWidth: 114
+                    loading: root.loading
+                }
+            }
+        }
+
+        RowLayout {
+            visible: !root.loading
+
+            opacity: visible ? 1 : 0
+
+            Behavior on opacity {
+                NumberAnimation { duration: 400 }
+            }
+
+            anchors.leftMargin: 5
+            anchors.rightMargin: 5
+            anchors.centerIn: parent
+            clip: true
+            spacing: 5
+            Icon {
+                id: icon
+                visible: root.showIcon
+                source: "image://images/singlesig-wallet"
+                color: Theme.color.neutral8
+                size: 30
+                Layout.minimumWidth: 30
+                Layout.preferredWidth: 30
+                Layout.maximumWidth: 30
             }
-            CoreText {
-                id: balanceText
-                visible: root.showBalance
-                text: "₿ " + root.balance
-                color: Theme.color.neutral7
+            ColumnLayout {
+                spacing: 2
+                CoreText {
+                    horizontalAlignment: Text.AlignLeft
+                    Layout.fillWidth: true
+                    wrap: false
+                    id: buttonText
+                    font.pixelSize: 13
+                    text: root.text
+                    color: root.textColor
+                    bold: true
+                    visible: root.text !== ""
+                }
+                CoreText {
+                    id: balanceText
+                    visible: root.showBalance
+                    text: "₿ " + root.balance
+                    color: Theme.color.neutral7
+                }
             }
         }
     }

qml/walletqmlcontroller.cpp

@@ -120,4 +120,7 @@ void WalletQmlController::initialize()
         m_selected_wallet = m_wallets.front();
         Q_EMIT selectedWalletChanged();
     }
+
+    m_initialized = true;
+    Q_EMIT initializedChanged();
 }

qml/walletqmlcontroller.h

@@ -6,19 +6,22 @@
 #define BITCOIN_QML_WALLETQMLCONTROLLER_H
 
 #include <qml/models/walletqmlmodel.h>
+
 #include <interfaces/handler.h>
 #include <interfaces/node.h>
 #include <interfaces/wallet.h>
 
+#include <memory>
+
 #include <QMutex>
 #include <QObject>
 #include <QThread>
-#include <memory>
 
 class WalletQmlController : public QObject
 {
     Q_OBJECT
     Q_PROPERTY(WalletQmlModel* selectedWallet READ selectedWallet NOTIFY selectedWalletChanged)
+    Q_PROPERTY(bool initialized READ initialized NOTIFY initializedChanged)
 
 public:
     explicit WalletQmlController(interfaces::Node& node, QObject *parent = nullptr);
@@ -29,16 +32,19 @@ class WalletQmlController : public QObject
 
     WalletQmlModel* selectedWallet() const;
     void unloadWallets();
+    bool initialized() const { return m_initialized; }
 
 Q_SIGNALS:
     void selectedWalletChanged();
+    void initializedChanged();
 
 public Q_SLOTS:
     void initialize();
 
 private:
     void handleLoadWallet(std::unique_ptr<interfaces::Wallet> wallet);
 
+    bool m_initialized{false};
     interfaces::Node& m_node;
     WalletQmlModel* m_selected_wallet;
     QObject* m_worker;