How to show a loading state in a Dashtable

Dash Python
1

Hello everyone!

I have an app that loads data from ElasticSearch into a Dashtable. The thing is, the callback that fetches the data takes some time to execute, and I would like to give the user a more obvious sign that their query is being processed and the app isn’t frozen.

This is why, I would like to show some kind of loading state, or being able to reset a the table while the callback function is being executed, until the results are available.

Would you have any insights on what would be the best way to do this?

Thanks!
Daniel.

1 Like
2

There’s the dcc.Loading component just for that :slight_smile:

4

Hello!

Thank you for your reply.

I know there are these components, but how would you use them in this case so the loading state is triggered while the results are being fetched in the callback function?

5

Maybe I’m misunderstanding you but the point of the Loading component is exactly what you are describing…

You wrap your DataTable inside of the Loading component and then the loading animation will appear whenever a callback function (whose output is your DataTable) is running.

Something like this:


layout = html.Div([
    dcc.Loading(
        id='loading',
        children=[
            dash_table.DataTable(
                id='table',
                columns=[...],
                data=[],
            )
        ]
    )
])

@app.callback(
    Output('table',    'data'),
    Input('input1',    'value'),
    Input('input2',    'value'))
def update_table(input1, input2):
    data = elestic_search_query(input1, input2)
    return data
6

Amazing!! This is great, thanks a lot!!

One minor problem is that on the first call, the loading component looks normal, but on successive ones, it just appears empty.

Is this normal?

7

You mean that the table is hidden while the loading animation is on?

8

I’m not sure if the animation is on exactly. So the wrapper works fine in the first callback, but then, on the next ones, it just appears empty. The table it’s wrapping goes away fine, but no loading animation is shown

9

I think I figured it out. As the table is long, it’s probably appearing somewhere where the table was. If using fullscreen boolean, this behaviour is solved.