Replace room loading bar with an eventList header

src/gui/Base/HButton.qml

@@ -32,7 +32,7 @@ Button {
     background: HButtonBackground {
         button: button
         buttonTheme: theme.controls.button
-        radius: circle ? height : 0
+        radius: circle ? height : enableRadius ? theme.radius : 0
         color: backgroundColor
     }
 
@@ -51,6 +51,7 @@ Button {
     property bool loading: false
     property bool circle: false
     property bool padded: true
+    property bool enableRadius: false
 
     property HToolTip toolTip: HToolTip {
         id: toolTip

src/gui/Pages/Chat/Chat.qml

@@ -17,7 +17,6 @@ Item {
     property QtObject userInfo: ModelStore.get("accounts").find(userId)
     property QtObject roomInfo: ModelStore.get(userId, "rooms").find(roomId)
 
-    property bool loadingMessages: false
     property bool ready: Boolean(userInfo && roomInfo)
 
     readonly property alias loader: loader

src/gui/Pages/Chat/ChatPage.qml

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

src/gui/Pages/Chat/LoadingRoomProgressBar.qml

@@ -1,13 +0,0 @@
-// SPDX-License-Identifier: LGPL-3.0-or-later
-
-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/gui/Pages/Chat/Timeline/EventList.qml

@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: LGPL-3.0-or-later
 
 import QtQuick 2.12
+import QtQuick.Layouts 1.12
 import "../../.."
 import "../../../Base"
 
@@ -84,12 +85,34 @@ Rectangle {
             // fetch past events.
             onInviterChanged: canLoad = true
 
+            // Since the list is BottomToTop, this is actually a header
+            footer: Item {
+                width: eventList.width
+                height: (button.height + theme.spacing * 2) * opacity
+                opacity: eventList.loading ? 1 : 0
+                visible: opacity > 0
+
+                Behavior on opacity { HNumberAnimation {} }
+
+                HButton {
+                    id: button
+                    width: Math.min(parent.width, implicitWidth)
+                    anchors.centerIn: parent
+
+                    loading: true
+                    text: qsTr("Loading previous messages...")
+                    enableRadius: true
+                    iconItem.small: true
+                }
+            }
+
             Component.onCompleted: shortcuts.flickTarget = eventList
 
 
             property string inviter: chat.roomInfo.inviter || ""
             property real yPos: visibleArea.yPosition
             property bool canLoad: true
+            property bool loading: false
 
             property bool ownEventsOnRight:
                 width < theme.chat.eventList.ownEventsOnRightUnderWidth
@@ -130,8 +153,8 @@ Rectangle {
                 // component is destroyed but func is still running
 
                 try {
-                    eventList.canLoad    = false
-                    chat.loadingMessages = true
+                    eventList.canLoad = false
+                    eventList.loading = true
 
                     py.callClientCoro(
                         chat.userId,
@@ -146,7 +169,7 @@ Rectangle {
                                 // the screen.
                                 if (moreToLoad) yPosChanged()
 
-                                chat.loadingMessages = false
+                                eventList.loading = false
                             } catch (err) {
                                 return
                             }