321. Infinite Scroll Feed

Build an Infinite Scroll Feed component in React that loads paginated content automatically as the user reaches the bottom.

1. Initial Load

• Fetch the first page on mount
• Render loading state during the initial request
• Render fetched items in order

2. Infinite Loading

• Load the next page when the bottom sentinel is visible
• Do not trigger duplicate requests for the same page
• Append new items to existing list
• Stop requesting when hasMore is false

3. Error + Retry

• Show an inline error message on failed page load
• Keep already loaded items visible
• Provide a retry button for the failed request

4. Accessibility + UX

• Announce loading/end state in readable text
• Keep scroll smooth and avoid layout jumps
• Make retry action keyboard accessible

5. Mock API Setup (Required)

Create a local dummy paginated API in your implementation (do not call external services). Use seeded items like this:

const allItems: FeedItem[] = Array.from({ length: PAGE_SIZE * MAX_PAGES }, (_, i) => ({
  id: i + 1,
  author: `Engineer ${((i % 7) + 1).toString()}`,
  body: `Post #${i + 1}: Building resilient UI with loading, retry, and pagination.` ,
  likes: 12 + ((i * 13) % 87),
}));

Then expose a page-based function (for example fetchPage(page)) that returns items and hasMore.

Data Contract

interface FeedItem {
  id: number;
  author: string;
  body: string;
  likes: number;
}

interface PageResult {
  items: FeedItem[];
  hasMore: boolean;
}

type FetchPage = (page: number) => Promise<PageResult>;