ui.spinner on button click not showing

[frankhuurman]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui, app
import subprocess

class Version:

    def __init__(self):
        pass
    
    def get_current_tag(self):
        # Get current tag (if any)
        result = subprocess.run(["git", "describe", "--tags", "--abbrev=0"],stdout=subprocess.PIPE, stderr=subprocess.PIPE)
        if result.returncode == 0:
            return result.stdout.decode("utf-8").strip()
        else:
            return None

    def get_updates(self):
        spinner = ui.spinner()
        current_tag = self.get_current_tag()
        if not current_tag:
            print("No tag currently checked out.")
            spinner.delete()
            return
        spinner.delete()

@ui.page("/")
def settings():
    version = Version()
    ui.button("check updates", on_click=version.get_updates)

if __name__ in {"__main__", "__mp_main__"}:
    ui.run(
        storage_secret="niceGOOEY",
        native=True,
        title="MaïsGUI"
    )

Description

Long running functions inside this get_updates function prevent my spinner from showing, even when these functions are async/awaited.

I've first tested a basic example as pointed out in this discussion:
#2670

Changing my get_updates function to exactly the example that Falko shared with asyncio.sleep makes the spinner work on button click.

But when I use one of my longer running functions inside of my get_updates function it never shows the spinner like when fetching all git tags from remote (which usually takes about 2-3 seconds to complete):

def get_all_tags(self):
    subprocess.run(['git', 'fetch', '--tags'], check=True)

and making this one async and awaiting the result also doesn't make the spinner work.

I also tried things like using the with keyword, hoping that might trigger it somehow but nope:

spinner = ui.spinner()
with spinner:
    current_tag = await self.get_current_tag()

My assumption was that the spinner gets created the moment the button is clicked and gets deleted later on in the function but correct me if I'm just doing something wrong with the async/await stuff for this to work.

I also wish we can get some often used/real world use case ui.spinner() examples in the documentation like the button click one, right now we only have this:

from nicegui import ui

with ui.row():
    ui.spinner(size='lg')
    ui.spinner('audio', size='lg', color='green')
    ui.spinner('dots', size='lg', color='red')

ui.run()

Which is nice to show the different spinners spinning around but I think that people mostly look for these type of spinner elements when they want to show something loading in the background.

NiceGUI Version

3.5.0

Python Version

3.14.2

Browser

Chrome, Firefox, Other

Operating System

Linux

Additional Context

No response

[frankhuurman]

Perhaps I need to use more of the asyncio internals to get this working like:
ui.button("check updates", on_click=lambda: asyncio.create_task(version.get_updates()))

in combination with something like this? current_tag = await asyncio.to_thread(self.get_current_tag)

[evnchn]

Hello @frankhuurman

Your NiceGUI server is not working right due to the blocking long function call performed in sync.

Please use https://nicegui.io/documentation/section_action_events#running_cpu-bound_tasks to run the CPU-bound task.

[frankhuurman]

Thanks, that did the trick.
I knew I used this run.cpu_bound before in another project but couldn't find it anymore.
Would be nice if an example like this could be added to the ui.spinner documentation page :)