title: Display loading symbol while waiting for a result with plot.ly Dash
body: <p>In my <a href="https://plot.ly/products/dash/" rel="noreferrer">Dash</a>-based application, a button triggers a long-running computation. Wouldn't it be nice to display a loading animation while the result is not yet there, and make the button inactive so it is not clicked again before the computation finishes? </p>
  
  <p>I am using <a href="https://bulma.io/documentation/elements/button/" rel="noreferrer">Bulma</a> for UI design and wanted to use the <code>button is-loading</code> CSS class for that purpose. </p>
  
  <p><a href="https://i.stack.imgur.com/6Q4nl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/6Q4nl.png" alt="enter image description here"></a></p>
  
  <p>My first idea was to have two callbacks: One triggered by the button click to set the button to <code>is-loading</code>, and one triggered by a change in the output to set it back to normal. </p>
  
  <pre><code>@app.callback(
      Output('enter-button', 'className'),
      [
          Input('graph', 'figure')
      ],
  )
  def set_trend_enter_button_loading(figure_changed):
      return "button is-large is-primary is-outlined"
  
  
  @app.callback(
      Output('enter-button', 'className'),
      [
          Input('enter-button', 'n_clicks')
      ],
  )
  def set_trend_enter_button_loading(n_clicks):
      return "button is-large is-primary is-outlined is-loading"
  </code></pre>
  
  <p>Apparently it doesn't work that way:</p>
  
  <pre><code>dash.exceptions.CantHaveMultipleOutputs:
  You have already assigned a callback to the output
  with ID "enter-button" and property "className". An output can only have
  a single callback function. Try combining your inputs and
  callback functions together into one function.
  </code></pre>
  
  <p>Any ideas how to make this work?</p>