AutoLoadMore
continuous-integration/drone/push Build is running Details

This commit is contained in:
Martti Malmi 2024-02-02 13:51:57 +02:00
parent 6feac60a4a
commit 8c9381fc6c
1 changed files with 7 additions and 3 deletions

View File

@ -1,6 +1,8 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { useInView } from "react-intersection-observer"; import { useInView } from "react-intersection-observer";
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from "react-intl";
import usePageDimensions from "@/Hooks/usePageDimensions";
import {debounce} from "@/Utils";
interface ShowMoreProps { interface ShowMoreProps {
text?: string; text?: string;
@ -19,13 +21,15 @@ const LoadMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
export default LoadMore; export default LoadMore;
export function AutoLoadMore({ text, onClick, className }: ShowMoreProps) { export function AutoLoadMore({ text, onClick, className }: ShowMoreProps) {
const { ref, inView } = useInView({ rootMargin: "2000px" }); const { ref, inView } = useInView({ rootMargin: "1000px" });
const { height } = usePageDimensions();
useEffect(() => { useEffect(() => {
if (inView) { if (inView) {
onClick(); // TODO improve feed performance. Something in image grid makes it slow when feed size grows.
return debounce(100, onClick);
} }
}, [inView]); }, [inView, height]);
return ( return (
<div ref={ref}> <div ref={ref}>