Black Lives Matter. Please consider donating to Black Girls Code today.

Loading status without dcc.loading

For some reasons I’m using an old version of Dash which doesn’t have dcc.loading yet. I’m trying to mimic it with callbacks. I tried something like this with no luck. The running div’s callback only gets triggered when everything is done. Is there any smart solution?

import dash
import dash_core_components as dcc
import dash_html_components as html
import time

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
html.Div(id=‘running’),
html.Button(‘Submit’, id=‘button’),
html.Div(id=‘output’),
])

@app.callback(
dash.dependencies.Output(‘output’, ‘children’),
[dash.dependencies.Input(‘button’, ‘n_clicks’)])
def update_output(n_clicks):
if not n_clicks:
return None
time.sleep(3)
return ‘Done’

@app.callback(
dash.dependencies.Output(‘running’, ‘children’),
[dash.dependencies.Input(‘button’, ‘n_clicks’),
dash.dependencies.Input(‘output’, ‘children’)])
def update_output(n_clicks, output):
return ‘Running’ if n_clicks and not output else ‘’

if name == ‘main’:
app.run_server(debug=True)

I found a solution based on the _dash-loading-callback.