CodingNic

Finish the Browse Experience

Add the Empty Results State

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.

tsx
{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.