72ab0e25b4
* the LoadMore component should accept children to have something different than "Loading..." * skeleton component * the timeline component now loads with a skeleton * border radius for skeleton * dark mode for skeleton
22 lines
748 B
TypeScript
22 lines
748 B
TypeScript
import { useEffect, useState } from "react";
|
|
import { useInView } from "react-intersection-observer";
|
|
|
|
export default function LoadMore({ onLoadMore, shouldLoadMore, children }: { onLoadMore: () => void, shouldLoadMore: boolean, children?: React.ReactNode }) {
|
|
const { ref, inView } = useInView();
|
|
const [tick, setTick] = useState<number>(0);
|
|
|
|
useEffect(() => {
|
|
if (inView === true && shouldLoadMore === true) {
|
|
onLoadMore();
|
|
}
|
|
}, [inView, shouldLoadMore, tick]);
|
|
|
|
useEffect(() => {
|
|
let t = setInterval(() => {
|
|
setTick(x => x += 1);
|
|
}, 500);
|
|
return () => clearInterval(t);
|
|
}, []);
|
|
|
|
return <div ref={ref} className="mb10">{children ?? 'Loading...'}</div>;
|
|
} |