fix: message list scrolling was jumping

raaymax · Feb 3, 2024 · c582d2c · c582d2c
1 parent 609c619
commit c582d2c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/packages/app/src/js/components/Conversation/conversation.jsx b/packages/app/src/js/components/Conversation/conversation.jsx
@@ -53,8 +53,8 @@ export function Conversation() {
           status={status}
           selected={stream.selected}
           onDateChange={(date) => setStream({ ...stream, date })}
-          onScrollTop={() => {
-            prev();
+          onScrollTop={async () => {
+            await prev();
             setStream({...stream, type: 'archive', selected: undefined});
             bumpProgress();
           }}

diff --git a/packages/app/src/js/components/MessageList/MessageList.jsx b/packages/app/src/js/components/MessageList/MessageList.jsx
@@ -43,7 +43,9 @@ export const MessageList = (props) => {
       });
     if (r) {
       const date = r.getAttribute('data-date');
-      if (setCurrent) setCurrent([date, r])
+      if (setCurrent) {
+        setCurrent([date, r.getBoundingClientRect()]);
+      }
       if (onDateChange) onDateChange(date);
     }
   }, [setCurrent, onDateChange]);
@@ -64,9 +66,8 @@ export const MessageList = (props) => {
       } else if (rect && current && current[1]?.y) {
         element.current.scrollTop += (rect.y - current[1].y);
       }
+      setCurrent([current[0], rect]);
     }
-    const rect = getRect();
-    setCurrent([current[0], rect]);
     setOldList(list);
   }, [list, stream, oldList, setOldList, current, setCurrent]);
 

diff --git a/packages/app/src/js/services/messages.js b/packages/app/src/js/services/messages.js
@@ -35,6 +35,7 @@ export const selectors = {
 };
 
 export const loadPrevious = (stream) => async (dispatch, getState) => {
+  if (getState().messages.loading) return;
   const loadingDone = loading(dispatch, getState);
   const date = selectors.getEarliestDate(stream, getState());
 
@@ -45,12 +46,13 @@ export const loadPrevious = (stream) => async (dispatch, getState) => {
   if (selectors.countMessagesInStream(stream, getState()) > 100) {
     setTimeout(() => {
       dispatch.actions.messages.takeOldest({ stream, count: 100 });
-    }, 1);
+    }, 10);
   }
   loadingDone();
 };
 
 export const loadNext = (stream) => async (dispatch, getState) => {
+  if (getState().messages.loading) return;
   const loadingDone = loading(dispatch, getState);
   const date = selectors.getLatestDate(stream, getState());
 
@@ -61,11 +63,10 @@ export const loadNext = (stream) => async (dispatch, getState) => {
   if (messages?.length > 0) {
     dispatch.methods.progress.update(messages[0].id);
   }
-
   if (selectors.countMessagesInStream(stream, getState()) > 100) {
     setTimeout(() => {
       dispatch.actions.messages.takeYoungest({ stream, count: 100 });
-    }, 1);
+    }, 10);
   }
   loadingDone();
   return messages.length