Possibility of placing "Spinner" element anywhere on UI, similar to other UI components (Buttons, forms etc.)

[mrdobalina2k]

Description

I'm looking for a way to place a spinner element that pops up upon some user interaction, to show the status of a long running task (calculation). As I work with UI elements, like buttons, forms, batch etc, I often stack these together using vstack or hstack, to order elements neatly as larger components. I would like that to be the case for a "Spinner" element as well. Currently, spinners are used as context managers, and are destroyed (unless "remove_on_exit" is set False), once the context manager exits.

Suggested solution

When a cell contains a spinner element, render that cell as a UI element, and as a placeholder put a, non-animated, empty spinner. The spinner may be triggered similarly to other elements as part of the reactivity of marimo.

Alternative

Currently, a spinner element can be dragged in the app builder to a desired location, but it does not allow for stacking, and overlaying with other elements is difficult. Additionally, the spinner only renders if the cell in which it is defined is triggered. Otherwise python code is simply shown instead (at least in edit mode).

Additional context

No response

[mscolnick]

I have a fix out for this: #1278

Here is an example for usage:

import marimo

__generated_with = "0.4.7"
app = marimo.App()


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


@app.cell
def __(mo):
    counter_button = mo.ui.button(
        value=0, on_click=lambda value: value + 1, label="increment"
    )
    counter_button
    return counter_button,


@app.cell
def __(counter_button, mo):
    mo.vstack([
        counter_button.value,
        mo.status.spinner(remove_on_exit=False) if counter_button.value < 3 else mo.md("Done!"),
    ])
    return


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