In my current webapp, I call a function that displays multiple graphs, and I do so by using a callback. Creating My webapp is mostly charcoal colored, and in that function, I make the graphs charcoal to my desire.
However, this function takes a little bit to run, and before it is completed, the empty graph templates have a white background, making the page look funky.
I tried doing dcc.Graph(id='graph-1', style={'backgroundColor': colors['background']})to fix this, where colors['background'] is just a dictionary access. But the white backgrounds still appear. Here is an image for context. One before the function finishes, and one after.
You could try wrapping the graph in a dcc.Loading component. That way, it should display a little loading indicator instead of the graph. Let me know if that works!
That worked! And it looks pretty cool… thank you! Do you know how I might be able to change the size of the loading animations? I’m sure its some string in the style dictionary, I just don’t know which one.
This is a good option. However, is it possible to change that white background while the graph rendering?
I don’t want to use the spinner on all graphics.
