import React, {ReactNode, useEffect, useRef, useState} from 'react';
import clsx from 'clsx';
import {UseInfiniteQueryResult} from '@tanstack/react-query/src/types';
import {Trans} from '@common/i18n/trans';
import {Button} from '@common/ui/buttons/button';
import {AnimatePresence, m} from 'framer-motion';
import {opacityAnimation} from '@common/ui/animation/opacity-animation';
import {ProgressCircle} from '@common/ui/progress/progress-circle';
export interface InfiniteScrollSentinelProps {
loaderMarginTop?: string;
children?: ReactNode;
loadMoreExtraContent?: ReactNode;
query: UseInfiniteQueryResult;
style?: React.CSSProperties;
className?: string;
variant?: 'infiniteScroll' | 'loadMore';
size?: 'sm' | 'md';
}
export function InfiniteScrollSentinel({
query: {isInitialLoading, fetchNextPage, isFetchingNextPage, hasNextPage},
children,
loaderMarginTop = 'mt-24',
style,
className,
variant: _variant = 'infiniteScroll',
loadMoreExtraContent,
size = 'md',
}: InfiniteScrollSentinelProps) {
const sentinelRef = useRef<HTMLDivElement>(null);
const isLoading = isFetchingNextPage || isInitialLoading;
const [loadMoreClickCount, setLoadMoreClickCount] = useState(0);
const innerVariant =
_variant === 'loadMore' && loadMoreClickCount < 3
? 'loadMore'
: 'infiniteScroll';
useEffect(() => {
const sentinelEl = sentinelRef.current;
if (!sentinelEl || innerVariant === 'loadMore') return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting && hasNextPage && !isLoading) {
fetchNextPage();
}
});
observer.observe(sentinelEl);
return () => {
observer.unobserve(sentinelEl);
};
}, [fetchNextPage, hasNextPage, isLoading, innerVariant]);
let content: ReactNode;
if (children) {
// children might already be wrapped in AnimatePresence, so only wrap default loader with it
content = isFetchingNextPage ? children : null;
} else if (innerVariant === 'loadMore') {
content = !isInitialLoading && hasNextPage && (
<div className={clsx('flex items-center gap-8', loaderMarginTop)}>
{loadMoreExtraContent}
<Button
size={size === 'md' ? 'sm' : 'xs'}
className={clsx(
size === 'sm' ? 'min-h-24 min-w-96' : 'min-h-36 min-w-112'
)}
variant="outline"
color="primary"
onClick={() => {
fetchNextPage();
setLoadMoreClickCount(loadMoreClickCount + 1);
}}
disabled={isLoading}
>
{loadMoreClickCount >= 2 && !isFetchingNextPage ? (
<Trans message="Load all" />
) : (
<Trans message="Show more" />
)}
</Button>
</div>
);
} else {
content = (
<AnimatePresence>
{isFetchingNextPage && (
<m.div
className={clsx('flex justify-center w-full', loaderMarginTop)}
{...opacityAnimation}
>
<ProgressCircle size={size} isIndeterminate aria-label="loading" />
</m.div>
)}
</AnimatePresence>
);
}
return (
<div
style={style}
className={clsx('w-full', className, hasNextPage && 'min-h-36')}
role="presentation"
>
<div ref={sentinelRef} aria-hidden />
{content}
</div>
);
}