add check to see if user is close to top

Author: Jaap

src/components/InfiniteScrollPaginator/InfiniteScroll.js

@@ -78,21 +78,24 @@ const InfiniteScroll = ({
         el.scrollHeight - parentElement.scrollTop - parentElement.clientHeight;
       reverseOffset = parentElement.scrollTop;
     }
-    if (listenToScroll) listenToScroll(offset, reverseOffset);
+    if (listenToScroll) {
+      listenToScroll(offset, reverseOffset, threshold);
+    }
 
     // Here we make sure the element is visible as well as checking the offset
     if (
       (isReverse ? reverseOffset : offset) < Number(threshold) &&
       el.offsetParent !== null &&
-      typeof loadMore === 'function'
+      typeof loadMore === 'function' &&
+      hasMore
     ) {
       loadMore();
     }
-  }, [useWindow, isReverse, threshold, listenToScroll, loadMore]);
+  }, [hasMore, useWindow, isReverse, threshold, listenToScroll, loadMore]);
 
   useEffect(() => {
     const scrollEl = useWindow ? window : scrollComponent.current?.parentNode;
-    if (!hasMore || isLoading || !scrollEl) {
+    if (isLoading || !scrollEl) {
       return () => {};
     }
 
@@ -107,7 +110,7 @@ const InfiniteScroll = ({
       scrollEl.removeEventListener('scroll', scrollListener, useCapture);
       scrollEl.removeEventListener('resize', scrollListener, useCapture);
     };
-  }, [hasMore, initialLoad, isLoading, scrollListener, useCapture, useWindow]);
+  }, [initialLoad, isLoading, scrollListener, useCapture, useWindow]);
 
   useEffect(() => {
     const scrollEl = useWindow ? window : scrollComponent.current?.parentNode;

src/components/MessageList/MessageList.js

@@ -165,10 +165,11 @@ class MessageList extends PureComponent {
     this.setState({ newMessagesNotification: false });
   };
 
-  userScrolledUp = () => this.scrollOffset > 310;
+  userScrolledUp = () => this.scrollOffset > 200;
 
-  listenToScroll = (offset) => {
+  listenToScroll = (offset, reverseOffset, threshold) => {
     this.scrollOffset = offset;
+    this.closeToTop = reverseOffset < threshold;
     if (this.state.newMessagesNotification && !this.userScrolledUp()) {
       this.setState({ newMessagesNotification: false });
     }
@@ -206,7 +207,7 @@ class MessageList extends PureComponent {
   onMessageLoadCaptured = () => {
     // A load event (emitted by e.g. an <img>) was captured on a message.
     // In some cases, the loaded asset is larger than the placeholder, which means we have to scroll down.
-    if (!this.userScrolledUp()) {
+    if (!this.userScrolledUp() && !this.closeToTop) {
       this.scrollToBottom();
     }
   };