Concept questionEasy~5 minProduct Features / 7 of 19

Interview question

What states would you design for a page that fetches data from an API?

Design loading, empty, and error states for data pages

Explains practical UI states for data fetching, empty results, partial failure, retry, and accessible recovery.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I would design at least loading, loaded, empty, error, and refreshing states. The first load can show a skeleton or compact loading indicator. Empty state copy depends on whether there is truly no data or just no results for the current filters. Error states need a safe message and a retry action. If the page already has data, a background refresh can keep showing stale data with a small pending indicator.

Full answer below

Practice focus

Loading states, skeletons, empty states, error states, retries, stale data, partial data, accessibility, and UX clarity.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A technically correct API integration can still feel unfinished if the page only works on the happy path. Interviewers often look for whether the UI handles real network and data states.
I would design at least loading, loaded, empty, error, and refreshing states. The first load can show a skeleton or compact loading indicator. Empty state copy depends on whether there is truly no data or just no results for the current filters. Error states need a safe message and a retry action. If the page already has data, a background refresh can keep showing stale data with a small pending indicator.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would separate full-page states from partial states. A dashboard might render some panels while one panel fails. A table might preserve the previous page while the next page loads. The API response shape can include enough metadata to explain empty results, permissions, and pagination. The UI should avoid layout jumps, disabled dead ends, and retry loops that spam the API.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would connect UI states to observability. Repeated error states on one page may indicate an API regression, auth expiry, or a contract mismatch. I would include correlation ids or support codes in safe error UI when useful. Accessibility needs focus management after retries, clear button labels, and screen-reader announcements for important state changes. The design should also handle offline or flaky networks gracefully if the product context needs it. I would also include these states in component stories or visual checks so future changes do not accidentally collapse the page into a blank panel.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Only implementing the successful loaded state.
Using the same empty message for no data and filtered no-results.
Blanking the whole page during background refresh.
Retry buttons that can trigger uncontrolled repeated requests.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot name the main data-fetching states.
No recovery path after an API error.
Layout shifts heavily between states.
Ignores accessibility of state changes.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would you keep stale data visible?
How would you design partial failure on a dashboard?
What would you show for a 403 versus a 500?

Continue the section

Next in Product Features: Master Detail Fetching

Step 8 of 19

Design master-detail data fetching

Opening drill

Concept questionEasy~5 minProduct Features / 7 of 19

Interview question

What states would you design for a page that fetches data from an API?

Design loading, empty, and error states for data pages

Explains practical UI states for data fetching, empty results, partial failure, retry, and accessible recovery.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Loading states, skeletons, empty states, error states, retries, stale data, partial data, accessibility, and UX clarity.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
A technically correct API integration can still feel unfinished if the page only works on the happy path. Interviewers often look for whether the UI handles real network and data states.
I would design at least loading, loaded, empty, error, and refreshing states. The first load can show a skeleton or compact loading indicator. Empty state copy depends on whether there is truly no data or just no results for the current filters. Error states need a safe message and a retry action. If the page already has data, a background refresh can keep showing stale data with a small pending indicator.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would separate full-page states from partial states. A dashboard might render some panels while one panel fails. A table might preserve the previous page while the next page loads. The API response shape can include enough metadata to explain empty results, permissions, and pagination. The UI should avoid layout jumps, disabled dead ends, and retry loops that spam the API.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
In production I would connect UI states to observability. Repeated error states on one page may indicate an API regression, auth expiry, or a contract mismatch. I would include correlation ids or support codes in safe error UI when useful. Accessibility needs focus management after retries, clear button labels, and screen-reader announcements for important state changes. The design should also handle offline or flaky networks gracefully if the product context needs it. I would also include these states in component stories or visual checks so future changes do not accidentally collapse the page into a blank panel.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Only implementing the successful loaded state.
Using the same empty message for no data and filtered no-results.
Blanking the whole page during background refresh.
Retry buttons that can trigger uncontrolled repeated requests.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

Cannot name the main data-fetching states.
No recovery path after an API error.
Layout shifts heavily between states.
Ignores accessibility of state changes.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

When would you keep stale data visible?
How would you design partial failure on a dashboard?
What would you show for a 403 versus a 500?

Continue the section

Next in Product Features: Master Detail Fetching

Step 8 of 19

Design master-detail data fetching

What states would you design for a page that fetches data from an API?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

What states would you design for a page that fetches data from an API?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section