A request takes time, and sometimes it fails. Both are states of the page, so they go into state and render() draws them, like every other state since Lecture 5. The checks run the page against a slow server, a server that answers 503, and a dead network.
The pattern. state.status is one of "loading" Ā· "ready" Ā· "error". loadStalls(): set loading, render; try the request; set ready or error; render again. One variable for the status, so the page can never be loading and failed at the same time.
On a slow connection the list is blank for two seconds. Is it broken? Empty?
Make loadStalls() render once before the request (status "loading") and once after (status "ready"). render() shows "Loading the marketā¦" in .status and sets aria-busy on the list to "true" while loading, "false" otherwise. The preview server is slow on purpose: about half a second.
The server is down. The page says "Loading the marketā¦" forever, and the console has an Uncaught error.
Wrap the request in try ā¦ catch. On failure: state.status = "error", a sentence for people in state.error (describe(error) is in the locked part; log the error itself with console.error), no stalls. render() writes the sentence into .error-text and shows the Try again button; when there's no error, the text is empty and the button hidden. .error-text has role="alert" and stays in the page: only its text changes. Both a 503 and a network failure end up in the same catch.
The error box has a Try again button that does nothing.
A click on .retry runs loadStalls() again. Because it starts by setting "loading" and rendering, the message should clear the moment the button is clicked. The button hides itself at that moment, and a hidden element can't keep keyboard focus: move focus to the status line first (it has tabindex="-1" for that). The checks make the first request (or the first two) fail.
Homework Ā· bonus
On the afternoon before the market, the server answers 200 with []. That's a successful, empty result: show "No stalls yet. Check back at 19:00." in the status line, no error box.