dcc.Loading Component Causes Forced reflow therefore very slow

So I have a fairly complex dashboard hiding behind a Loading component, and every time a callback is fired, it became really sluggish and Chrome profiler showing a 5 secs ‘Recalculate Style’, and this points to a culprit Forced reflow (Avoid Large, Complex Layouts and Layout Thrashing  |  Web Fundamentals) .

I’m not a front end developer but then I suspect the loading anim could cause this, because it seems reconstruct the whole DOM, so I removed the loading, and then it became much faster from 5 sec to around 1 sec, but of course there were no nice loading animation.

So I was wondering if anyone has similar experience?

  1. Is it true that dcc.Loading Component is to blame? (it certainly points this way)
  2. If so, any recommendation? I really like the loading effects it would be a shame having to drop it because of performance.

For your reference, the code is pretty standard, it’s like this:

app.layout = html.Div([
    dcc.Location(id="url", refresh=False),
    # dcc.Loading(children=html.Div(id="page-content"), type="graph", fullscreen=True),

It’s a multi page app, and I have a callback on URL that updates the page-content element. Inside the callback is the actual dashboard with its own callbacks.


Just to verify, could you report which version your on?


. and if you are on an older version, could you try upgrading and see if the issue remains?

pip install dash —upgrade

Thanks for the reply, I’m on Dash 1.12.0; dash-core-components is 1.10.0 . I could try updating the library, but even with my current versions, is it likely to cause this problem? I have some production system on the version so prefer to stay with the these ones…

We did change the internals behind how the loading behaviour works in 1.13.x in order to improve the performance, so it’s possible this could help your situation.

Okay so i have tried in v1.13.4, unfortunately, no obvious difference still very slow with loading component.