gofnnp/w-lab-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

develop

Browse Source 
pagination scroll fix
This commit is contained in:
gofnnp 2025-07-26 21:02:56 +04:00
parent f2b1519c67
commit edda5e476a
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/domains/chat/ChatMessagesWrapper/ChatMessagesWrapper.tsx
View File

@ -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 (