Dash long startup time for lots of callbacks

[Vah]

I am developing a multipage Dash app, and as the app’s functionality grows and more callbacks are used, its performance slows down, especially during start-up. It can take up to 10 seconds until the app’s layout is loaded and the app is ready to use. During this time, the “Loading…” message is displayed in the top left corner of the screen.

Is there a workaround to display a spinner during app start-up or perform lazy loading of callbacks (or Python modules) in Dash?

[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…

[Vah]

@AIMPED

I used the CSS variant from here in the past:

Thank you for your response. The first solution did not work for me, but I implemented the second solution and it worked. Thank you.