Loading, error and Try again
The first load fails on purpose; the example then presses Try again itself.
A model takes time to arrive and sometimes never does. The page must always say what is happening: loading (with progress when it can), an error in plain words with a Try again button, and a deadline for loads that hang.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add an "empty" state to the first example's show() for a part that has no model yet, with the text "No 3D model for this part yet."
Write withTimeout() so it also clears its timer when the load wins.
Explain it without notes
Why can a loading bar not always show a percentage, and what should it show instead?
What should the visitor see, and what should the developer see, when a model fails to load?
Console
Nothing logged yet.Expected console output
error kept for the developer: fetch for "/data/3d/models/lumen-bik.glb" responded with 404: Not Found
on screen: "The bike could not be loaded. Check your connection and try again." | retry button visible: true
after retry: the bike is here
states: loading -> error -> loading -> loading -> ready