HTML component showing running status

Hi, dash users and developers,

I have a program that takes some time to run upon update with callback. I want to have a html component showing it is “Running” or “Completed”.

I was trying to do as following:

@app.callback(
    dash.dependencies.Output('Output', 'value'),
    [dash.dependencies.Input('Input', 'value')])
def slow_function(input_value):
  (some code running slow)
   return(output_value)

@app.callback(
    dash.dependencies.Output('update-indicator', 'children'),
    [dash.dependencies.Input('Input', 'value')])
def show_running(input_value):
   return("Running")

@app.callback(
    dash.dependencies.Output('update-indicator', 'children'),
    [dash.dependencies.Input('Output', 'value')])
def show_running(output_value):
   return("Completed")

However, it suffers from two problems:

1. Currently one object (“output”) can only have one callback. so it will give an error.
2. Even if point 1 is not a problem, in cases where different inputs result in the same output, I guess it will still showing “Running” even if a different run has happened and completed. Am I correct?

Please help me out either with the two problems or the original goal.

Thanks!!

[ned2]

A progress spinner component for the entire app and/or individual elements would be great. I was just starting to think about the need for precisely this in the app I’m building.

[chriddyp]

Closing in favor of https://github.com/plotly/dash/issues/267, a proposal for adding loading states to the underlying component framework.