One API Call. Four Possible UI States.
Build a predictable dashboard that always knows what the user should see while data is loading, after success, when no records exist, and when the API fails.
🎛 Scenario Controller
Change the API behavior and watch the application state transition in real time.
STATE MACHINEIDLE
IDLE
LOADING
↓
✅
SUCCESS📭
EMPTY⚠️
ERRORRule: the UI should represent one meaningful state at a time. A new Refresh begins another transition through LOADING.
🏦 Transaction Dashboard
Application Preview
📋 Lab Requirements
Verification0 / 10
🧭 Guideline Solution
Build the state flow step by step
💡 DESIGN RULE
Empty ≠ Error. An empty response can be a perfectly successful API call. The application must distinguish “no records” from “request failed”.
💻 Code Workspace
Complete loadDashboard()