useInfiniteScroll

import { useInfiniteScroll } from "@servicetitan/anvil2-ext-atlas";

function InfiniteList() {
  const [items, setItems] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [isLoading, setIsLoading] = useState(false);

  const loadMore = async () => {
    setIsLoading(true);
    const newItems = await fetchItems();
    setItems((prev) => [...prev, ...newItems]);
    setHasMore(newItems.length > 0);
    setIsLoading(false);
  };

  const { sentinelRef } = useInfiniteScroll({
    hasMore,
    isLoading,
    onLoadMore: loadMore,
    rootMargin: "100px",
    threshold: 0.1,
  });

  return (
    <div>
      {items.map((item) => (
        <Item key={item.id} {...item} />
      ))}
      {hasMore && <div ref={sentinelRef} />}
    </div>
  );
}

import { useInfiniteScroll, Spinner } from "@servicetitan/anvil2-ext-atlas";

function CustomInfiniteScroll() {
  const [messages, setMessages] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const [loading, setLoading] = useState(false);

  const { sentinelRef } = useInfiniteScroll({
    hasMore,
    isLoading: loading,
    onLoadMore: async () => {
      setLoading(true);
      const older = await fetchOlderMessages();
      setMessages((prev) => [...older, ...prev]);
      setHasMore(older.length === 20);
      setLoading(false);
    },
    rootMargin: "200px",
  });

  return (
    <div className="message-list">
      {hasMore && <div ref={sentinelRef}>{loading && <Spinner />}</div>}
      {messages.map((msg) => (
        <Message key={msg.id} {...msg} />
      ))}
    </div>
  );
}