41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
import { useInView } from "react-intersection-observer";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
import usePageDimensions from "@/Hooks/usePageDimensions";
|
|
import { debounce } from "@/Utils";
|
|
|
|
interface ShowMoreProps {
|
|
text?: string;
|
|
className?: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const LoadMore = ({ text, onClick, className = "" }: ShowMoreProps) => {
|
|
return (
|
|
<button type="button" className={className} onClick={onClick}>
|
|
{text || <FormattedMessage defaultMessage="Load more" id="00LcfG" />}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default LoadMore;
|
|
|
|
export function AutoLoadMore({ text, onClick, className }: ShowMoreProps) {
|
|
const { ref, inView } = useInView({ rootMargin: "1000px" });
|
|
const { height } = usePageDimensions();
|
|
|
|
useEffect(() => {
|
|
if (inView) {
|
|
// TODO improve feed performance. Something in image grid makes it slow when feed size grows.
|
|
return debounce(100, onClick);
|
|
}
|
|
}, [inView, height]);
|
|
|
|
return (
|
|
<div ref={ref}>
|
|
<LoadMore onClick={onClick} text={text} className={className} />
|
|
</div>
|
|
);
|
|
}
|