Hi all,
I have pasted a part of my callback below. My goal is to have my loading component show on my component when view-date or index-date are changed by the user. I have used set_props before in my codebase without issue however trying to use it to change the display to block which would make my loading bar visible does not seem to work. In browser I can manually change the style to block to know that it displays correctly but the set_props is not updating the state of the display.
I have experimented with the loading components and problems I faced was it would hide my components within the loading component. My solution is to have a loading bar display within my content component.
I cant really use the running parameter of the callback unless I can have a conditional running output. Would be super helpful if this is a possibility.
running = [
(if trigger_id in ['view-date-picker', 'index-date-picker']:
(Output('loading-indicator', 'style') {'display': 'block'}, {'display': 'none'})
]
Callback section:
triggered_id in ['view-date-picker', 'index-date-picker']:
if stored_data is None or stored_input_data is None:
return PreventUpdate # No data available, return empty
set_props('loading-indicator', {'style': 'display': 'block'}})
dimension_layouts = []
for dim_name in stored_data.keys():
df = pd.read_json(stored_data[dim_name], orient='split')
input_data = json.loads(stored_input_data[dim_name])
# Ensure 'datepartition' is a datetime object
df['datepartition'] = pd.to_datetime(df['datepartition'])
# Convert view_date and index_date from string to datetime if necessary
if view_date is not None:
view_date = pd.to_datetime(view_date)
df = df[df['datepartition'] <= view_date]
# Assume `create_dimension_layout` generates the desired layout
dimension_layout = create_dimension_layout(df, input_data['dimension_name'], input_data, index_date)
dimension_layouts.append(dimension_layout)
set_props('loading-indicator', {'style': 'display': 'none'}})
return [
no_update,
dimension_layouts, # Updated layout for 'dimension-container'
no_update, # For 'stored-data' if it's also listed as an output elsewhere
no_update, # For 'stored-input-data' if needed
no_update, # For 'input-form'
no_update, # For 'view-date-picker' min date
no_update, # For 'view-date-picker' max date
no_update, # For 'index-date-picker' min date
no_update, # For 'index-date-picker' max date
no_update,
no_update,
no_update
]
Component:
html.Div([
html.H3(formatted_dimension_name, className='content-header'),
html.Div(
id='loading-indicator',
children=[
html.Div([
html.Div(className='inner')
], className='line')#,
#html.Div([], className='log-container')
],
className = 'loading-indicator',
style = {'display': 'none'}
),
tabs
], className='main-content-container', id=f'{dimension_name}-section')
