I bumped into some issues when combining the dash core component Loading with a hidden Div to store data in. Namely in the app I’m building, I’m doing an expensive SQL query and store that data in the Hidden Div. Afterwards I update some graphs based on that data. The problem is that when I place the hidden Div within the dcc.Loading component (together with a graph), the loading gif only seems to work on page initialization and not anymore afterwards. I made a small code example that mimics this behavior to clarify what I mean:
import json
import time
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Dropdown(id='dropdown',
options=[{'label': i, 'value': i} for i in [1,2,3,4,5]],
value=1),
dcc.Loading(id='text-content-and-hidden-div',
type='graph',
fullscreen=True,
children=[
html.Div(id='text-div'),
# Hidden div inside the app that stores the intermediate value
html.Div(id='intermediate-value', style={'display': 'none'})
])
])
@app.callback(Output('intermediate-value', 'children'),
[Input('dropdown', 'value')])
def calculate_new_text_and_store_in_hidden_div(value):
# some expensive computing step normally (or in my case an SQL data fetch)
text = str(value*10)
time.sleep(3)
return json.dumps(text)
@app.callback(Output('text-div', 'children'),
[Input('intermediate-value', 'children')])
def update_text_in_div(jsonified_text):
json_string = json.loads(jsonified_text)
return json_string
if __name__ == '__main__':
app.run_server(debug=True)
Am I doing something wrong in my code, is my view on how to use the Loading component wrong, or is this perhaps a bug?
Thanks in advance and merry christmas!