Finish the Browse Experience
7 min read
Add the Empty Results State
Add the Empty Results State
Handle a valid TMDB request that simply returns zero movies.
Step 1 — Branch on results.length
In app/page.tsx, check the results array before rendering the grid.
{results.length === 0 ? (
<div className="empty">
Step 2 — Reuse the prepared messaging
Show Nothing matches that combination. as the title and guide the user to clear a filter or search another title. Keep the normal grid in the else branch.
Step 3 — Keep the browse layout stable
Do not redesign the empty state. The goal is to make the existing visual system communicate the absence of results clearly.
Checkpoint
Search for a title that returns no matches. The page should show the empty message instead of an empty grid with unexplained whitespace.