Add Nheko logo QML Spinner

resources/qml/TimelineView.qml

@@ -6,6 +6,8 @@ import "./delegates"
 import "./device-verification"
 import "./emoji"
 import "./voip"
+import "./ui"
+
 import Qt.labs.platform 1.1 as Platform
 import QtGraphicalEffects 1.0
 import QtQuick 2.9
@@ -29,12 +31,13 @@ Item {
         color: Nheko.colors.text
     }
 
-    BusyIndicator {
+    Spinner {
         visible: running
         anchors.centerIn: parent
+        foreground: timelineRoot.colors.mid
         running: TimelineManager.isInitialSync
-        height: 200
+        // height is somewhat arbitrary here... don't set width because width scales w/ height
-        width: 200
+        height: parent.height / 16
         z: 3
     }
 

resources/qml/ui/Spinner.qml

@@ -0,0 +1,225 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.12
+import QtGraphicalEffects 1.12
+
+Item {
+    id: spinner
+
+    property int spacing: 0
+    property bool running: true
+    property var foreground: "#333"
+    readonly property int barCount: 6
+    readonly property real a: Math.PI / 6
+    readonly property var colors: ["#c0def5", "#87aade", "white"]
+    readonly property var anims: [anim1, anim2, anim3, anim4, anim5, anim6]
+
+    height: 40
+    width: barCount * (height * 0.375)
+
+    Row {
+        id: row
+
+        Rectangle {
+            id: rect1
+
+            width: ((spinner.width / spinner.barCount) - (spinner.spacing)) * 1.5
+            height: spinner.height / 3.5
+            color: "white"
+        }
+
+        Rectangle {
+            id: rect2
+
+            width: (spinner.width / spinner.barCount) - spinner.spacing
+            height: spinner.height
+            color: spinner.colors[0]
+        }
+
+        Rectangle {
+            id: rect3
+
+            width: (spinner.width / spinner.barCount) - spinner.spacing
+            height: spinner.height
+            color: spinner.colors[1]
+        }
+
+        Rectangle {
+            id: rect4
+
+            width: (spinner.width / spinner.barCount) - spinner.spacing
+            height: spinner.height
+            color: spinner.colors[2]
+        }
+
+        Rectangle {
+            id: rect5
+
+            width: (spinner.width / (spinner.barCount + 1)) - spinner.spacing
+            height: spinner.height / 3.5
+            color: "white"
+        }
+
+        Rectangle {
+            id: rect6
+
+            width: (spinner.width / spinner.barCount) - spinner.spacing
+            height: spinner.height
+            color: "white"
+        }
+
+        SequentialAnimation {
+            id: anim1
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect1
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        SequentialAnimation {
+            id: anim2
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect2
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        SequentialAnimation {
+            id: anim3
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect3
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        SequentialAnimation {
+            id: anim4
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect4
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        SequentialAnimation {
+            id: anim5
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect5
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        SequentialAnimation {
+            id: anim6
+
+            loops: Animation.Infinite
+
+            NumberAnimation {
+                target: rect6
+                property: "opacity"
+                from: 0
+                to: 1
+                duration: 300
+            }
+
+            PauseAnimation {
+                duration: spinner.barCount * 150
+            }
+
+        }
+
+        transform: Matrix4x4 {
+            matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+        }
+
+    }
+
+    Timer {
+        // ----- Private Properties ----- //
+        property int _barIndex: 0
+
+        interval: 80
+        repeat: true
+        running: spinner.running
+        onTriggered: {
+            if (_barIndex === spinner.barCount) {
+                _barIndex = 0;
+                stop();
+            } else {
+                anims[_barIndex].start();
+                _barIndex++;
+            }
+        }
+        Component.onCompleted: start()
+    }
+
+    Glow {
+        anchors.fill: row
+        radius: 14
+        samples: 17
+        color: spinner.foreground
+        source: row
+
+        transform: Matrix4x4 {
+            matrix: Qt.matrix4x4(Math.cos(spinner.a), -Math.sin(spinner.a), 0, 0, 0, Math.cos(spinner.a), 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+        }
+
+    }
+
+}

resources/res.qrc

@@ -170,6 +170,7 @@
         <file>qml/device-verification/Success.qml</file>
         <file>qml/dialogs/InputDialog.qml</file>
         <file>qml/ui/Ripple.qml</file>
+        <file>qml/ui/Spinner.qml</file>
         <file>qml/voip/ActiveCallBar.qml</file>
         <file>qml/voip/CallDevices.qml</file>
         <file>qml/voip/CallInvite.qml</file>