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.


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

You can also do

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


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?

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