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 (https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?utm_source=devtools#avoid-forced-synchronous-layouts) .

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),
    html.Div(id="page-content"),
    # 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.

Thanks.

5 posts - 2 participants

Read full topic