Providing the user with status updates through execution of a background task

I have a Python package I developed that makes it easier for analysts to move data around. I’m hoping for some guidance on how to handle informing the user of status while the task is being executed.

Here is how I have it on initial load:

When the user clicks submit it extracts the content of the worksheet and creates a local Sqlite table. It takes ~10 seconds and then updates a status field with “Operation complete…”:

My design problem is just that there is no way to let the user know that processing has started.

Here’s my layout:

  html.Td(html.H6('Sheet to Table')),
  html.Td(dcc.Dropdown(id='pts-sheet',
                       placeholder='Select a sheet name...',
                       options = sheet_list, 
                       disabled = sheet_status),
          style={'width':'300'}),
  html.Td(dcc.Input(id='pts-table', 
                    placeholder='Enter a table name...',
                    type='text',
                    value='')),
  html.Td(html.Button('Execute', id='pts-submit')),
  html.Td(html.Div(id='pts-status'))])

And the callback function I created:

@app.callback(dash.dependencies.Output('pts-status', 'children'),
              [dash.dependencies.Input('pts-table','value'),
               dash.dependencies.Input('pts-sheet','value'),
               dash.dependencies.Input('pts-submit','n_clicks')])
def execute_pts(table, sheet, button_clicks):
  if button_clicks > click_tracker['pts-submit']:
    click_tracker['pts-submit'] = button_clicks
    x.pts(str(sheet), str(table))
    return 'Operation complete...'

So my general question is whether there’s a design approach where I can update the status field multiple times? Say “Processing…” when the user initially clicks EXECUTE which updates to “Operation complete…” once the task is done.

1 Like

This exact UI isn’t possible right now (see Feature request - asynchronous notifications for a discussion on this). The current workaround is to customize the “loading div” with CSS. The “loading div” is a div that automatically appears on the screen whenever a request is processing. See 📣 Dash Loading States for details.