Design an Image Feed (Infinite Scroll + Offline Support + Testing)

Problem: Build an Image Feed (Infinite Scroll + Offline Support + Testing) You are given an API to fetch a paginated list of images. Implement a frontend Image Feed page/component with the following requirements: Display a list/grid of images only (no like/comment features). Support infinite loading (infinite scroll). Support offline usage: when offline, users can still view previously loaded content; when back online, the feed can continue loading. Provide tests covering core logic and important edge cases. Functional Requirements Initial Load Fetch and render the first page when the page/component mounts. Infinite Scroll Automatically load the next page when the user scrolls near the bottom. Prevent duplicate requests (e.g., multiple concurrent triggers). Handle the “no more results” condition correctly. Offline Support When offline: Render previously fetched items from cache. Avoid making guaranteed-to-fail network calls (or fail gracefully with a clear message). When back online: Continue fetching from the last progress point (instead of reloading from scratch and overwriting). Error Handling & UX Show a clear error message when the API fails. Provide a retry mechanism (button or automatic retry). Show a visible loading state (spinner/skeleton). Testing Add unit and/or component tests to cover: initial load success/failure infinite scroll triggering next page guarding against concurrent/duplicate loads offline cache rendering resuming loading after network recovery Suggested Constraints Each page returns 10~50 items. Total items can be up to 1e4. Consider performance: rendering and scrolling should remain smooth. Deliverables Implementation code (React/Vue/Vanilla is fine). Test code (e.g., Jest + Testing Library/Cypress). A short note describing your caching/offline strategy (localStorage/IndexedDB/Service Worker, etc.).