/**
* Hook for infinite scroll functionality
*/
import { useEffect, useRef, useCallback } from 'react';
interface UseInfiniteScrollOptions {
hasMore: boolean;
isLoading: boolean;
onLoadMore: () => void;
threshold?: number;
}
/**
* Hook that triggers onLoadMore when scrolling near the bottom
*/
export function useInfiniteScroll({
hasMore,
isLoading,
onLoadMore,
threshold = 100,
}: UseInfiniteScrollOptions) {
const sentinelRef = useRef<HTMLDivElement>(null);
const handleScroll = useCallback(() => {
if (!hasMore || isLoading) return;
const sentinel = sentinelRef.current;
if (!sentinel) return;
const rect = sentinel.getBoundingClientRect();
const isVisible = rect.top <= window.innerHeight + threshold;
if (isVisible) {
onLoadMore();
}
}, [hasMore, isLoading, onLoadMore, threshold]);
useEffect(() => {
const handleScrollThrottled = () => {
requestAnimationFrame(handleScroll);
};
window.addEventListener('scroll', handleScrollThrottled);
return () => window.removeEventListener('scroll', handleScrollThrottled);
}, [handleScroll]);
return { sentinelRef };
}
