Detect changes in value for dcc.dropdown

Dash Python
1

Hello there.
I have a dcc.Dropdown in my app. Based on the value in the dropdown, the table gets populated with relevant information. So, as soon as the value in dropdown changes, I want to return an empty table, and after which the table with relevant information should be returned. This is to avoid previous data to be displayed until the new data for the table is ready. Can anybody guide on how this can be done?

Thank you

2

:thinking: what? :woozy_face: could you explain a little bit?

3

Hi @Eduardo
Whenever a value is selected from the dropdown, it takes some time to process the data required for the table to get updated. Till then, old values are retained in the table, based on the previous value selected in the dropdown. To avoid confusion, as soon as the value is changed in a dropdown, I want to display an empty table and as soon as the data is ready, the table should be updated with the new data.

4

I guess you can use the dcc.Loading component here. It will show a loading animation until your table is updated.

5

Hey. Yes I tried that. It would be great if I could display an empty table instead of the loading animation for my requirement.

6

@samyu

As @atharvakatre says, dcc.Loading is the best solution.

To do what you want use two different dropdown:

  • the first one with an input of the dropdown value and an output with an empty graph.
  • the second one with an input of the graph figure and an State with the dropdown value, and an output with the final graph figure.

To avoid having the same output with two different callback, you can use in the first graph an html.Div as output children and send a dcc.graph there, and in the second one just send the new figure to the graph.