Infinite Scroll

Objective: Implement an infinite scroll feature using JavaScript (or optionally React/TypeScript).

Instructions:

1. Create a list of items that loads more items when the user scrolls to the bottom of the page.
2. The list should initially display 10 items.
3. When the user scrolls to the bottom, dynamically load the next 10 items and append them to the existing list.
4. Use an API or a mocked list of data to populate the items.

Requirements:

• Items must load dynamically without a full page reload.
• The infinite scroll should work smoothly regardless of the data size.
• Handle any potential errors gracefully, showing a message if items can't be loaded.

Hints:

1. Use JavaScript's scroll event to detect when the user reaches the bottom of the page.
2. Ensure that the new items are appended to the list smoothly without overwriting the current items.
3. Optionally, add a loading spinner to indicate that more data is being loaded.

Bonus:

• Implement lazy loading for images within the list of items to optimize performance.
• Add a "Load More" button as an alternative for users who don't want automatic loading.
• Handle errors, showing a message if items can't be loaded.