Loading State
Easy · Loading UI
In the App Router, a loading.tsx file shows instant loading UI (like a skeleton) while the page's data is still being fetched; Next.js swaps in the real page when it is ready. Here you build the same idea yourself in a Client Component.
- While fetchProducts() has not finished, show <p className="skeleton">Loading...</p>.
- When it resolves, hide the loading text and render each product as an <li> inside a <ul>.
Call fetchProducts() once, in a useEffect. Simplified: in a real app a Server Component would usually fetch the data and loading.tsx would be shown automatically.