Overview
Build a simple React page that fetches Rick and Morty characters using the new Suspense-driven use() data fetching approach. The goal is to replace the standard useState/useEffect flow with use() while keeping the same UI behavior.
Requirements
- Fetch the character list from
https://rickandmortyapi.com/api/character/.
- Use React Suspense with
use() to read a stable promise (no useEffect + useState fetching).
- Show the provided skeleton UI while data is pending.
- Render character cards after the data resolves.
- Keep the existing layout and styling conventions.
Notes
- Create the fetch promise outside the component so it is stable across renders.
- The Suspense fallback should be the
CharactersSkeleton component.
- Simulated latency is optional; you can remove it or change its duration without breaking tests.
- The tests focus on using
use() and not useEffect; using useEffect will fail even the title test.
Tests
- renders the app title
- shows skeleton while loading
- renders characters after loading
- uses React use() instead of useEffect