Load More — cinder playground

Overview

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

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

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.