Infinite scroll

import { useEffect, useRef, useState } from 'react';

const PAGE_SIZE = 20;
// Start fetching while the sentinel is still 600px below the viewport.
const PRELOAD_MARGIN = '0px 0px 600px 0px';

type Activity = { id: string; text: string };
type Status = 'idle' | 'loading' | 'error' | 'done';
type Props = { fetchPage: (page: number, size: number) => Promise<Activity[]> };

export function ActivityFeed({ fetchPage }: Props) {
  const [items, setItems] = useState<Activity[]>([]);
  const [page, setPage] = useState(0);
  const [status, setStatus] = useState<Status>('idle');
  const sentinel = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const element = sentinel.current;
    if (!element || status !== 'idle') return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry?.isIntersecting) return;
        setStatus('loading');
        fetchPage(page, PAGE_SIZE).then(
          (next) => {
            setItems((current) => [...current, ...next]);
            setPage(page + 1);
            setStatus(next.length < PAGE_SIZE ? 'done' : 'idle');
          },
          () => setStatus('error')
        );
      },
      { rootMargin: PRELOAD_MARGIN }
    );
    observer.observe(element);
    return () => observer.disconnect();
  }, [fetchPage, page, status]);

  return (
    <div className='w-96 text-sm'>
      <ul className='divide-y *:py-3'>
        {items.map((item) => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
      {/* The invisible marker after the last item. */}
      <div ref={sentinel} />
      <p role='status' className='py-4 text-center text-muted-foreground'>
        {status === 'loading' && 'Loading more…'}
        {status === 'done' && 'You’re all caught up'}
        {status === 'error' && (
          <button onClick={() => setStatus('idle')} className='text-red-600'>
            Couldn’t load more. Try again
          </button>
        )}
      </p>
    </div>
  );
}