When does data-dash-is-loading trigger a callback function?

user_7919597 0
Viewed 2387

I am trying to show a spinner when a Dash figure is updated using the CSS attribute data-dash-is-loading.

I found a working solution but would like to know why my previous approach does not work to get more insight.

The structure of the document is 

html.Div(id="some-container",
         children=[dcc.Graph(id="some-graph",
                             figure=fig)])

These are the two callback functions I tried, one at a time. The working callback function updates the children of the whole container:

@app.callback(
Output("some-container", "children"),
[Input("some-dropdown", "value")])

The callback function that does not work is 

@app.callback(
Output("some-graph", "figure"),
[Input("some-dropdown", "value")])

Well, it works fine, it updates the figure as is should, but it does not trigger the data-dash-is-loading.

The CSS code is taken from here:

*[data-dash-is-loading="true"]{
    visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
    content: "Loading...";
    display: inline-block;
    color: magenta;
    visibility: visible;
}

Can someone tell me what the reason is?

plotly.js plotly-python plotly-dash plotly
1 Answers

It's possible that you're overwriting the children of your div some-container. When the second callback is fired, it's possible that the graph "some-graph" doesn't exist any longer.

A workaround for this would be to create 2 separate divs for your graph and updated items.

user_105219590
Related