Lazy-loaded List with Paginated Fetch (10 items per page)

Problem: Implement a Lazy-loaded List (10 items per page) Build a list component that lazy-loads the next page when the user scrolls near the bottom. Data is fetched via a paginated API, 10 items per request. Requirements: Load page 1 on initial render When the user scrolls near the bottom, fetch the next page and append items Show a loading indicator Handle the “no more data” case (stop requesting further pages) Optional (if time permits): Error state + retry Prevent duplicate/concurrent requests Constraints Page size is fixed to 10 Total number of pages is unknown until the API indicates no more data Example API GET /items?page=1&pageSize=10 -> { items: Item[], hasMore: boolean } Expected behaviors Initial load shows 10 items Scrolling near bottom loads 10 more (20 total) Rapid scrolling does not trigger duplicate/concurrent fetches No more data stops further requests Network failures show an error (if implemented) Example Input Open page Output Fetch page 1 and render 10 items