Lazy Tree View

Build an accessible project explorer in React that fetches a folder's children only the first time that folder opens. The resting UI is already complete and identical across framework variants.

Task

The starter supplies the complete explorer shell, recursive Node, accessible tree rows, CSS, and loadChildren. Move initialTree into useState, pass the toggle through the recursion, and update the selected branch immutably.

Implement this behavior:

1. Ignore file activation.
2. If a folder has children === null, set loading, show the busy state, await the supplied ~500ms loader, cache its children, expand it, and clear loading.
3. If its children are already cached, only flip expanded. Do not call the loader again.
4. Preserve the supplied role="tree", role="treeitem", role="group", aria-expanded, and aria-busy relationships. Rows are native buttons, so Enter and Space work without custom keyboard handlers.

Use a recursive updateNode helper and functional state setters so both updates around await build on the latest tree.

Expected behavior

• Opening src first shows a spinner, then reveals three indented children.
• Closing and reopening src is immediate.
• Opening the generated components folder proves the same loader works at any depth.
• Activating README.md does nothing.
• Focus remains visible, and a screen reader can identify folder expansion and loading state.

Data contract

children: null means “not loaded.” An array, including an empty one, means “loaded.” Keep that distinction: using expanded as the fetch condition causes repeat requests.