Uso da flag isLoading

intersection-observer-ex4.tsx

function App() {
  const [isLoading, setIsLoading] = useState(false);

  // Restante do código

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries: IntersectionObserverEntry[]) => {
        if (!entries[0].isIntersecting || isLoading) {
          return;
        }

        loadItems();
      },
      {
        root: null,
        rootMargin: '0px',
        threshold: 0
      });

    if (loadingElementRef && loadingElementRef.current) {
      observer.observe(loadingElementRef.current);
    }

    return () => observer.disconnect();
  }, [loadingElementRef, isLoading, loadItems]);

  return (
    <main className="app">
      <div className="list">
        {data.map(item => (
          <div key={item.id} className="item">{`Item ${item.id + 1}`}</div>
        ))}
        {isLoading && <i className="loading">Carregando...</i>}
        <div ref={loadingElementRef}></div>
      </div>
    </main>
  );
}