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.