✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

How to detect a process is complete?

Hi,

I have 2 callbacks for a button click. Callback 1 receives inputs from UI and fires some internal processes. Once the processes are done, callback 1 also returns final output as a datatable which has to be displayed in UI. Callback 2 helps me in hiding default screen when button is clicked - it hides default and shows a loading screen (i,e. spinners).

Once internal processes are done callback 1 returns my output. At this stage I have loading screen and output screen but ideally I want only the output screen. How do I solve this? Any inputs would be very much appreciated!

Example:

@app.callback(
[Output(‘output_screen’, ‘children’),
Output(‘output_screen’, ‘style’)],
[Input(‘button’, ‘n_clicks’),
Input(‘input’, ‘children’),]
def callback_1(button, n2):
if button:
# do process
df = process(n2)
return html.Div([datatable(df)])

@app.callback(
[Output(‘default_page’, ‘style’),
Output(‘loading_page’, ‘style’)],
[Input(‘button’, ‘n_clicks’)])
def callback_2(button):
if button:
return {‘display’: ‘none’}, {‘display’: ‘block’}
return {‘display’: ‘block’}, {‘display’: ‘none’}

Once call back 1 is done, I’ll have loading and output screen - HOW DO I TURN OFF MY LOADING SCREEN which was set by my callback 2?