From 81419ca44cb69195c177dfd69e342a5c74b21f2e Mon Sep 17 00:00:00 2001
From: liamcottle <liam@liamcottle.com>
Date: Thu, 8 Aug 2024 12:56:20 +1200
Subject: [PATCH] improve scrolling for message history pagination

---
 .../messages/ConversationViewer.vue           | 31 ++++++-------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/frontend/components/messages/ConversationViewer.vue b/src/frontend/components/messages/ConversationViewer.vue
index 63fb01f..a59d7b1 100644
--- a/src/frontend/components/messages/ConversationViewer.vue
+++ b/src/frontend/components/messages/ConversationViewer.vue
@@ -373,7 +373,6 @@ export default {
             chatItems: [],
 
             isLoadingPrevious: false,
-            loadPreviousObserver: null,
             hasMorePrevious: true,
 
             newMessageText: "",
@@ -414,14 +413,6 @@ export default {
         // listen for websocket messages
         WebSocketConnection.on("message", this.onWebsocketMessage);
 
-        // setup intersection observer
-        this.loadPreviousObserver = new IntersectionObserver((entries) => {
-            const loadMoreElement = entries[0];
-            if(loadMoreElement && loadMoreElement.isIntersecting){
-                this.loadPrevious();
-            }
-        });
-
     },
     methods: {
         close() {
@@ -436,6 +427,11 @@ export default {
             // we want to auto scroll if user is at bottom of messages list
             this.autoScrollOnNewMessage = isAtBottom;
 
+            // load previous when scrolling near top of page
+            if(element.scrollTop <= 100){
+                this.loadPrevious();
+            }
+
         },
         async initialLoad() {
 
@@ -454,10 +450,6 @@ export default {
             // scroll to bottom
             this.scrollMessagesToBottom();
 
-            // setup auto loading previous
-            this.loadPreviousObserver.disconnect();
-            this.loadPreviousObserver.observe(document.querySelector("#load-previous"));
-
         },
         async loadPrevious() {
 
@@ -468,20 +460,15 @@ export default {
 
             this.isLoadingPrevious = true;
 
-            // when scrolled to top, scroll down a bit to prevent the browser infinitely loading all history...
-            const container = document.getElementById("messages");
-            if(container && container.scrollTop === 0){
-                container.scrollTop = 50;
-            }
-
             try {
 
                 const seq = ++this.lxmfMessagesRequestSequence;
 
                 // fetch lxmf messages from "us to destination" and from "destination to us"
+                const pageSize = 30;
                 const response = await window.axios.get(`/api/v1/lxmf-messages/conversation/${this.selectedPeer.destination_hash}`, {
                     params: {
-                        count: 30,
+                        count: pageSize,
                         order: "desc",
                         after_id: this.oldestMessageId,
                     },
@@ -509,8 +496,8 @@ export default {
                     this.chatItems.unshift(chatItem);
                 }
 
-                // no more previous to load if previous list is empty
-                if(chatItems.length === 0){
+                // no more previous to load if received items is less than expected page size
+                if(chatItems.length < pageSize){
                     this.hasMorePrevious = false;
                 }