Skip to content

Lazy loading

wybthon.lazy

lazy

Lazy-loaded components integrated with Suspense.

lazy wraps a loader callback (sync or async) that produces a component. The component loads on first mount, backed by a Resource: while the load is in flight, the nearest Suspense boundary shows its fallback, and a load failure raises into the nearest ErrorBoundary. This matches SolidJS's lazy(() => import(...)) semantics, adapted to Python's import system.

The loader may return:

  • a component callable directly,
  • an imported module (an export is picked by convention: Page, then default, then the first callable), or
  • a module path string, or a (module_path, attr) tuple, imported via importlib.

Async loaders can await arbitrary work first (for example micropip.install(...) in Pyodide) before returning any of the above.

Example 
About = lazy(lambda: ("app.about.page", "Page"))

async def load_chart():
    import micropip
    await micropip.install("app-charts")
    import app_charts
    return app_charts.Chart

Chart = lazy(load_chart)
Chart.preload()  # warm the cache on hover/intent

Suspense(fallback=p("Loading..."), children=[About()])
See Also

Functions:

Name Description
lazy

Create a lazily-loaded component from a loader callback.

lazy 

lazy(loader: Callable[[], Any]) -> Callable[..., Any]

Create a lazily-loaded component from a loader callback.

The loader runs once, on the first mount (or on preload); the resolved component is cached for every later mount. While loading, the nearest Suspense boundary shows its fallback. A loader error raises into the nearest ErrorBoundary.

Parameters:

Name Type Description Default
loader Callable[[], Any]

Zero-arg callable, sync or async, returning a component callable, a module, a module-path string, or a (module_path, attr) tuple.

 required

Returns:

Type Description
Callable[..., Any]

A component callable with a .preload() method that starts the
Callable[..., Any]

load early and returns the backing
Callable[..., Any]

Resource.
Example 
Team = lazy(lambda: ("app.about.team.page", "Page"))

Route(path="/about/team", component=Team)
Link("Team", href="/about/team", on_mouseenter=lambda e: Team.preload())

What's in this module

lazy defers loading a component until the first time it mounts. The load is backed by a Resource, so it integrates with Suspense (fallback while loading) and ErrorBoundary (load failures) automatically, matching SolidJS's lazy(() => import(...)).

Quick example

from wybthon import Route, Router, Suspense, component, lazy
from wybthon.html import p

HeavyChart = lazy(lambda: ("app.heavy_chart", "Chart"))

routes = [
    Route(path="/charts", component=HeavyChart),
]


@component
def App():
    return Suspense(
        fallback=lambda: p("Loading…"),
        children=lambda: Router(routes=routes),
    )
  • The loader may return a component callable, an imported module, a module-path string, or a (module_path, attr) tuple.
  • Async loaders can await arbitrary work first (for example micropip.install(...) in Pyodide) before returning the component.
  • The resolved component is cached; the loader runs at most once.
  • HeavyChart.preload() starts the load early (handy for hover or focus warm-ups) and returns the backing resource.
  • A loader error raises into the nearest ErrorBoundary.

See also