# dcc.Loading for loading graph(s)

**URL:** <https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039>\
**Category:** Dash Python\
**Created:** [May 3, 2019, 2:10pm UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039 "2019-05-03T14:10:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjb](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@tjb](https://community.plotly.com/u/tjb)\
**Post date:** [May 3, 2019, 2:11pm UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/1 "2019-05-03T14:11:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![aletar](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@aletar](https://community.plotly.com/u/aletar)\
**Post date:** [May 5, 2019, 4:42am UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/2 "2019-05-05T04:42:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tjb](https://avatars.discourse-cdn.com/v4/letter/t/a8b319/32.png) [@tjb](https://community.plotly.com/u/tjb)\
**Post date:** [May 7, 2019, 9:38am UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/3 "2019-05-07T09:38:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aletar](https://avatars.discourse-cdn.com/v4/letter/a/34f0e0/32.png) [@aletar](https://community.plotly.com/u/aletar)\
**Post date:** [May 7, 2019, 10:37am UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/4 "2019-05-07T10:37:59Z")

</div>

You can also do

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

---

<div class="post-metadata">

**Author:** ![David22](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@David22](https://community.plotly.com/u/David22)\
**Post date:** [June 19, 2019, 3:06pm UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/5 "2019-06-19T15:06:47Z")

</div>

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](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](https://community.plotly.com/t/dcc-tabs-dcc-loading-result-in-ncaught-in-promise-typeerror-cannot-read-property-on-of-null/24750/3)

---

<div class="post-metadata">

**Author:** ![tbone](https://avatars.discourse-cdn.com/v4/letter/t/3ab097/32.png) [@tbone](https://community.plotly.com/u/tbone)\
**Post date:** [January 29, 2020, 4:29am UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/6 "2020-01-29T04:29:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![konpa](https://avatars.discourse-cdn.com/v4/letter/k/e5b9ba/32.png) [@konpa](https://community.plotly.com/u/konpa)\
**Post date:** [November 6, 2020, 8:32am UTC](https://community.plotly.com/t/dcc-loading-for-loading-graph-s/23039/7 "2020-11-06T08:32:09Z")

</div>

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