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?
- Is it true that dcc.Loading Component is to blame? (it certainly points this way)
- 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.