KQ-539 · LOAD/HEM

Load Hem

Infinite scroll done honestly. A sentinel at the list's hem is watched by an IntersectionObserver rather than a scroll handler, so an idle list costs nothing and a hem that is off screen never fetches on mount; the observer is rebuilt after each page, and a status flag means one page is never fetched twice. Arriving rows cascade in from distances.step on glide, the last page stamps the end on recoil, and a failed page keeps what it has and offers Retry.

KQ-539 · LOAD/HEM

Basin Yard120 m²£1800
Weir Shed157 m²£1937
Lock Berth194 m²£2074
Quay Works141 m²£2211
Tide Yard178 m²£2348
Culvert Shed125 m²£2485
Sluice Berth162 m²£2622
Draft Works199 m²£1859

Page 1 of 3 · 8 listings

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/load-hem

Props

initial: T[]; default —; The first page, already loaded. It is page 0, so the hem asks for page 1 next; it is captured once and never reset by a rebuilt array.
onLoadMore: (page: number) => Promise<{ items: T[]; hasMore: boolean }>; default —; Fetches a page, called from the crossing that caused it. A rejection shows Retry instead of losing the rows already loaded.
renderItem: (item: T) => React.ReactNode; default —; Row renderer; the hem supplies the row box and its hairline.
container: React.RefObject<HTMLElement | null>; default —; The scroll container the sentinel is measured in. Omit it and the hem walks up to the list's own scrolling ancestor.
endLabel: string; default "That is everything"; The stamp that retires the loader on the last page.
label: string; default —; Names the list for assistive technology.

Prop	Type	Default	Description
initial	T[]	—	The first page, already loaded. It is page 0, so the hem asks for page 1 next; it is captured once and never reset by a rebuilt array.
onLoadMore	(page: number) => Promise<{ items: T[]; hasMore: boolean }>	—	Fetches a page, called from the crossing that caused it. A rejection shows Retry instead of losing the rows already loaded.
renderItem	(item: T) => React.ReactNode	—	Row renderer; the hem supplies the row box and its hairline.
container	React.RefObject<HTMLElement \| null>	—	The scroll container the sentinel is measured in. Omit it and the hem walks up to the list's own scrolling ancestor.
endLabel	string	"That is everything"	The stamp that retires the loader on the last page.
label	string	—	Names the list for assistive technology.