Virtualized Infinite Catalog

A Vue component that renders a long list of catalog entries using virtualized scrolling and on-demand data loading.

Capabilities

Windowed list rendering

• With 120 items and a viewport height for 8 rows, only the visible slice and minimal buffer are in the DOM while spacer elements preserve full scroll height and ordering. @test

Lazy loading on scroll

• Scrolling past 80% of the loaded range fires a single fetch request for the next page using the provided indices, shows a loader row while awaiting, and appends results without duplicating or reordering items. @test

Stable scroll after append

• When new items are appended from a lazy fetch, the current scroll offset remains stable (no jump to top/bottom) even when itemSize is a function returning values between 90–110 pixels. @test

Empty-state handling

• When the data source returns no items, the component renders an empty-state slot while still keeping virtualization enabled for future loads. @test

Implementation

@generates

API

export interface CatalogItem {
  id: string;
  title: string;
  price: number;
}

export interface VirtualizedCatalogProps {
  /** Preloaded items currently available for rendering. */
  items: CatalogItem[];
  /** Total number of records available on the server. */
  totalRecords: number;
  /** Number of records to request per lazy load. */
  pageSize: number;
  /** Fixed row height or a function that estimates per-item height in pixels. */
  itemSize: number | ((item: CatalogItem) => number);
  /** Optional flag to show a loader row while external fetch is in-flight. */
  loading?: boolean;
  /** Triggered when more data is needed; receives the requested range. */
  loadMore: (range: { first: number; last: number }) => Promise<CatalogItem[]>;
}

export interface VirtualizedCatalogSlots {
  /** Renders each visible row. */
  item: (item: CatalogItem, index: number) => unknown;
  /** Renders a loading row while lazy data is fetching. */
  loading?: () => unknown;
  /** Renders when no items are available yet. */
  empty?: () => unknown;
}

Dependencies { .dependencies }

PrimeVue UI library { .dependency }

Provides virtualized scrolling and lazy loading primitives for long lists.

@satisfied-by