From c1e8b9388f6c0b4db4a854b91e167e1e45a658a0 Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Fri, 21 Jun 2024 12:43:42 +0200
Subject: [PATCH] fix: avoid eager channel pagination on channel open (#2425)

---
 .../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;