Black Lives Matter. Please consider donating to Black Girls Code today.

dcc.Loading for loading graph(s)

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?

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

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"))
3 Likes

You can also do

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

2 Likes

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

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