Add a button to manually load older messages

matrixgw_frontend/src/utils/RoomEventsManager.ts

@@ -38,7 +38,7 @@ export class RoomEventsManager {
   receiptsEventsMap: Map<string, Receipt[]>;
 
   get canLoadOlder(): boolean {
-    return !!this.endToken;
+    return !!this.endToken && this.events.length > 0;
   }
 
   constructor(

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -55,16 +55,8 @@ export function RoomMessagesList(p: {
       messagesEndRef.current?.scrollIntoView({ behavior: "instant" });
   }, [lastEventId, messagesEndRef]);
 
-  // Watch scroll to detect when user reach the top to load older messages
+  const loadOlderMessages = async () => {
-  const handleScroll = async () => {
+    if (loadingOlder || !p.manager.canLoadOlder) return;
-    if (!listContainerRef.current || loadingOlder || !p.manager.canLoadOlder)
-      return;
-
-    const { scrollTop } = listContainerRef.current;
-
-    if (scrollTop !== 0) {
-      return;
-    }
 
     setLoadingOlder(true);
 
@@ -82,6 +74,19 @@ export function RoomMessagesList(p: {
     }
   };
 
+  // Watch scroll to detect when user reach the top to load older messages
+  const handleScroll = async () => {
+    if (!listContainerRef.current) return;
+
+    const { scrollTop } = listContainerRef.current;
+
+    if (scrollTop !== 0) {
+      return;
+    }
+
+    loadOlderMessages();
+  };
+
   return (
     <div
       onScroll={handleScroll}
@@ -94,22 +99,8 @@ export function RoomMessagesList(p: {
         paddingLeft: "20px",
       }}
     >
-      {/* Empty conversation notice */}
-      {p.manager.messages.length === 0 && (
-        <div
-          style={{
-            height: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          No message in this conversation yet!
-        </div>
-      )}
-
       {/** Begining of conversation */}
-      {!p.manager.canLoadOlder && (
+      {!p.manager.canLoadOlder && p.manager.messages.length > 0 && (
         <Typography
           component={"div"}
           variant="caption"
@@ -119,6 +110,22 @@ export function RoomMessagesList(p: {
         </Typography>
       )}
 
+      {/** Load older messages button */}
+      {p.manager.canLoadOlder && !loadingOlder && (
+        <div
+          style={{
+            display: "inline-flex",
+            justifyContent: "center",
+            width: "100%",
+            padding: "20px",
+          }}
+        >
+          <Button onClick={loadOlderMessages} variant="outlined">
+            Load older messages
+          </Button>
+        </div>
+      )}
+
       {/** Loading older messages spinner */}
       {loadingOlder && (
         <div
@@ -133,6 +140,21 @@ export function RoomMessagesList(p: {
         </div>
       )}
 
+      {/* Empty conversation notice */}
+      {p.manager.messages.length === 0 && (
+        <div
+          style={{
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          No message in this conversation yet!
+        </div>
+      )}
+
+      {/** Messages themselves */}
       {p.manager.messages.map((m, idx) => (
         <RoomMessage
           key={m.event_id}