## Load More List (S—169)

A list that loads the next page with pulsing placeholder rows, then fades real rows in; can auto-load near the end.

- URL: https://sundaeui.dev/components/load-more-list
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/load-more-list.json`
- Tags: feed, skeleton, pagination, list, load-more, infinite-scroll

Load more shows placeholder rows the size of real ones (a gentle opacity pulse, no shimmer), then swaps in the results with a stagger. With auto-load on, an IntersectionObserver triggers it before you reach the bottom.
At the end it says so instead of showing a dead button.

### Usage

```tsx
import { LoadMoreList } from '@/components/sundae/load-more-list'

<LoadMoreList />
```

### Props

- `loadPage` (`(page: number) => Promise<T[]>`, required): Fetch a page; return [] when done.
- `auto` (`boolean`, default `false`): Load when the end scrolls into view.
- `pageSize` (`number`, default `4`): Placeholder rows per page.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Feeds, comments, search results, activity logs.

### When not to use

- Content people need to reach the footer of: avoid auto-load.

### Accessibility

- The list has aria-busy while loading; a polite region announces “4 more loaded” or “End of list”.
- The Load more button stays available even with auto-load.
- Reduced motion removes the movement and keeps every state change.