Description
TL;DR: dash-1.2.0 JavaScript freezes the browser when handling ~100 callbacks. In comparison dash-1.1.1 only caused the browser to stutter.
Context
dash (1.2.0)
dash-bootstrap-components (0.7.0)
dash-core-components (1.1.2)
dash-daq (0.1.7)
dash-html-components (1.0.1)
dash-renderer (1.0.1)
dash-table (4.2.0)
Tests were done on both Chrome Version 76.0.3809.132 (Official Build) (64-bit) and Firefox Version 69.0 (64-bit) on Windows.
Description
This is a bit related to #879. Specifically, I use a pure CSS single-element spinner on the <div class='_dash-loading-callback'/> element. This worked mostly well in dash-1.1.1.
There was an occasional stutter in the CSS spinner. Mind you, these stutters were not due to waiting for the callbacks to compute; while actually waiting for the app - e.g., loading data from the DB - the spinner was smooth. Rather it seemed something to do with the JavaScript for dispatching the callbacks.
I didn't see the stutter in the CSS spinner set up by the Loading component. I read that CSS spinners might end up being dependent on JS responsiveness due to DOM and layout issues, so I tested several pure CSS spinners that seems "safe". It seems I'm not a sufficiently black CSS magician to find the magic difference between the smooth and stuttering spinners. At any rate, it was a tolerable stutter so I let it go.
Then I upgraded to dash 1.2.0, and what was a stutter turned into a full-fledged freeze. That is, my global CSS spinner would show a frame, then freeze for a few seconds, etc. Again, somehow the CSS spinner of the Loading component seems immune to this effect. However, my global "something is loading" spinner became completely unusable.
I also noticed plotly/dash-table#561 - initially I thought the two issues are related. But even if I commented out creating any DataTable the issue remained. In contrast, if I disabled all my callbacks (except for one to get the spinner going), keeping the data tables (and the warnings), the problem disappeared. Again, when actually waiting for the results of the callback, the spinner is smooth.
Since all this was happening when I was developing my app, just to make sure, I downgraded to dash-1.1.1:
dash (1.1.1)
dash-bootstrap-components (0.7.0)
dash-core-components (1.1.1)
dash-daq (0.1.7)
dash-html-components (1.0.0)
dash-renderer (1.0.0)
dash-table (4.1.0)
And my CSS spinner returned to its old just-a-stutter behavior. So, I'm sticking with dash-1.1.1 for now.
No sample program here, sorry - the app is non-trivial. That said, I have cascades of events (one UI element controlling another that controls another, data loaded from DB affects list of valid options in some UI elements, etc.). When I load the application, there are ~100 callbacks being triggered. I accept that this takes a while - hence the spinner. However it seems that in dash-1.2.0, the JavaScript is "more blocking" when dispatching callbacks than dash-1.1.1 was, so this is "too many" callbacks for it to handle (without freezing the browser).