Lazy-load expand on demand
Live in demo 31-lazy-tree-load.
Open the live example: Lazy tree (load on expand) (Tree & Hierarchy)
When
Tree rows where children are fetched only when the user expands their parent.
How
Key API surface:
onExpand callbackmerge children into $state on resolve
See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.
See also
- Demo 31-lazy-tree-load source
- Demo 31-lazy-tree-load prompt sidecar - drop into an LLM context window
- Recipes index
Related articles
- Lazy-Loading Master-Detail Content in SvGrid - Fetch detail-panel data only when a row is expanded, cache the results, and cancel abandoned requests - keeping a large grid fast without paying for panels no one views.
- Empty, Loading, and Error States for a Svelte Data Grid - How to handle the three non-data states in a Svelte grid - empty (with two subtypes), skeleton loading that does not flash, and recoverable errors that keep existing rows visible.
- Master-Detail Rows - Expandable Detail Panels in SvGrid - How to wire expandable master-detail rows in SvGrid, from a nested grid of line items to lazy-fetched panels and programmatic expand on deep-link.