Handling shadowed divs when the query+graph creation takes time

I have a Dash App that I just converted to using dbc.Row/Col with shadowed divs around my graphs. The problem is when my query+graph creation isn’t instantaneous, I have the empty divs visible waiting for them all to complete in the callback

Does anyone have any tricks or suggestions to improve this?

Hello @marketemp,

Have you tried putting it in a dcc.Loading?

If that doesn’t work, you can start with the content being visibility:hidden, then when your callback is done, you have an additional output that passes visibility:show. If you want to get even more fancy you could add a css transition to the element as well. That way it will fade in.


An example with html.Buttons:

1 Like

Thanks @jinnyzor and @AIMPED. I did get this working great using visibility:hidden for my queries that return in around a second and dcc.loading for the one that takes 3-5. Thanks for your help!