Render Loading, Empty, Error, and Recovery States

One request, one meaningful state

A Book List request is not simply “done” or “not done.” Model its lifecycle with five states:

• idle — no request is in progress yet.
• loading — a request is waiting for an outcome.
• success — a validated collection contains one or more books.
• empty — a validated collection contains no books.
• error — the app could not obtain a usable collection.

A request that finishes has reached an outcome, but that outcome is not automatically usable results. A valid [] is empty; a failed or unusable response is error.

Keep related facts in one state object. This prevents combinations such as an error message paired with old books presented as the current result.

These are invariants: rules that must stay true in every rendering. In particular, success requires a validated nonempty collection, empty requires a validated empty collection, and error requires a message with no displayed collection. Independent flags such as isLoading and hasError can accidentally allow contradictory combinations; this coordinated object gives each situation one meaning.

Build the Book List around elements that persist across every request: a fixture selector, one action button, a results region, and a separate status region.

Keep the action button outside the results region. Later, the list or visible outcome message can change without replacing the control the user activated.

Inside the results region, keep the book list and visible outcome message separate. The status region is a separate persistent element and starts empty while the interface is idle.

Begin with the lifecycle snapshot already defined:

{ status: "idle", books: [], error: null }

Idle means the interface is ready, not loading. Its first render must not request a fixture automatically. The learner selects a fixture and explicitly starts a read in a later step.

If you need a minimal Vite project, create package.json, run npm install, then start the local server with npm run dev. Use the localhost address printed by Vite.

Create these three files in public/data/. They provide reproducible populated, empty, and malformed outcomes without an external API.

Keep the trailing comma. This fixture is intentionally malformed, so JSON decoding will fail when it is requested later.

Create index.html. The stylesheet link makes the local styles apply. The results region has a name, while load-status is a persistent sibling outside it. Do not place the button inside results.

Create src/style.css. The .visually-hidden class removes the status element from the visual layout while preserving it in the document.

Create src/main.js. Use let because later steps replace the entire state object for each lifecycle transition. This starter renders only the initial idle view: it does not attach a request handler or request a fixture. The supplied helper reuses established HTTP, JSON, and record-validation checks, with cache-free fixture reads.

A completed Book List request has two valid data outcomes. After a response has been decoded and validated as a collection:

• A collection with one or more book records is success.
• A collection with zero records is empty.

Both outcomes mean the request produced usable data. They differ only in what that validated collection contains, so the results region must show different content.

Step 2 already created render(). Do not add a second function declaration. Replace that existing render() function with the version below, then keep the existing render(); call at the bottom of src/main.js.

This single renderer first clears result-specific DOM content, applies the stable idle control settings, and then adds only the content for success or empty. Later steps will extend this same function for loading, status feedback, and errors.

Replace the render() function from Step 2 with this integrated version. It handles idle, success, and empty; later states will be added to this same function.

Use the established fetchBooks(url) helper as the boundary for valid data. Only after that helper resolves does the collection length choose success or empty.

Malformed JSON does not produce a validated collection. Its JSON decoding fails before a length can be checked, so it must not be represented as empty. A later step maps that failure to the error outcome.

To inspect rendering without request timing, temporarily replace the existing final render(); call with this success snapshot. Save, inspect the page, then restore the original render(); call before continuing.

Next, temporarily replace the final render(); call with this empty snapshot. The list must be cleared rather than retained from the earlier snapshot. Restore the original render(); call when finished.

A replacement load starts a new request. While its outcome is unknown, previous book titles must not look like the new request’s result, and obsolete error information must not remain attached to it.

Before any await, replace the current state with a clean loading snapshot:

• status is "loading".
• books is an empty array.
• error is null.

Call render() immediately after that assignment. The results region can then show Loading books… without old titles or a previous message. The controlled 1.2 s delay in this step makes that pending state observable.

Replace the existing render() function from Step 3 with this version. It still handles the existing idle, success, and empty snapshots, but it now derives temporary control availability from state.status.

The fixture selector uses its native disabled property. The action button stays focusable and exposes its unavailable state through aria-disabled. Because aria-disabled alone does not block click events, loadBooks() will guard activation separately.

Replace the existing render() function. Keep the existing final render(); call at the bottom of src/main.js.

Add this temporary, repeatable loading preview before the existing final render(); call in src/main.js. It intentionally does not call fetchBooks() yet: after the 1.2 s observation period, it returns to idle so the application remains usable for another attempt.

The local url is captured before rendering disables the selector. In Step 6, replace this temporary controller with the controller that reads the fixture and selects a terminal outcome.

Add this code before the existing final render(); call. Save the file, select a fixture, and activate Load books to inspect the transition.

Two signals, two jobs

A results update needs separate accessibility signals:

• The results region uses aria-busy="true" while its contents are being replaced. It returns to "false" after the interface has rendered the settled outcome.
• The persistent status region gives a short, polite progress or completion announcement.

Keep load-status outside results. If a status message were inside busy content, assistive technology could defer it along with the changing results. The book list itself is not live, so inserting titles does not announce each title individually.

Replace the render() function from Step 4 with this version. It updates the busy state before changing result content, then leaves aria-busy true only for the loading state. There are no early returns, so control, visible-result, and status updates run for every state.

Keep the existing render(); call and the temporary loadBooks() preview from Step 4. Step 6 will connect this renderer to the completed request controller.

The action button is not created, removed, or replaced by render(). A person who activates it with the keyboard remains on that same button while the status region reports progress or completion.

Do not call .focus() for an ordinary Book List update. An announcement communicates the result; moving focus would unnecessarily interrupt the user's current keyboard position. The list remains non-live, so the status message gives a concise count instead of reading every inserted title.

A request that fails has finished, but it has not produced usable books. Treat it as the terminal error state—not as empty.

The existing fetchBooks(url) helper rejects when the read fails, the HTTP response is unsuccessful, JSON is malformed, or decoded data fails validation. One catch maps all of those technical causes to one concise interface outcome.

For an error state, keep books as an empty array and store a user-facing message in error. This prevents titles from a previous request from looking like the response to the failed request.

Replace the existing render() function from Step 5 with this version. It preserves the busy, control, success, and empty behavior already established, then adds a small error branch.

The shared isLoading value restores terminal settings automatically. When an error state is rendered, it is no longer loading: aria-busy becomes "false", the selector is enabled, and the persistent button is available. Rendering does not reset the stored error state.

Replace the existing render() function. Keep the existing final render(); call and the temporary controller until the next screen replaces it.

loadBooks() owns the request transition. It captures the selected path, enters loading, and renders before awaiting. Then try selects a valid terminal data outcome, while catch selects the error outcome.

finally performs the final render on both paths. Because it renders the terminal state already chosen by try or catch, it restores controls and clears busy semantics without resetting the outcome to idle or success.

Replace the temporary loadBooks() preview from Step 4 with this controller. Keep delay(ms), the existing click listener, and the final render(); call in src/main.js.

An error is a terminal outcome, not the end of the interface. Keep the same persistent action button in the document and label it Retry when state.status is "error".

The button still starts the existing loadBooks() controller. A retry begins a new read of the selected fixture: the controller clears the previous error, enters "loading", and can settle as "success", "empty", or "error" again.

Do not add automatic retries. Recovery remains an explicit user action, so the user decides whether to try again.

Update the existing render() function so its persistent button communicates the current action. Replace its current loadButton.textContent = "Load books"; line with the following expression. Keep the existing loading availability logic unchanged.

Replace the existing button-label line inside render().

At the bottom of src/main.js, replace the earlier click-listener block with this complete block. It preserves exactly one click listener and adds the fixture-change behavior; do not append a second click listener.

Verify Book List in the browser, not only by reading its code. Start from a freshly loaded page: it should be idle, make no request automatically, show no books or outcome message, and leave both controls usable.

For each route, observe the visible results region, the separate status region, control availability, and aria-busy. The controlled await delay(1200) pause gives you 1.2 s to inspect loading before a fixture settles.

A normal fixture-selector change intentionally resets the interface to idle. To test a direct replacement transition from populated results to an empty outcome, use the Console method on the next screen instead. It changes the selector value without firing its change event, so the current success state remains until the existing button starts the replacement load.

Run the fixture routes in order:

1. Load /data/books.json and wait for the two titles.
2. Change the selector normally to /data/books-empty.json. Confirm that the change handler returns the interface to idle and clears the titles before you activate Load books. Then load it and confirm the empty outcome.
3. Load /data/books.json again and wait for success. Keep this populated state for the direct replacement check.
4. Use the Console command on this screen, then activate the existing Load books button. During its 1.2 s loading period, the old titles must be absent; it should settle as empty.
5. Load /data/books-broken.json, then activate Retry once without changing the selection.
6. For recovery, select /data/books.json normally, enable your browser DevTools Network Offline condition, and activate Load books. After the error, restore connectivity without reloading the page and activate Retry.

The helper uses fetch(url, { cache: "no-store" }), so the recovery attempt reads the same URL again rather than relying on a cached response.

After /data/books.json has settled with two titles, open the browser Console and run this exact command. Do not dispatch a change event. Then activate the existing Load books button with the mouse or keyboard.

The Console assignment changes what loadBooks() will capture when the button is activated, but it does not invoke the selector's change listener. The app therefore remains in its populated success state until activation enters loading. This makes the direct success → loading → empty check reproducible without changing public/data/books.json while Vite is watching it.

During every loading period, confirm that the fixture selector is natively disabled. The persistent action button remains in keyboard navigation with aria-disabled="true", while its JavaScript guard prevents another request. After success, empty, or error, both controls become usable and the results region ends with aria-busy="false".

Activate the button with the keyboard and keep focus on it. Feedback should update without a .focus() call or an automatic focus move. Inspecting text and attributes confirms what the app set, but it does not alone prove what a particular screen reader announced.