Lazy

marimo.lazy(element: Callable[[], object] | object | Callable[[], Coroutine[None, None, object]], show_loading_indicator: bool = False) None

Lazy load a component until it is visible.

Use mo.lazy to defer rendering of an item until it’s visible. This is useful for loading expensive components only when they are needed, e.g., only when an accordion or tab is opened.

The argument to mo.lazy can be an object to render lazily, or a function that returns the object to render (that is, functions are lazily evaluated). The function can be synchronous or asynchronous. Using a function is useful when the item to render is the result of a database query or some other expensive operation.

Examples.

Create a lazy-loaded tab:

tabs = mo.ui.tabs(
    {"Overview": tab1, "Charts": mo.lazy(expensive_component)}
)

Create a lazy-loaded accordion:

accordion = mo.ui.accordion({"Charts": mo.lazy(expensive_component)})

Usage with async functions:

async def expensive_component(): ...


mo.lazy(expensive_component)

Initialization Args.

  • element: object or callable that returns content to be lazily loaded

  • show_loading_indicator: a boolean, whether to show a loading indicator while the content is being loaded. Default is False.