From edda5e476af59ff59dc0e5b3b55cea3bac7a978a Mon Sep 17 00:00:00 2001
From: gofnnp <itkataev@gmail.com>
Date: Sat, 26 Jul 2025 21:02:56 +0400
Subject: [PATCH] develop

pagination scroll fix
---
 .../ChatMessagesWrapper/ChatMessagesWrapper.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx
index 819db9b..0de2f99 100644
--- a/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx
+++ b/src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Spinner } from "@/components/ui";
 import { useChat } from "@/providers/chat-provider";
@@ -25,13 +25,14 @@ export default function ChatMessagesWrapper() {
 
   const { _hasHydrated } = useChatStore(state => state);
 
-  const isInitialScrollDone = useRef(false);
+  const [isLoadOlder, setIsLoadOlder] = useState(false);
 
   const handleScroll = useCallback(() => {
     const el = messagesWrapperRef.current;
-    if (!el || !isInitialScrollDone.current) return;
+    if (!el) return;
 
     if (el.scrollTop < 100) {
+      setIsLoadOlder(true);
       loadOlder();
     }
   }, [loadOlder, messagesWrapperRef]);
@@ -49,12 +50,20 @@ export default function ChatMessagesWrapper() {
   }, [socketMessages]);
 
   useEffect(() => {
-    if (socketMessages.length > 0 && _hasHydrated) {
+    if (isLoadOlder) {
+      setIsLoadOlder(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [socketMessages]);
+
+  useEffect(() => {
+    if (socketMessages.length > 0 && _hasHydrated && !isLoadOlder) {
       const timeout = setTimeout(() => {
         scrollToBottom();
       });
       return () => clearTimeout(timeout);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [socketMessages.length, scrollToBottom, _hasHydrated]);
 
   return (