feat: mo.lazy

[mscolnick]

This PR adds a new component mo.lazy to lazily render FE or lazily compute BE (python)

---

For example,

import marimo as mo

data = db.query("SELECT * FROM data")
mo.lazy(mo.ui.table(data))

In this example, mo.ui.table(data) will not be rendered on the frontend until is it in the viewport.
For example, an element can be out of the viewport due to scroll, inside a tab that is not selected, or inside an accordion that is not open.

However, in this example, data is eagerly computed, while only the rendering of the table is lazy. It is possible to lazily compute the data as well: see the next example.

import marimo as mo

def expensive_component():
    import time
    time.sleep(1)
    data = db.query("SELECT * FROM data")
    return mo.ui.table(data)

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

In this example, we pass a function to mo.lazy instead of a component. This function will only be called when the user opens the accordion. In this way, expensive_component lazily computed and we only query the database when the user needs to see the data. This can be useful when the data is expensive to compute and the user may not need to see it immediately.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
marimo-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 3, 2024 9:13pm
marimo-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 3, 2024 9:13pm

[akshayka]

This is nice! I like the thorough docs, too (I pushed up some small docs changes).

I left one comment about the argument name show_spinner. Additionally, playing with the smoke test, I found that lazy components in an accordion sometimes don't render. See video for example - it only renders at the very end.

lazy-spinner-bad-interaction.webm

[akshayka]

Thoughts on changing this argument name to show_loading_indicator, to make it agnostic to the UI?

[github-actions]

🚀 Development release published. You may be able to view the changes at https://marimo.app?v=0.3.9-dev10