Loading state not working correctly when layout is in a function #736
Description
When investigating plotly/dash-core-components#488 I noticed it does not only apply to using Location components, but rather happens when the Loading components are in a layout that comes from a function. Here's the same example code as from the issue above, but with an Input component instead of a Location component:
# -*- 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
import numpy as np
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__)
app.scripts.config.serve_locally = True
app.config['suppress_callback_exceptions']=True
app.layout = html.Div([
dcc.Input(id='url'),
dcc.Loading([html.Div(id='page-body')])
])
def make_layout(pathname):
return html.Div([
html.Div([
dcc.Loading(
id="loading-1",
children=[html.Div(id='figure-container')],
type="circle"),
html.Button(id="input-1", children='Input triggers nested spinner')
], style={'width': 400}),
html.Div([
dcc.Loading(
id="loading-2",
children=[html.Div([dcc.Graph(id='figure-2')])],
type="circle"),
html.Button(id="input-2", children='Input triggers nested spinner')
], style={'width': 400})
])
@app.callback(Output('page-body', 'children'),
[Input('url', 'value')])
def page(pathname):
return make_layout(pathname)
@app.callback(Output("figure-container", "children"), [Input("input-1", "n_clicks")])
def input_triggers_nested(n_clicks):
time.sleep(2)
fig = go.Scatter(
x=np.random.random(size=10),
y=np.random.random(size=10)
)
return dcc.Graph(figure=dict(data=[fig]), id='figure-1')
@app.callback(Output("figure-2", "figure"), [Input("input-2", "n_clicks")])
def input_triggers_nested(n_clicks):
time.sleep(2)
fig = go.Scatter(
x=np.random.random(size=10),
y=np.random.random(size=10)
)
return dict(data=[fig])
if __name__ == "__main__":
app.run_server(debug=True, port=8053)
Because the Loading components are being appended to page-body via the make_layout function, the spinners aren't showing upon initial loading. I suspect this is because we're not setting the loading_state property correctly on nested components, or, the requestQueue does not handle nested component updates properly.