Infinite Scroll Search

Build a user search with infinite scroll: the list loads more users when you reach its end, and typing a search starts it again. You practice effects that depend on several values, their cleanup, and pagination state that has to stay coherent.

• The interface: the search box, the list, the Loading... status and the messages at the end.
• fetchUsers({ query, page }) in api.js: it returns a promise with { users, hasMore }, 10 users per page, and pages start at 1. It also accepts a signal from an AbortController. In the preview it answers after a random delay, like a real network.
• <Sentinel onVisible={fn} /> in Sentinel.jsx: an invisible element that calls fn every time it scrolls into view. It is already at the end of the list, and it stays there while a page loads.
• Neither api.js nor Sentinel.jsx show in the editor: you only change App.jsx.
• Your job is the logic: which page to request, when, and what to do with each answer.
• Keep aria-label="Search users", the texts Loading..., No more users and No users found, and the role="status": the tests use them.

• When it opens, it requests page 1 of the empty search and shows Loading... in the element with role="status" until the answer arrives.
• Each page that arrives is added at the end of the list.
• When the end of the list becomes visible, it requests the next page.
• When an answer says hasMore: false, it stops requesting pages and shows No more users, or No users found if the search found nobody.
• Typing in the search box starts again: the list empties and it requests page 1 of the new search.

• You open the challenge → Loading..., then the first 10 users.
• You scroll to the end → Loading... below the list, then 10 more users after them.
• You type an → the list empties and shows the first users whose name contains an.

• Effects that depend on several values, and their cleanup.
• Requests that take a while to answer.
• Pagination state that has to stay coherent.