Show progress bar when loading past room events

TODO.md

@@ -135,7 +135,6 @@
 - Server selection
 - Register/Reset for AddAccount page
 - Prevent using an alias if that user is not in the room or no permission
-- Spinner when loading past room events
 
 - Theming
   - Bundle fonts

src/qml/Base/HProgressBar.qml

@@ -27,7 +27,7 @@ ProgressBar {
             Behavior on color { HColorAnimation {} }
 
             HNumberAnimation on x {
-                running: bar.indeterminate
+                running: bar.visible && bar.indeterminate
                 duration: theme.animationDuration * 8
                 from: 0
                 to: bar.width - indicator.width

src/qml/Chat/Chat.qml

@@ -12,6 +12,7 @@ Item {
     property string userId: ""
     property string roomId: ""
 
+    property bool loadingMessages: false
     property bool ready: userInfo !== "waiting" && roomInfo !== "waiting"
 
     readonly property var userInfo:

src/qml/Chat/ChatPage.qml

@@ -22,6 +22,10 @@ HPage {
         Layout.fillWidth: true
     }
 
+    LoadingRoomProgressBar {
+        Layout.fillWidth: true
+    }
+
     EventList {
         id: eventList
 

src/qml/Chat/LoadingRoomProgressBar.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../Base"
+
+HProgressBar {
+    indeterminate: true
+    height: chat.loadingMessages ? implicitHeight : 0
+    visible: height > 0
+
+    Behavior on height { HNumberAnimation {} }
+}

src/qml/Chat/Timeline/EventList.qml

@@ -128,7 +128,8 @@ Rectangle {
                 // component is destroyed but func is still running
 
                 try {
-                    eventList.canLoad = false
+                    eventList.canLoad    = false
+                    chat.loadingMessages = true
 
                     py.callClientCoro(
                         chat.userId, "load_past_events", [chat.roomId],
@@ -136,9 +137,12 @@ Rectangle {
                             try {
                                 eventList.canLoad = moreToLoad
 
-                                // If loaded messages aren't enough to fill
+                                // Call yPosChanged() to run this func again
-                                // the screen, ensure this function runs again
+                                // if the loaded messages aren't enough to fill
+                                // the screen.
                                 if (moreToLoad) yPosChanged()
+
+                                chat.loadingMessages = false
                             } catch (err) {
                                 return
                             }