Loading when app first starts up

Dash Python
1

I’d like the dcc.Loading spinner element to be seen when the web app is first visited. More specifically, the spinner is currently only triggered when UI elements are changed by the user. When the page first loads, the UI elements appear quickly, but the figure resulting from UI initial values takes ~5 seconds to appear. I’d like the spinner to show up after the UI elements appear, or sooner if possible.

Note, the spinner currently does exactly what I want for UI changes, I just want to extend it to the UI instantiation.

I’ve tried defining the dcc.Loading element with the argument loading_state={'is_loading':True}, but this doesn’t achieve anything.

The only method I can think of is to daisy chain some callbacks, where the UI first triggers the the spinner to become visible, then triggering the figure update via a hidden div, then hide the spinner. Could this work? Is there an easier method?

Similar questions have been asked but not answered, so I suspect what I’m trying to achieve isn’t possible…

Thanks for your help!

2

I’ve stumbled on a solution to this issue. The fundamental problem is that there is no way to manually trigger the loading state of dcc.Loading. However, this problem does not apply for the Dash bootstrap component dbc.Spinner. By adding the following line to my app’s layout, a spinner will appear while the figure initially loads.

dbc.Row(dbc.Spinner(type="grow", color="primary", fullscreen=True), id="initial-spinner")

This spinner is then hidden by including in the expensive figure’s update callback the argument [Output("fig-id", "figure"), Output("initial-spinner", "style")] and end the callback with return fig, {"display": "none"}.

1 Like