Overview

Develop a performant infinite scroll feed for a content aggregation platform called "Chronicle Feeds." This problem challenges you to implement efficient asynchronous data fetching and display, creating a smooth user experience as they scroll through an endless stream of articles. You will focus on managing loading states, handling errors, and optimizing rendering for a large number of items.

What you need to do / Task

1. Set up a mock API service: Create a local utility function that simulates an asynchronous API call to fetch "articles." This function should:
   • Accept page and limit parameters.
   • Return a Promise that resolves with an array of article objects after a delay (e.g., 500-800ms).
   • Generate unique article data for each page request (e.g., Article ${page * limit + i}).
   • Simulate an "end of feed" by returning an empty array or an array with fewer than limit items after a certain number of pages (e.g., after 5-7 pages).
2. Implement the Infinite Scroll Feed:
   • Display a list of articles fetched from your mock API.
   • As the user scrolls towards the bottom of the feed, automatically fetch the next page of articles.
   • Append new articles to the existing list without replacing it.
   • Display a "Loading..." indicator while new data is being fetched.
   • Display a "You've reached the end of the feed!" message when there's no more data to load.
   • Implement basic error handling, showing an "Error loading articles. Please try again." message with a retry button if a fetch fails.
3. Optimize performance: Ensure the component remains responsive and performant even with a large number of articles (e.g., 100+). Consider techniques like virtualization if time permits, but focus primarily on efficient state updates and avoiding unnecessary re-renders.

UI/UX expectations

• The feed should display articles in a simple vertical list. Each article item can be a div with a title and a short body/description.
• A clear "Loading..." indicator should appear at the bottom of the feed when new data is being fetched.
• An "End of Feed" message should be clearly visible when all data has been loaded.
• Error messages and a retry button should be visually distinct and user-friendly.
• Basic styling to differentiate article items is sufficient; focus on functionality over elaborate design.

Acceptance criteria

• Initial load displays the first page of articles.
• Scrolling near the bottom triggers subsequent page fetches.
• New articles are appended, not replaced.
• A "Loading..." indicator is visible only when data is being fetched.
• "End of Feed" message appears correctly when no more data is available.
• Error message and retry button appear on fetch failure.
• Clicking retry button attempts to re-fetch the failed page.
• The UI remains responsive and smooth during scrolling and data loading.

Clarifications

• What defines "near the bottom"? Typically, when the user scrolls within a certain pixel threshold (e.g., 200px) from the bottom of the scrollable container.
• How should I simulate fetch errors? You can make your mock API occasionally reject its promise (e.g., 10-20% chance) or introduce a flag to trigger an error for testing.
• What data should articles have? At minimum, a title (string) and id (number or string). A body or description is also good.
• Can I use an existing infinite scroll library? No, the core infinite scroll logic (intersection observer or scroll event listener) should be implemented by you. Libraries for styling or utility functions are fine.