Hello!
I have chained callbacks in my dash application. The result of the last callback in the chain is a plotly plot. When i am trying to set loading state like dcc.Loading([dcc.Graph(id="my_plot")]) it does not triggers at once when the first callback in the chain is triggered - dcc.Loading appears only after some time passed.
How can i make loading state work properly? When i have chained callbacks i want dcc.Loading to appear immediately when the first callback in the chain is triggered.
The loading animation is triggered when the content it is wrapped around changes. If the final output you want to “load” is only in the last callback that actually triggers output, then the loader won’t activate until that callback is triggered. Since you can’t have duplicate outputs in separate callbacks, you can’t change the property of the loading animation directly using the first and last callbacks in your chain.
Unless you are dead-set on having a specific loading animation from dash-core-components, then I would recommend using dbc.Spinner() from Dash Bootstrap Components. Simply calling dbc.Spinner() displays the loading animation. This is good news, because it means we can create a separate div with the spinner element inside and show/hide it at will using a separate callback that outputs the parent div style. So, we can put the spinner in one div, and the content you want to load in another div, and then use a single callback to hide/show the spinner/content based on some other trigger. This trigger could be a dcc.Store() element whose contents is controlled by the first and last callbacks in your chain (first callback writes a value, and last callback clears the data).
I know it’s a bit messy, but this is all I can think of at the moment. I hope it helps.
2 Likes