qml: Add Skeleton loading animation to WalletBadge

Author: johnny9

src/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

src/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,72 @@ 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
+            }
+            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
+                }
+
+                Skeleton {
+                    Layout.preferredHeight: 15
+                    Layout.preferredWidth: 114
+                }
+            }
+        }
+
+        RowLayout {
+            visible: !root.loading
+
+            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
+                }
             }
         }
     }