Notification Panel: Infinite Scroll

The notification slide-over uses infinite scroll to load older notifications as you scroll through the panel. This page describes how the pagination behaviour works and what you can expect as a user.

How it works

The notification panel loads notifications in pages using an infinite query. As you scroll down through the list, a hidden sentinel element at the bottom of the scroll container is monitored by an IntersectionObserver. When the sentinel comes into view — meaning you've scrolled near the bottom — the next page of notifications is fetched automatically.

There is no button to click. Simply keep scrolling and older notifications will load seamlessly.

Loading state

While the next page is being fetched, a spinner (Loader2) appears at the bottom of the list to indicate that more content is on its way. Once loading completes, the new notifications are appended to the list and the spinner disappears.

Behaviour summary

Scenario	Behaviour
Scrolling toward the bottom of the list	Next page of notifications is fetched automatically
Fetch in progress	A subtle spinner is shown at the bottom of the panel
All notifications loaded	Spinner does not appear; no further fetches are triggered
Panel first opened	Only the most recent page of notifications is loaded

Technical notes

• Pagination is driven by an infinite query; pages are fetched incrementally as the user scrolls.
• The sentinel-based approach replaces a previous "Load more" button that required explicit user interaction and was only visible after scrolling all the way to the bottom.
• The IntersectionObserver watches the sentinel element and calls fetchNextPage() automatically when it enters the viewport.

Related files

• src/components/notification-slide-over.tsx