5

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?

Joe
  • 6,758
  • 2
  • 26
  • 47

1 Answers1

0

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.

Yaakov Bressler
  • 9,056
  • 2
  • 45
  • 69
  • I only use one callback function at a time, I exchanged them. The graph still exists, since I can see it, right? Updating the figure works fine, it just does not trigger data-dash-is-loading. – Joe Mar 23 '20 at 21:27
  • Do yo have an idea? – Joe Mar 27 '20 at 15:02