I'm trying to make a spinner visible on clicking a button but it stays invisible. Any way to fix this?

Question

I've initially added invisible class to the spinner. On clicking the button I'm removing the invisible class and adding the visible class to it. But it stays invisible. I'm using the Tailwind CSS and NiceGUI to create the front end.

from nicegui import ui
import time


@ui.page('/')
def homepage():
    def submit():
        spin.classes(remove="invisible")
        spin.classes(add="visible")
        time.sleep(5)
        spin.classes(remove="visible")
        spin.classes(add="invisible")

    spin = ui.spinner(size='lg').classes("invisible")
    ui.button('Submit',color="green", on_click=lambda:submit())


ui.run()

Answer 1

Because you synchronously show the spinner, run the computation (or sleep for a while) and hide the spinner again, the UI has no chance to update the frontend.

See https://github.com/zauberzeug/nicegui/discussions/695#discussioncomment-5500914 for a very similar discussion:

If you want to sleep for a certain duration, you should use asyncio.sleep so that the UI stays responsive meanwhile.

If you have a function that does heavy computation, you should run it in an executor.

By the way, there's a set_visibility() method for conveniently showing and hiding elements.