Handling shadowed divs when the query+graph creation takes time

[marketemp]

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?

[jinnyzor]

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.

[AIMPED]

@jinnyzor

visibility:hidden

An example with html.Buttons:

Edit and save button regarding textarea

Hi @gks123 , I think this should work: import dash from dash import html, Input, Output, State, dcc, callback_context app = dash.Dash(__name__) app.layout = html.Div( [ dcc.Textarea( id='textarea_comments_growth', value='', placeholder='Write comments here', persistence=True, persistence_type='local', readOnly=True, style={'width': '100%', 'height': 200, 'display': 'block'}), html.Button('Save', id='sa…

[marketemp]

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!