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"; "use client";
import { useCallback, useEffect, useMemo, useRef } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { Spinner } from "@/components/ui"; import { Spinner } from "@/components/ui";
import { useChat } from "@/providers/chat-provider"; import { useChat } from "@/providers/chat-provider";
@ -25,13 +25,14 @@ export default function ChatMessagesWrapper() {
const { _hasHydrated } = useChatStore(state => state); const { _hasHydrated } = useChatStore(state => state);
const isInitialScrollDone = useRef(false); const [isLoadOlder, setIsLoadOlder] = useState(false);
const handleScroll = useCallback(() => { const handleScroll = useCallback(() => {
const el = messagesWrapperRef.current; const el = messagesWrapperRef.current;
if (!el || !isInitialScrollDone.current) return; if (!el) return;
if (el.scrollTop < 100) { if (el.scrollTop < 100) {
setIsLoadOlder(true);
loadOlder(); loadOlder();
} }
}, [loadOlder, messagesWrapperRef]); }, [loadOlder, messagesWrapperRef]);
@ -49,12 +50,20 @@ export default function ChatMessagesWrapper() {
}, [socketMessages]); }, [socketMessages]);
useEffect(() => { 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(() => { const timeout = setTimeout(() => {
scrollToBottom(); scrollToBottom();
}); });
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [socketMessages.length, scrollToBottom, _hasHydrated]); }, [socketMessages.length, scrollToBottom, _hasHydrated]);
return ( return (