Hello Dash community 
Update! This is now released in 0.39.0: đź“Ł Dash 0.39.0 released
We’ve released a new version of the previously announced Loading component (in this thread here and we would love your feedback! In this new version, you have two ways of displaying a spinner when a component is busy loading. The first option is the Loading component in dash_core_components, which acts as a wrapper that looks at its children components to see if any are loading. Here’s a small example:
# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
import time
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__)
app.scripts.config.serve_locally = True
app.layout = html.Div(
children=[
dcc.Loading(id="loading-1", children=[html.Div(id="output-1")], type="default"),
dcc.Input(id="input-1", value='Input triggers local spinner'),
html.Div(
[
dcc.Loading(
id="loading-2",
children=[html.Div([html.Div(id="output-2")])],
type="circle",
),
dcc.Input(id="input-2", value='Input triggers nested spinner'),
]
),
],
)
@app.callback(Output("output-1", "children"), [Input("input-1", "value")])
def input_triggers_spinner(value):
time.sleep(1)
return value
@app.callback(Output("output-2", "children"), [Input("input-2", "value")])
def input_triggers_nested(value):
time.sleep(1)
return value
if __name__ == "__main__":
app.run_server(debug=False)
The other way is to target a new HTML data attribute that we now set on all of our components (including dash_html_components). You won’t need to use the Loading component this way, but you would need to supply your own CSS. Your layout could look like this:
# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objs as go
import time
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__)
app.scripts.config.serve_locally = True
app.layout = html.Div(
children=[
html.Div(id="output-1"),
dcc.Input(id="input-1", value="Input triggers local spinner"),
html.Div(
[
html.Div(id="output-2"),
dcc.Input(id="input-2", value="Input triggers nested spinner"),
]
),
]
)
@app.callback(Output("output-1", "children"), [Input("input-1", "value")])
def input_triggers_spinner(value):
time.sleep(1)
return value
@app.callback(Output("output-2", "children"), [Input("input-2", "value")])
def input_triggers_nested(value):
time.sleep(1)
return value
if __name__ == "__main__":
app.run_server(debug=False)
And you can target the new data-dash-is-loading["true"] data attribute in a custom CSS file (here are the docs on how to do that ) like so:
*[data-dash-is-loading="true"]{
visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
content: "Loading...";
display: inline-block;
color: magenta;
visibility: visible;
}
You can start using this with Dash 0.39.0:
pip install dash==0.39.0
As always, your feedback is greatly appreciated!