qml: Introduce Skeleton.qml

Author: johnny9

src/Makefile.qt.include

@@ -440,8 +440,9 @@ QML_RES_QML = \
   qml/controls/PageStack.qml \
   qml/controls/ProgressIndicator.qml \
   qml/controls/qmldir \
-  qml/controls/Setting.qml \
   qml/controls/SendOptionsPopup.qml \
+  qml/controls/Setting.qml \
+  qml/controls/Skeleton.qml \
   qml/controls/TextButton.qml \
   qml/controls/Theme.qml \
   qml/controls/ToggleButton.qml \

src/qml/bitcoin_qml.qrc

@@ -50,6 +50,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>

src/qml/controls/Skeleton.qml

@@ -0,0 +1,62 @@
+// 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
+
+    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: true
+        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
+        }
+    }
+}