title: When does data-dash-is-loading trigger a callback function?
body: <p>I am trying to show a spinner when a Dash figure is updated using the CSS attribute <code>data-dash-is-loading</code>.</p>
  
  <p>I found a working solution but would like to know why my previous approach does not work to get more insight.</p>
  
  <p>The structure of the document is </p>
  
  <pre><code>html.Div(id="some-container",
           children=[dcc.Graph(id="some-graph",
                               figure=fig)])
  </code></pre>
  
  <p>These are the two callback functions I tried, one at a time.
  The working callback function updates the children of the whole container:</p>
  
  <pre><code>@app.callback(
  Output("some-container", "children"),
  [Input("some-dropdown", "value")])
  </code></pre>
  
  <p>The callback function that does not work is </p>
  
  <pre><code>@app.callback(
  Output("some-graph", "figure"),
  [Input("some-dropdown", "value")])
  </code></pre>
  
  <p>Well, it works fine, it updates the figure as is should, but it does not trigger the <code>data-dash-is-loading</code>.</p>
  
  <p>The CSS code is taken from <a href="https://dash.plot.ly/loading-states" rel="nofollow noreferrer">here</a>:</p>
  
  <pre><code>*[data-dash-is-loading="true"]{
      visibility: hidden;
  }
  *[data-dash-is-loading="true"]::before{
      content: "Loading...";
      display: inline-block;
      color: magenta;
      visibility: visible;
  }
  </code></pre>
  
  <p>Can someone tell me what the reason is?</p>