Status update for slow functions, which don't require manipulation with mo.output

[mrdobalina2k]

Description

I like to build my UI based on components, and to show my UI as a single page, rather than stacked output cells (in vertical mode). I'm doing a lot of longer calculations which are triggered by e.g. a run button. When a long calculation takes place, I want to show a status spinner.

The current solution proposed is something like this, assuming the slow function is triggered by a run button:

mo.output.replace(main_ui)
if run.value:    
        mo.output.replace(spinner)
        result=await slow_function()
        mo.output.replace(mo.vstack([main_ui, result]))

Besides being very verbose, this method breaks down if we want to control the number of outputs inside our app: each of these cells which use a spinner will have it's own output, meaning we cannot use the vertical display mode in the app run mode, if we to control the layout using the vstack, or hstack methods, based on the UIElement of each returned by each cell. Instead we're forced to use the grid-mode, and place the outputs manually.

Moreover, and more critically, we cannot use this method when we want to place the output on an tab, because a tab requires us to pass the UIElement, which we don't have in this case (we only have the cell output).

Therefore I think, the current implementation is insufficient, for the more advanced user.

Suggested solution

We need a function similar to mo.lazy, let's call it mo.slow, but which gets re-rendered when triggered.

e.g.

import marimo

__generated_with = "0.11.0"
app = marimo.App(width="medium")


@app.cell
def _():
    import marimo as mo
    import asyncio
    return asyncio, mo


@app.cell
def _(mo):
    run_button = mo.ui.run_button()
    return (run_button,)


@app.cell
def _(asyncio, mo):
    async def slow_function():
        await asyncio.sleep(5)
        return mo.md("Results...")
    return (slow_function,)


@app.cell
def _(mo, run_button, slow_function):
    slow_function_output = mo.md("No results yet")
    if run_button.value:
        slow_function_output=mo.slow(slow_function, show_loading_indicator=True) # mo.lazy only renders a spinner once
    return (slow_function_output,)


@app.cell
def _(mo, run_button, slow_function_output):
    main_ui = mo.ui.tabs({"configure": mo.md("Configuration"), "results": mo.vstack([run_button, slow_function_output])})
    return (main_ui,)


@app.cell
def _(main_ui):
    main_ui
    return


if __name__ == "__main__":
    app.run()

mo.lazy does the job almost (showing a spinner), but it's purpose is different (delay rendering of ui components).

The function mo.slow could take as arguments what type of status update to show (spinner, bar, wave. etc.)

Alternative

No response

Additional context

No response

[mrdobalina2k]

Not sure you're suggestion something that exists, or proposing a new feature, but mo.output.context does not exist. If you mean

with mo.output.spinner() as _spinner:
    results = await slow_function()

that shows the spinner in the cell which holds the context manager.

Also, I don't think this works for the proposed use-case (tabs)?

[dmadisetti]

Sorry, I should have specified- this does not exist. I was suggesting apis that might be useful

[dmadisetti]

To me this seems like a bug in mo.lazy since the "lazy function" is retriggered, the loading indicator just doesn't appear again. e.g.

...

@app.cell
def _(asyncio, mo):
    async def slow_function():
       await asyncio.sleep(3)

       import uuid
       nonce = uuid.uuid4()
       print("in slow function", nonce)
       return mo.md("Results: " + str(nonce))

    return (slow_function,)

...

This also shows that lazy is triggered twice when hidden by tabs or an accordion: https://marimo.app/?slug=rz2ox3

[mrdobalina2k]

I actually already submitted a bug report, but the developers explained it was intentional: #3461

[mrdobalina2k]

I'd also like to point out that there's a discrepancy between the use-case of lazy loading of components, and the new lazy loading of download buttons https://docs.marimo.io/api/media/download/#marimo.download, which I find confusing.