Dash long startup time for lots of callbacks

[AIMPED]

HI @Vah ,

concerning the spinner:

Show a full-screen loading spinner on app start-up, then remove it

Hi, I wanted to share an effective solution to showing a spinner (or similar loading animation) while the app is starting up, and then removing it. This is relevant for an app with lots of callbacks causing noticeable start-up time, where no single component or callback is the culprit. TL;DR: Add a new div to the app, alongside the main layout div, which has the loading spinner component as its only child. Use a callback that takes as Input the main layout div’s loading state, and outputs N…

I used the CSS variant from here in the past:

Change "Loading..." to a spinner

I’ve done this in dash-bootstrap-components docs, see relevant CSS here. The basic idea is to hide the existing spinner by targeting the _dash-loading CSS class, then attach your custom spinner with ::after. In the above example the spinner-border argument to animation is a webkit animation defined by Bootstrap so that exact code won’t work out the box if you’re not using Bootstrap, but the same principle can be applied to other CSS spinners. For example I took one of the spinners from here and…