How can I show spinner when code is running?

In Panel is there a way to show a spinner when either 1) Python code is being executed 2) Javascript code like the layout engine at work is being executed?

For example I have a Column that I call app which takes a long time by the bokeh layout engine to figure out how to render because it contains multiple tabs and has sizing_mode=“stretch_width”. I would like to inform the user that the page is just loading and the application has not died.

I’ve tried something along the lines of

page.clear()
page.append(loading)
page.append(app)
page.remove(loading)

where loading is just a Str pane with the text “loading…”. It works from the point of view that the “loading…” is shown, then after some time the app shows, and then the “loading…” is removed.

But it takes just as much time to remove the “loading…” element as it did to append the app element.

I’d merge the operations as much as possible, i.e. instead of clearing, appending, removing etc. I’d do something like:

page[:] = loading
# some computation
page[:] = app

It may be the case that this does not work well until #857 has been released or you downgrade to Tornado 5. Since Tornado 6 it seems events aren’t applied immediately anymore.

Currently we do not have a Spinner element but we have used a spinner gif instead in the past. Alternatively you could also use a Progress Bar in indeterminate mode.

1 Like

Thanks @philippjfr

I will try that out.

Marc

Hi @philippjfr

I have seen the above working if the app takes a lot to layout in the Browser Client. But I cannot get it working while I run Python Code

spinner_not_working

import panel as pn
import time


def test_show_message_while_python_code_is_running():
    """## Message IS NOT shown while code is running"""
    button = pn.widgets.Button(name="Load page", button_type="primary")
    message = "Awesome Panel Loading..."
    page = pn.Column(button)

    def click_handler(event):
        page[:] = [message]
        # Run python Code
        time.sleep(5)
        # Update page
        page[:] = ["Success"]

    button.on_click(click_handler)
    return pn.Column(
        pn.pane.Markdown(test_show_message_while_python_code_is_running.__doc__), page,
    )


test_show_message_while_python_code_is_running().servable("Test Loading...")

System Info

  • Panel: 0.7.0

  • Bokeh: 1.4.0

  • Python: 3.7.4

  • OS: Windows 8.1

  • Browser: Chrome

But I guess I should either downgrade Tornade or wait for https://github.com/holoviz/panel/pull/857?

I’ve downgraded to Tornado 5.1.1 and it works

spinner_works_on_tornado_5_1_1

Is there any downside to downgrading to Tornado 5.1.1?

I’m not aware of any issues but the fix for tornado 6 will be in Panel 0.7.1.

1 Like

Got it working at awesome-panel.org.

At first I started out using CSS based spinner but they stop rotating while the Bokeh layout engine is working. So I switched to Gif based spinners.