dcc.Loading for loading graph(s)

Dash Python
1

I have a dashboard with several dcc.Graph components. Due to the size of the dataframe on which the graphs are built, the graphs can take 10+ seconds to load. This can be confusing for a user that selects a dropdown, but sees no change in the graph initially. Which leads me to my question:

Is there a way to use the dcc.Loading component to present a loading message/icon when graphs are loading?

2

Put the graph in the Loading component’s children list and it will show a loading animation for as long as the callback runs. It automatically detects any callback with one of it’s children as output.

2 Likes
3

Thank you.

For anyone else wondering, it was as simple as @aletar suggested.

 dcc.Loading(id = "loading-icon", 
                children=[html.Div(dcc.Graph(id='graph-1'))], type="default")



@app.callback(Output("loading-icon", "children"))
4 Likes
4

You can also do

@app.callback(Output(“graph-1”, “fig”))
and it will also work.

2 Likes
5

without any input???

Edit: On my side I display a loading message using a css, as described at the bottom of https://dash.plot.ly/loading-states.

Link to the post: dcc.Tabs + dcc.Loading result in ncaught (in promise) TypeError: Cannot read property 'on' of null

6

Small detail: Is there any way to adjust the size of the loading state animation?

7

Hi aletar,

I have a callback with multiple outputs (“fig”,“children”) and I would like to apply the dcc.Loading only to the loading graph. So I am doing what is suggested here. However, my app is running updating the graph without the loading animation.

Now, if I change the callback to have only one output (“fig”), then the app is working properly including the loading animation as expected.

Any ideas why? Thanks in advance