Design loading, empty, and error states for mission-critical pages

Interview framing: Mission-critical UI should keep users oriented and avoid implying certainty when data is missing, stale, or unauthorized.

State types:

1. Initial loading:

• Use skeletons when layout is predictable.
• Avoid blank screens without context.

2. Empty state:

• Explain whether there is no data, no matching filter result, or no permission to view data.
• Provide the next useful action if allowed.

3. Partial state:

• Show available sections while clearly marking failed sections.
• Do not block the whole page if one secondary panel fails.

4. Refreshing/stale state:

• Keep old data visible if that is safer than flicker.
• Label stale data or show last updated time when decisions are time-sensitive.

5. Error state:

• Distinguish validation, network, 401, 403, 404, conflict, and server errors.
• Offer retry only when retry makes sense.
• Preserve user input after failures.

6. Permission state:

• 403 should explain lack of access without leaking sensitive resource details.
• Offer request-access or contact-admin flows if product supports them.

Accessibility:

• Announce important async changes with live regions.
• Move focus to critical errors when a submit fails.
• Ensure loading indicators have text alternatives.

Good closing: "The UI should be honest about confidence: what loaded, what failed, what is stale, and what the user can safely do next."