fix(MessageList): prevent message pagination too early on mount

Author: MartinCupela

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

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+const { updateScrollTop } = vi.hoisted(() => ({
+  updateScrollTop: vi.fn(),
+}));
+
+vi.mock('../useMessageListScrollManager', () => ({
+  useMessageListScrollManager: vi.fn(() => updateScrollTop),
+}));
+
+import { useScrollLocationLogic } from '../useScrollLocationLogic';
+
+describe('useScrollLocationLogic', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('seeds scroll manager with the initial DOM scrollTop', () => {
+    const listElement = document.createElement('div');
+    listElement.scrollTop = 249;
+
+    renderHook(() =>
+      useScrollLocationLogic({
+        hasMoreNewer: true,
+        listElement,
+        loadMoreScrollThreshold: 250,
+        messages: [],
+        suppressAutoscroll: false,
+      }),
+    );
+
+    expect(updateScrollTop).toHaveBeenCalledWith(249, null);
+  });
+});

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

@@ -399,6 +399,15 @@ 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]);