Im trying to build a dash app that, ideally, will be used by many clients, with a large database and many possibilities of aggregations. To to that, i created a backend that process the many aggregations to remove some load from the dash server. Still, the load is getting a little too big for the server, so now im switching some callbacks to client side.
When i changed a callback from a regular callback into a clientside, the loading icon stopped working, everything else is working just fine. Am i missing something or the loading component doesn’t work with clientside callbacks?
This is (part of) the code:
layout:
html.Div(
className="eight columns div-user-controls",
children=[
dcc.Loading(
id="loading-1",
type="default",
children=html.Div(
id='loading-placeholder',
style={},
className="plot-area",
children=[
html.Div(
children=[
html.Div(id='plot_cache', children=''),
html.Div(id='load', children='')
],
style ={'display':'none'}
),
html.Div(
children=[
dcc.RadioItems(
id='input_plot_type',
options=[
{'label':'Grouped Bars', 'value':'group'},
{'label':'Stacked Bars', 'value':'stack'},
{'label':'Lines', 'value':'lines'}
],
value='group',
className='plot-type-switch',
style={},
)
],
className='plot-object'
),
html.Div(
children=[
dcc.Graph(
id='main_plot',
figure=px.bar(pd.DataFrame(columns=['x','y']),x='x',y='y')
)],
className='plot-object'
)
]
)
)
]
)
callback.py:
dashapp.clientside_callback(
ClientsideFunction(
namespace='callback_data',
function_name='get_data'
),
[
Output('plot_cache', 'children'),
Output('loading-placeholder', 'style'),
],
[
Input('', ''),
... # there are a lot of inputs
]
)
and of course there is a .js file, but its just a script that takes ~2s to run and returns some cache and {} as the style.
Thanks!
)
