#46New Way of Data Fetching

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

1. renders the app title
2. shows skeleton while loading
3. renders characters after loading
4. uses React use() instead of useEffect