Expected behavior of loading_state prop for dash-html-components

Dash Python
1

I’m having trouble using the loading_state property of html.Div.
From Github documentation at https://github.com/plotly/dash-html-components/blob/master/dash_html_components/Div.py:

- loading_state (optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'.
Those keys have the following types:
  - is_loading (boolean; optional): Determines if the component is loading or not
  - prop_name (string; optional): Holds which property is loading
  - component_name (string; optional): Holds the name of the component that is loading"""

I expect loading-div to have prop loading-state built in; indeed, there is no error when using it in a function callback. However, I get the error

TypeError: 'NoneType' object is not subscriptable

when I try to access the keys within the dictionary.

Code example

Environment:

$ pip freeze | grep dash
dash==0.40.0
dash-bootstrap-components==0.4.0
dash-core-components==0.45.0
dash-html-components==0.15.0
dash-renderer==0.21.0

Code:

import dash
from dash.exceptions import PreventUpdate
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import time

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button("Create Output", id='create-output-button',n_clicks=0),
    html.Div(id='trigger',children=0),
    html.Div(id='loading-div',children='the function is loading')
])

@app.callback(
    Output('loading-div','style'),
    [Input('trigger','loading_state')])
def show_loading(loading_state):
    '''shows or hides the output div'''
    if loading_state==None:
        raise PreventUpdate
    if loading_state['is_loading']:
        return dict()
    return dict(display='none')

@app.callback(
    Output('trigger','children'),
    [Input('create-output-button','n_clicks')])
def trigger_function(n_clicks):
    '''waits for a second to indicate something happening'''
    if n_clicks==0:
        raise PreventUpdate
    print('finished_optimization_trigger')
    time.sleep(1)
    return 1

if __name__=='__main__':
    app.run_server(port=8001,host='0.0.0.0',debug=True)

Do I need to instantiate it somehow? Does it only happen inside a dcc.Loading component? I’d love some help on this.

3 Likes
2

Up, same problem here.

4

I am facing the same problem -
The callback show_loading for loading_state property is not doing triggered not matter what i do.
Has anyone been able to trigger a load_state input callback? If yes how so?

Thanks,
Prashant