Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

Flicker with dcc.Loading (when wrapping many components)

I have a number of components that I have wrapped in a dcc.Loading component. The intended behavior is that user will select from a dropdown, and that will cascade updates across all the components, displaying the loading icon fullscreen until the updates are complete.

Loosely, this works. However, while doing this, I tend to get some brief (and quite distracting) flickering, perhaps after one component is finished loading but before the others have begun to load. Is there a standard approach to prevent this issue from happening?

I had the same issue.

Dash bootstrap components has a Spinner component with a debounce attribute. Setting it to 10 (milliseconds) solved the problem for me. I do not think the Loading component on code dash has a debounce attribute unfortunately.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/spinner/