Bi-directional infinite scroll

[AwelTeam]

Bi-directional infinite loading for collection components

---

Hi team, and thanks for the great work on the LoadMoreItem API that shipped last year — it's been a solid foundation to build on.

I'm building a retail management application that has a few list views (order history, inventory audit logs, transaction feeds...) where users need to deep-link into the middle of a large dataset and scroll both forward and backward from that anchor point. Think of landing on a specific order and being able to page toward newer or older records without losing your place.

The data layer is already handled — TanStack Query v5's useInfiniteQuery exposes fetchPreviousPage / hasPreviousPage symmetrically alongside the forward equivalents. The missing piece is on the React Spectrum side.

---

What I'm running into

1. No top sentinel. LoadMoreItem currently only works at the bottom of the collection. There's no supported way to place a sentinel at the top to trigger fetchPreviousPage when the user scrolls up to it.
2. useAsyncList is forward-only. There's no loadPrevious() method or prevCursor return field, so using the built-in async list helper alongside a bi-directional API requires stepping outside it entirely.

---

What I'd love to see

The minimal surface area that would unlock this:

// Top sentinel — load previous page <LoadMoreItem position="start" onLoadMore={list.loadPrevious} isLoading={list.loadingState === 'loadingPrevious'} /> // ... items ... // Bottom sentinel — load next page (existing, unchanged) <LoadMoreItem onLoadMore={list.loadMore} isLoading={list.loadingState === 'loading'} />

And for useAsyncList:

async load({ signal, cursor, direction }) { const url = direction === 'backward' ? `/api/orders?before=${cursor}` : `/api/orders?after=${cursor ?? ''}`; const json = await (await fetch(url, { signal })).json(); return { items: json.results, cursor: json.next, prevCursor: json.prev }; } // then on the handle: list.loadPrevious();

A small 'loadingPrevious' addition to the loadingState union would round it out.

---

I understand this is a non-trivial addition and there may be design considerations I'm not seeing from the outside. Thanks for considering it!

[snowystinger]

We have some work being discussed around Carousels which could position the scrollbar in the center at all times and allow for something like this. useAysncList is a getting started point really, you should be able to create your own list management hook. Though, you'd still need to know the direction. But hopefully that would be part of the work being discussed.

I may be misunderstanding, but do you actually need bi-directional infinite scroll? You're landing in the middle of a data-set, which kind of implies a known start or a bound on the scrolling to the front. In this case, would you be better served by a scroll to item? In this case, you could populate a bunch of empty items before the filled in set that your api returns. Then, as you scroll them into view, populate them? This also doesn't really exist yet, the scroll to item, with our virtualizer and scrollview, but that may be coming soon as well.

[AwelTeam]

Thanks for the quick and thoughtful reply!
Yes, I do need true bi-directional infinite scroll. My app uses cursor-based pagination. I land in the middle of the dataset with an initial cursor, then:

• Scroll up → append older items using the “before” cursor
• Scroll down → append newer items using the “after” cursor

Both directions must grow the list dynamically without a fixed start or end.