Load More — Cinder component documentation

Overview

Sentinel-based infinite-scroll trigger with an always-visible button fallback and accessible status states.

Use LoadMore to fetch the next page of results as the reader reaches the end of a growing list. Use VirtualList to window rows that are already loaded when rendering every row would be expensive.

onLoadMore should be provided in real usage. When omitted, the component falls back to a no-op handler.

Usage

<script lang="ts">
  import LoadMore from '@lostgradient/cinder/load-more';

  let loading = $state(false);
  let hasMore = $state(true);

  async function fetchNext() {
    loading = true;
    await new Promise((resolve) => setTimeout(resolve, 300));
    loading = false;
    hasMore = false;
  }
</script>

<LoadMore onLoadMore={fetchNext} bind:loading bind:hasMore />

Live preview

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

When to use

Use when

Streaming results into a long list and you want the next page to load as the user approaches the end.

Avoid when

The dataset is bounded and benefits from discrete jumps — use `Pagination` instead.

Examples

Basic infinite scroll

The sentinel auto-loads near the end of the list, and the button remains available as the manual fallback.

Retry after a failed request

Rejected requests switch the button into retry mode so the user can recover explicitly.

Props

Props for load-more
Name	Type	Default	Description
`onLoadMore`	`() => void \| Promise<void>`		Called when the next page should be loaded. Caller flips `loading` and `hasMore`.
`onError`	`(error: unknown) => void`		Notified when onLoadMore throws or rejects.
`hasMore` bindable	`boolean`	`true`	Whether more items are available. Bindable.
`loading` bindable	`boolean`	`false`	Whether a load is in progress. Bindable.
`root`	`Element \| Document \| null`	`null`	Scroll container the sentinel is observed within. Pass the scrollable ancestor element when the list scrolls inside a container rather than the viewport. `null`/omitted observes against the viewport. Captured at attachment time.
`rootMargin`	`text`	`'200px 0px'`	rootMargin passed to IntersectionObserver. Captured at attachment time.
`buttonLabel`	`text`	`'Load more'`	Visible label for the load-more button.
`retryLabel`	`text`	`'Retry loading'`	Visible label for the retry button after a load error.
`endOfListMessage`	`text`	`'End of list'`	Politely announced when the end of the list is reached.
`maxRetries`	`number`	`5`	Maximum consecutive sentinel-triggered requests before auto-loading pauses.