Some spinner animations are frozen while iframe loads

[samuller]

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 html, ui

@ui.page("/")
def render_page():
    ui.spinner("default", size="lg")
    # Bug: animation for non-default spinner is freezed while iframe loads? And recovers once iframe loading is stopped
    ui.spinner("dots", size="lg")

    # Choose IP address that's unlikely to exist but not invalid (so that iframe keeps loading till timeout)
    iframe = html.iframe(src="http://240.0.0.0").classes("border")

    # Check all spinners (only "default" works)
    with ui.row():
        for spinner in [
            "default",
            "audio",
            "ball",
            "bars",
            "box",
            "clock",
            "comment",
            "cube",
            "dots",
            "facebook",
            "gears",
            "grid",
            "hearts",
            "hourglass",
            "infinity",
            "ios",
            "orbit",
            "oval",
            "pie",
            "puff",
            "radio",
            "rings",
            "tail",
        ]:
            ui.spinner(spinner, size="lg")

# Dark mode for clearer iframe border
ui.run(dark=True)

Description

I found an issue where spinner animations are frozen while an iframe is loading... but this doesn't apply when the spinner uses the "default" animation style? The animation recovers the moment the iframe has either completed loading or failed to load (which you can also trigger by cancelling the page load - either with ESC or pressing "refresh" button while page is still loading).

NiceGUI Version

2.24.1

Python Version

3.12.3

Browser

Firefox

Operating System

Linux

Additional Context

No response

[samuller]

Interesting, looks like the "default" spinner is using CSS animation while all the other icons are using SVG animations (e.g. <animate>).

[evnchn]

Neither is particularly performant. Check out what I did in #4822

TL-DR: We don't even use ui.spinner for the docs