From d83db25b1fd1cc94f0b9bafe60aacfe2ade52b1b Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Mon, 17 Jun 2024 16:49:13 +0200
Subject: [PATCH] fix: avoid eager channel pagination on channel open

---
 .../InfiniteScrollPaginator/InfiniteScroll.tsx      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx b/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
index c55228354..212b999ae 100644
--- a/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
+++ b/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { PropsWithChildren, useEffect, useRef } from 'react';
 import type { PaginatorProps } from '../../types/types';
 import { deprecationAndReplacementWarning } from '../../utils/deprecationWarning';
 import { DEFAULT_LOAD_PAGE_SCROLL_THRESHOLD } from '../../constants/limits';
@@ -73,6 +73,8 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
   const hasPreviousPageFlag = hasPreviousPage || hasMore;
 
   const scrollComponent = useRef<HTMLElement>();
+  const previousOffset = useRef<number | undefined>();
+  const previousReverseOffset = useRef<number | undefined>();
 
   const scrollListenerRef = useRef<() => void>();
   scrollListenerRef.current = () => {
@@ -93,7 +95,12 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
     }
 
     if (isLoading) return;
-    // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container container expands
+    if (previousOffset.current === offset && previousReverseOffset.current === reverseOffset)
+      return;
+    previousOffset.current = offset;
+    previousReverseOffset.current = reverseOffset;
+
+    // FIXME: this triggers loadMore call when a user types messages in thread and the scroll container expands
     if (
       reverseOffset < Number(threshold) &&
       typeof loadPreviousPageFn === 'function' &&
@@ -120,7 +127,7 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const scrollElement = scrollComponent.current?.parentNode;
     if (!scrollElement) return;