💡THE BIG IDEA
Every remote load has the same possible fates: still loading, failed, succeeded with data — and succeeded with an empty list, the state beginner pages leave as a blank white nothing. A tiny state machine fixes all of it: one variable names the situation, one render maps each situation to one honest screen. We walk every transition, retry loop included, and print the screen at each stop.
1function render(state, jobs) {
2 const screen =
3 state === "loading" ? "spinner…" :
4 state === "error" ? "Something broke + [Retry]" :
5 jobs.length === 0 ? "No jobs match (empty state)" :
6 jobs.length + " jobs listed";
7 console.log(state.padEnd(7), "→", screen);
8}
9render("loading", []);
10render("error", []);
11console.log("user clicks [Retry]");
12render("loading", []);
13render("success", []);
14render("success", ["SDE @ Zoho", "QA @ TCS"]);
●Every screen that loads remote data has good days and bad days: the network is slow, the server errors, the list comes back empty. Most beginner pages handle only the good day — and show a blank white nothing on all the others.
The cure is a tiny state machine: one variable naming the situation, one render mapping each situation to exactly one honest screen. We walk every transition, including the state everyone forgets.
📦 Memory boxes
what the program is remembering right now
nothing remembered yet🖥️ What the computer shows
the answers the program prints out
nothing yet ▌