Loading component does not render on first load if using dcc.Location

[mikesmith1611]

The loading component does not show when the page is first loaded if using dcc.Location to change the page layout. The first example below doesn't use dcc.Location while the second does. Maybe something do with the elements not being in the initial layout?

Version installed with dash==0.39.0

# -*- 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([
    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("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)

# -*- 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.Location(id='url'),
    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', 'pathname')])
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)

[valentijnnieman]

Thanks for making this issue! I've created a follow up issue in dash-renderer here: https://github.com/plotly/dash-renderer/issues/137 - it looks like the loading_state prop isn't being set correctly when a layout is coming from a function.

[ethanopp]

Not sure if there is any update on this, but this also seems to be the case for transitions, as there is no movement when the initial chart is loaded (via callback), however afterwards the transition does work:

initial_text = 'Test me!'
layout = html.Div(
        [
            dcc.Markdown(
                dedent(
                    """
                    # Character Counter
                    
                    This demo counts the number of characters in the text box and
                    updates a bar chart with their frequency as you type.
                    """
                )
            ),
            dbc.FormGroup(
                dbc.Textarea(
                    id="text-input",
                    value=initial_text,
                    style={"width": "40em", "height": "5em"},
                )
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Sort by:"),
                    dbc.RadioItems(
                        id="sort-type",
                        options=[
                            {"label": "Frequency", "value": "frequency"},
                            {"label": "Character code", "value": "code"},
                        ],
                        value="frequency",
                    ),
                ]
            ),
            dbc.FormGroup(
                [
                    dbc.Label("Normalize character case?"),
                    dbc.RadioItems(
                        id="normalize",
                        options=[
                            {"label": "No", "value": "no"},
                            {"label": "Yes", "value": "yes"},
                        ],
                        value="no",
                    ),
                ]
            ),
            dcc.Graph(id="graph", className='six columns'),
        ]
    )


@app.callback(
    Output("graph", "figure"),
    [
        Input("text-input", "value"),
        Input("sort-type", "value"),
        Input("normalize", "value"),
    ],
    [],  # States
)
def callback(text, sort_type, normalize):
    if normalize == "yes":
        text = text.lower()

    if sort_type == "frequency":
        sort_func = lambda x: -x[1]
    else:
        sort_func = lambda x: ord(x[0])

    counts = Counter(text)

    if len(counts) == 0:
        x_data = []
        y_data = []
    else:
        x_data, y_data = zip(*sorted(counts.items(), key=sort_func))
    return {
        "data": [{"x": x_data, "y": y_data, "type": "bar", "name": "trace1"}],
        "layout": {
            "transition": {'duration': 2000},
            "title": "Frequency of Characters",
            "height": "600",
            "font": {"size": 16},
        },
    }

[aoelvp94]

Thanks for making this issue! I've created a follow up issue in dash-renderer here: https://github.com/plotly/dash-renderer/issues/137 - it looks like the loading_state prop isn't being set correctly when a layout is coming from a function.

Exactly, I have the same problem with a function that generates a dcc.Graph object. Any news about it?

[petya-vasileva]

I have the same issue. However, the loading is rendered if I use fullscreen=True.