mo.status.spinner renders outside an mo.accordion section

[tanhaow]

We’re building a small web app on top of marimo and using mo.accordion as the primary page layout. Inside one accordion section, we trigger a long-running task from a button and show a progress spinner with mo.status.spinner. The spinner renders outside and above the accordion (global overlay), instead of appearing “within” the open section under the file browser UI.

We suspect this is by design (spinner uses a global portal/overlay, and accordion uses as individual cells rather than containers), but wanted to (a) confirm the intended behavior and (b) ask if there’s a recommended way to scope the spinner to a particular container/section.

Environment

• marimo: 0.13.11
• Running via: marimo run app.py and as a packaged web app (same behavior)

---

Minimal reproducible example

import marimo as mo
app = mo.App()

@app.cell
def _():
    btn = mo.ui.run_button(label="Do work")
    return btn

@app.cell
def _(btn, mo):
    if btn.value:
        with mo.status.spinner(title="Working (before accordion)..."):
            import time; time.sleep(1.5)
        mo.status.toast("Done (before)!")
    return

@app.cell
def _(btn, mo):
    section = mo.vstack([mo.md("### Section A"), btn])
    mo.accordion({"## Panel": section})
    return

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

Thanks for building marimo. Any input would be highly appreciated! Thanks in advance!

[mscolnick]

it is not quite that the spinner is in a global overlay, but it does render in the cell that is was called in (instead of where the button is).

you could do something like:

if but.value
    section = mo.vstack([mo.md("### Section A"),"Loading..."])
    mo.ouput.replace(mo.accordion({"## Panel": section}))
    await do_expensive_things()
    mo.ouput.replace(mo.accordion({"## Panel": "Done"}))
else:
    section = mo.vstack([mo.md("### Section A")])
    mo.accordion({"## Panel": section})