feat: Show loading spinners immediately in ui

[mattrunyon]

I can't find any tickets on this even though I thought we had some.

Fixes a few issues

1. Immediately open a panel and show a loading spinner before server rendering is complete The panel will be re-used and have its title updated if necessary when rendering completes. Works with multiple panels (opens 1 panel for loading and then re-uses for the 1st of multiple panels)
2. Shows a loader for all panels on page reload until rendering is complete. Previously, we rendered a blank panel until re-hydration was complete
3. If a widget throws a rendering error, the state is reset to loading when the "Reload" button is pressed. A loader is immediately shown until the reload is over instead of just showing the error message.

This example shows all 3 cases. You can wrap it in a dashboard as well to see dashboards still work.

You can also increase the sleep timer so you can move the initial loading panel to a different location to see it gets re-used.

Clicking on the boom button will go into an error state and then reload will now show a loader. Page load will show a loader in all panels if they are in separate positions.

from deephaven import ui
import deephaven.plot.express as dx
import time

@ui.component
def ui_boom_counter():
    value, set_value = ui.use_state(0)

    if value > 0:
        raise ValueError("BOOM! Value too big.")

    return ui.button("Go BOOM!", on_press=lambda _: set_value(value + 1))

@ui.component
def my_t():
    is_mounted, set_is_mounted = ui.use_state(None)
    if not is_mounted:
        time.sleep(2)
        set_is_mounted(ui_boom_counter) # Use a complex value that won't save between page loads
    return [ui.panel(ui.button("Hello"), title="A"), ui.panel(ui.text("World"), title="B"), ui.panel(ui_boom_counter(), title="Boom")]

t = my_t()

[mofojed]

I added a ui_boom() that booms on initial load as well, and tested with a couple more cases:

from deephaven import ui

@ui.component
def ui_boom():
    raise ValueError("Boom!")

@ui.component
def ui_boom_counter():
    value, set_value = ui.use_state(0)

    if value > 0:
        raise ValueError("BOOM! Value too big.")

    return ui.button("Go BOOM!", on_press=lambda _: set_value(value + 1))

@ui.component
def my_t():
    is_mounted, set_is_mounted = ui.use_state(None)
    if not is_mounted:
        time.sleep(2)
        set_is_mounted(ui_boom_counter) # Use a complex value that won't save between page loads
    return [ui.panel(ui.button("Hello"), title="A"), ui.panel(ui.text("World"), title="B"), ui.panel(ui_boom_counter(), title="Boom")]

@ui.component
def my_t2():
    is_mounted, set_is_mounted = ui.use_state(None)
    if not is_mounted:
        time.sleep(2)
        set_is_mounted(ui_boom_counter) # Use a complex value that won't save between page loads
    return [ui.panel(ui.button("Hello"), title="A"), ui.panel(ui.text("World"), title="B"), ui.panel(ui_boom(), title="Boom")]

a = ui_boom()
b = ui_boom_counter()
t = my_t()
t2 = my_t2()

[mofojed]

Great stuff!