点击按钮后Spinner仍不显示，用Tailwind CSS+NiceGUI如何修复？

问题根源 #

你的代码里time.sleep(5)会直接阻塞Python主线程，而NiceGUI的UI更新依赖主线程处理事件循环。这就导致：修改Spinner类名的操作在sleep期间根本无法同步到前端，等sleep结束后代码立刻把Spinner改回不可见状态，所以你完全看不到它显示的过程。

解决方案1：使用异步函数（推荐） #

将submit改为异步函数，用await asyncio.sleep(5)替代time.sleep(5)，这样不会阻塞事件循环，UI更新能及时生效：

from nicegui import ui
import asyncio


@ui.page('/')
def homepage():
    async def submit():
        # 合并类名修改，无需分开调用两次classes方法
        spin.classes(remove="invisible", add="visible")
        await asyncio.sleep(5)
        spin.classes(remove="visible", add="invisible")

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


ui.run()

解决方案2：使用UI定时器 #

如果不想用异步，也可以通过ui.timer延迟执行隐藏操作，避免阻塞主线程：

from nicegui import ui


@ui.page('/')
def homepage():
    def submit():
        spin.classes(remove="invisible")
        # 5秒后执行一次隐藏操作
        ui.timer(5.0, lambda: spin.classes(add="invisible"), once=True)

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


ui.run()

额外优化提示 #

Tailwind的visible是元素默认状态，你可以直接只操作invisible类，让代码更简洁：

• 显示Spinner：移除invisible类
• 隐藏Spinner：添加invisible类

内容的提问来源于stack exchange，提问作者Kshitiz_sc