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.


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

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?