Lazy and Suspense

lazy()

lazy(importer) takes a function that returns a module promise, usually a dynamic import(), and gives back a component that loads the first time it renders. The module's default export is a component class, or a function component that takes props and returns nodes.

// reports.js
export default class Reports extends Component { /* ... */ }

// app.js
const LazyReports = lazy(() => import('./reports.js'));
html`<${LazyReports} year=${2026} />`;

minLoadTime keeps the fallback up for at least that many milliseconds, so a fast load does not flash.

Suspense

A lazy component must render inside a Suspense boundary. The boundary shows its fallback until every lazy component and resource inside it is ready. Pass children as a function.

Preloading

LazyChart.preload() starts loading without rendering, and preloadAll([a, b]) loads several. Call them on hover or when the browser is idle, and the component renders at once when it is needed.

link.addEventListener('pointerenter', () => LazyChart.preload());
requestIdleCallback(() => preloadAll([LazyChart, LazyTable]));

Each lazy component also exposes its state and error as signals, and loading().