fix(InfiniteScroll): defer initial scroll check to prevent premature pagination on mount

Author: MartinCupela

src/components/InfiniteScrollPaginator/InfiniteScroll.tsx

@@ -109,9 +109,18 @@ export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) =>
 
     scrollElement.addEventListener('scroll', scrollListener, useCapture);
     scrollElement.addEventListener('resize', scrollListener, useCapture);
-    scrollListener();
+
+    // Defer the initial proximity check so that any pending scroll-to-bottom
+    // from useLayoutEffect (e.g. the MessageList settle pass) has been applied
+    // to the DOM before we evaluate whether more pages should be loaded.
+    // Without this, scrollTop is still 0 on mount which falsely triggers
+    // loadPreviousPage and breaks the initial scroll position.
+    const rafId = requestAnimationFrame(() => {
+      scrollListener();
+    });
 
     return () => {
+      cancelAnimationFrame(rafId);
       scrollElement.removeEventListener('scroll', scrollListener, useCapture);
       scrollElement.removeEventListener('resize', scrollListener, useCapture);
     };

src/components/InfiniteScrollPaginator/__tests__/InfiniteScroll.test.tsx

@@ -90,6 +90,25 @@ describe('InfiniteScroll', () => {
     },
   );
 
+  it('should not call loadPreviousPage synchronously on mount', () => {
+    renderComponent({
+      hasPreviousPage: true,
+    });
+
+    expect(loadPreviousPage).not.toHaveBeenCalled();
+  });
+
+  it('should defer the initial scroll check to a requestAnimationFrame', () => {
+    const rafSpy = vi.spyOn(window, 'requestAnimationFrame');
+
+    renderComponent({
+      hasPreviousPage: true,
+    });
+
+    expect(rafSpy).toHaveBeenCalledWith(expect.any(Function));
+    rafSpy.mockRestore();
+  });
+
   describe('Rendering loader', () => {
     const getRenderResult = () => {
       const props = fromPartial<InfiniteScrollProps>({

src/components/MessageList/hooks/MessageList/__tests__/useScrollLocationLogic.test.tsx

@@ -399,15 +399,6 @@ export const useScrollLocationLogic = (params: UseScrollLocationLogicParams) =>
     showNewMessages: () => setHasNewMessages(true),
   });
 
-  useLayoutEffect(() => {
-    if (!listElement) return;
-
-    const initialScrollTop = listElement.scrollTop;
-    previousScrollTopRef.current = initialScrollTop;
-    // Keep pagination mode selection in sync with the actual initial DOM position.
-    updateScrollTop(initialScrollTop, null);
-  }, [listElement, updateScrollTop]);
-
   useLayoutEffect(() => {
     previousHasMoreNewerRef.current = hasMoreNewer;
   }, [hasMoreNewer]);