nalarx-uiComponents
Lazy more
The load-more trigger at the foot of a paged list.
bunx shadcn@latest add @nalarx/lazy-moreUsage
It loads the next page by itself when scrolled into view, one page per scroll: after a page lands it waits until it has left the viewport before asking again. It stays a real button, so keyboard users and browsers without IntersectionObserver still reach the next page.
<LazyMore busy={isFetchingNextPage} onLoad={fetchNextPage} label="Load more members" loadingLabel="Loading more members" />Click to toggle busy (the demo has auto off):
Props
| Prop | Type | Default | |
|---|---|---|---|
busy | boolean | A page is on its way. | |
onLoad | () => void | ||
label, loadingLabel | string | Accessible names, idle and busy. | |
rows | (number | string)[] | [86, 64, 74] | Bar widths; numbers are %. |
dot | boolean | true | A dot before each bar. |
auto | boolean | true | Off when another page would add nothing visible. |
Replaces
LazyMore.tsx in both apps.