Implements infinite scroll pagination with viewport detection, debounced loading, and support for reversed lists (chat-style).

useScrollItems<T>({
  items?: T[];                              // Full list of items
  progress?: ProgressEntrySignal;           // Progress from useProgressiveLiveQuery
  reverse?: boolean;                        // Reverse order (for chat)
}): [
  displayItems: T[],                        // Paginated items to render
  sentinelRef: React.RefObject<any>,        // Attach to scroll sentinel element
  loadMore: () => void,                     // Manual load trigger
  page: number,                             // Current page number
  hasMore: boolean                          // More items available?
]

Constants

const PAGE_SIZE = 20;  // Items per page

Usage Example

import { useScrollItems } from "@/hooks/useScrollItems";
import { useProgressiveLiveQuery } from "@/hooks/useProgressiveLiveQuery";

function ChatView({ folderId }) {
  const [posts, progress] = useProgressiveLiveQuery(
    () => readPosts({ folderId }),
    [folderId]
  );

  const [displayItems, sentinelRef, loadMore, page, hasMore] = useScrollItems({
    items: posts,
    progress,
    reverse: true,  // Newest at bottom for chat
  });

  return (
    <div style={{ display: "flex", flexDirection: "column-reverse" }}>
      {displayItems.map((post) => (
        <PostWidget key={post.id} post={post} />
      ))}
      
      {/* Sentinel for infinite scroll */}
      <div ref={sentinelRef}>
        {hasMore && progress?.value.inProgress && <Spinner />}
      </div>
      
      {/* Optional manual load button */}
      {hasMore && !progress?.value.inProgress && (
        <button onClick={loadMore}>Load More</button>
      )}
    </div>
  );
}

Related