Dcc.Loading doesn't work as expected with hidden div data storage

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!

2 Likes

I have the same issue (except the hidden div storing the data is not bundled together with the graph inside a Loading, as there are multiple graphs dependent on the same data).

Bumping this, since it’s been close to a year - maybe some updates had been done meanwhile?

Thanks a lot in advance!