Lazy-loaded tabs
Build tabs whose content is code-split: each tab's content comes from its own module in PAGES, loaded with import() only when the tab is first opened. Each module prints <name> module loaded when it runs, and its default export returns the tab's text.
Finish showTab(name) so that it: marks the clicked tab with aria-selected="true" and all others "false"; shows Loading... in #panel; imports the tab's module and shows the result of its default export; and, if loading fails, shows Could not load this tab. (the News module is broken on purpose).
The Home tab opens at start. No module should load before its tab is opened, and none more than once.
What Check tests
- Home is shown at start, and only its module has loaded
- Clicking Stats shows its text and selects only that tab
- Going back and forth doesn't load a module twice
- A broken module shows
Could not load this tab. - Uses dynamic
import() - No uncaught errors
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.