Infinite Scroll

Scroll-triggered infinite loading with Intersection Observer, loading indicator, and end-of-list detection.

Basic

Scroll-triggered infinite loading with Intersection Observer, loading indicator, and end-of-list detection. Scroll down inside the container below to load more items.

Item 1

row

Item 2

row

Item 3

row

Item 4

row

Item 5

row

Item 6

row

Item 7

row

Item 8

row

Item 9

row

Item 10

row

const [items, setItems] = useState(initialItems);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);

const loadMore = async () => {
setLoading(true);
const newItems = await fetchItems(items.length);
setItems(prev => [...prev, ...newItems]);
if (items.length + newItems.length >= total) setHasMore(false);
setLoading(false);
};

<InfiniteScroll
loading={loading}
hasMore={hasMore}
onLoadMore={loadMore}
endMessage={<p className="text-center text-sm text-muted-foreground py-4">You've reached the end!</p>}
>
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}
</InfiniteScroll>

const [items, setItems] = useState(initialItems);const [loading, setLoading] = useState(false);const [hasMore, setHasMore] = useState(true);const loadMore = async () => {setLoading(true);const newItems = await fetchItems(items.length);setItems(prev => [...prev, ...newItems]);if (items.length + newItems.length >= total) setHasMore(false);setLoading(false);};<InfiniteScrollloading={loading}hasMore={hasMore}onLoadMore={loadMore}endMessage={<p className="text-center text-sm text-muted-foreground py-4">You've reached the end!</p>}>{items.map(item => (  <div key={item.id}>{item.name}</div>))}</InfiniteScroll>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add infinite-scroll

pnpm dlx @work-rjkashyap/unified-ui add infinite-scroll

npx @work-rjkashyap/unified-ui add infinite-scroll

bunx @work-rjkashyap/unified-ui add infinite-scroll

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { InfiniteScroll } from "@work-rjkashyap/unified-ui";

Examples

Basic List

Item 1

row

Item 2

row

Item 3

row

Item 4

row

Item 5

row

Item 6

row

Item 7

row

Item 8

row

Item 9

row

Item 10

row

const [items, setItems] = useState(initialItems);
const [loading, setLoading] = useState(false);
const [hasMore, setHasMore] = useState(true);

const loadMore = () => {
setLoading(true);
fetchMore().then(newItems => {
setItems(prev => [...prev, ...newItems]);
if (total >= limit) setHasMore(false);
setLoading(false);
});
};

<InfiniteScroll
loading={loading}
hasMore={hasMore}
onLoadMore={loadMore}
endMessage={<p>You've reached the end!</p>}
>
{items.map(item => (
  <div key={item.id}>{item.name}</div>
))}
</InfiniteScroll>

const [items, setItems] = useState(initialItems);const [loading, setLoading] = useState(false);const [hasMore, setHasMore] = useState(true);const loadMore = () => {setLoading(true);fetchMore().then(newItems => {setItems(prev => [...prev, ...newItems]);if (total >= limit) setHasMore(false);setLoading(false);});};<InfiniteScrollloading={loading}hasMore={hasMore}onLoadMore={loadMore}endMessage={<p>You've reached the end!</p>}>{items.map(item => (  <div key={item.id}>{item.name}</div>))}</InfiniteScroll>

Card Grid

Card 1

Description for card 1. This is some placeholder content.

Card 2

Description for card 2. This is some placeholder content.

Card 3

Description for card 3. This is some placeholder content.

Card 4

Description for card 4. This is some placeholder content.

Card 5

Description for card 5. This is some placeholder content.

Card 6

Description for card 6. This is some placeholder content.

<InfiniteScroll
loading={loading}
hasMore={hasMore}
onLoadMore={loadMore}
endMessage={<p>All cards loaded.</p>}
>
<div className="grid grid-cols-2 gap-3">
  {items.map(item => (
    <Card key={item.id}>
      <CardHeader>{item.title}</CardHeader>
      <CardBody>{item.description}</CardBody>
    </Card>
  ))}
</div>
</InfiniteScroll>

<InfiniteScrollloading={loading}hasMore={hasMore}onLoadMore={loadMore}endMessage={<p>All cards loaded.</p>}><div className="grid grid-cols-2 gap-3">  {items.map(item => (    <Card key={item.id}>      <CardHeader>{item.title}</CardHeader>      <CardBody>{item.description}</CardBody>    </Card>  ))}</div></InfiniteScroll>

Custom Loading Indicator

Record 1

Record 2

Record 3

Record 4

Record 5

Record 6

Record 7

Record 8

<InfiniteScroll
loading={loading}
hasMore={hasMore}
onLoadMore={loadMore}
loadingIndicator={
  <div className="flex items-center justify-center gap-2 py-4">
    <Spinner size="sm" />
    <span className="text-sm text-muted-foreground font-medium">
      Fetching more records...
    </span>
  </div>
}
endMessage={
  <div className="text-center py-4">
    <p className="text-sm font-medium">All done!</p>
    <p className="text-xs text-muted-foreground">{items.length} records loaded</p>
  </div>
}
>
{items.map(item => <Row key={item.id} {...item} />)}
</InfiniteScroll>

<InfiniteScrollloading={loading}hasMore={hasMore}onLoadMore={loadMore}loadingIndicator={  <div className="flex items-center justify-center gap-2 py-4">    <Spinner size="sm" />    <span className="text-sm text-muted-foreground font-medium">      Fetching more records...    </span>  </div>}endMessage={  <div className="text-center py-4">    <p className="text-sm font-medium">All done!</p>    <p className="text-xs text-muted-foreground">{items.length} records loaded</p>  </div>}>{items.map(item => <Row key={item.id} {...item} />)}</InfiniteScroll>

Loading State

Item 1

Item 2

Item 3

Item 4

Item 5

Loading more...

<InfiniteScroll
loading={true}
hasMore={true}
onLoadMore={loadMore}
>
{items.map(item => <div key={item.id}>{item.name}</div>)}
</InfiniteScroll>

<InfiniteScrollloading={true}hasMore={true}onLoadMore={loadMore}>{items.map(item => <div key={item.id}>{item.name}</div>)}</InfiniteScroll>

End of List

Item 1

Item 2

Item 3

Item 4

Item 5

🎉 You've seen everything!

<InfiniteScroll
loading={false}
hasMore={false}
onLoadMore={loadMore}
endMessage={
  <p className="text-center text-sm text-muted-foreground py-4">
    🎉 You've seen everything!
  </p>
}
>
{items.map(item => <div key={item.id}>{item.name}</div>)}
</InfiniteScroll>

<InfiniteScrollloading={false}hasMore={false}onLoadMore={loadMore}endMessage={  <p className="text-center text-sm text-muted-foreground py-4">    🎉 You've seen everything!  </p>}>{items.map(item => <div key={item.id}>{item.name}</div>)}</InfiniteScroll>

With React Query

Item 1

row

Item 2

row

Item 3

row

Item 4

row

Item 5

row

Item 6

row

Item 7

row

Item 8

row

Item 9

row

Item 10

row

import { useInfiniteQuery } from "@tanstack/react-query";

const {
data,
fetchNextPage,
hasNextPage,
isFetchingNextPage,
} = useInfiniteQuery({
queryKey: ["users"],
queryFn: ({ pageParam = 0 }) => fetchUsers(pageParam),
getNextPageParam: (lastPage) => lastPage.nextCursor,
});

<InfiniteScroll
loading={isFetchingNextPage}
hasMore={!!hasNextPage}
onLoadMore={() => fetchNextPage()}
endMessage={<p>All users loaded</p>}
>
{data?.pages.flatMap(page => page.users).map(user => (
  <UserRow key={user.id} user={user} />
))}
</InfiniteScroll>

import { useInfiniteQuery } from "@tanstack/react-query";const {data,fetchNextPage,hasNextPage,isFetchingNextPage,} = useInfiniteQuery({queryKey: ["users"],queryFn: ({ pageParam = 0 }) => fetchUsers(pageParam),getNextPageParam: (lastPage) => lastPage.nextCursor,});<InfiniteScrollloading={isFetchingNextPage}hasMore={!!hasNextPage}onLoadMore={() => fetchNextPage()}endMessage={<p>All users loaded</p>}>{data?.pages.flatMap(page => page.users).map(user => (  <UserRow key={user.id} user={user} />))}</InfiniteScroll>

How It Works

A hidden sentinel element is placed at the bottom of the children.
An IntersectionObserver watches the sentinel with a configurable rootMargin (the threshold prop).
When the sentinel enters the viewport, onLoadMore is called.
While loading is true, the observer pauses to prevent duplicate calls.
When hasMore is false, the sentinel is removed and the endMessage is shown.

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to render (the list items).
`loading`	`boolean`	`false`	Whether more data is being loaded.
`hasMore`	`boolean`	`true`	Whether there is more data to load.
`onLoadMore`	`() => void`	—	Callback to trigger loading more data.
`threshold`	`string`	`"200px"`	Root margin for IntersectionObserver.
`loadingIndicator`	`ReactNode`	—	Custom loading indicator.
`endMessage`	`ReactNode`	—	Content when all data has been loaded.
`className`	`string`	—	Additional CSS classes on the container.
`sentinelClassName`	`string`	—	Additional CSS classes on the sentinel element.

Accessibility

Container uses aria-busy="true" when loading to announce state to screen readers.
The sentinel element is aria-hidden — invisible to assistive technologies.
Works with keyboard scrolling and assistive technologies.
Loading indicator provides visual and programmatic feedback.

For very large datasets where you need virtualization, combine InfiniteScroll with VirtualList for optimal performance — InfiniteScroll handles data fetching while VirtualList handles efficient rendering.

Design Tokens

Token	Usage
`--foreground`	List item text
`--muted-foreground`	Loading text, end message
`--border`	Default loading spinner ring
`--primary`	Loading spinner accent

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

On this page