Issue: Page in multi-page app with multiple components loads and re-loads cleanly when accessing the page using the multi-page navigation, but the reloading process looks terrible when the browser itself is refreshed- components appear on the screen one at a time, out of order, and partially complete before the page finishes loading.
When page navigation is used, the page is blank until all charts/tables are loaded at once, which looks like this:
When browser refresh is used, the page loads piecemeal, with the dropdown and tables appearing first before entire page loads. After a few seconds of loading it does end up looking like the first screenshot. It’s just that the loading transition looks like this:
As you can see, the dropdown and tables are loading and displaying first. This is not ideal.
What the difference is between reload through page navigation and reload through browser refresh? Is there a way to control how the page is displayed when the browser is refreshed? Ideally I would like some sort of loading icon to appear and then the page is displayed only once after everything is loaded.
I tried dcc.Loading, but it just spins until the dropdown and tables appears (like in the second screenshot). In other words, it seems as if it stops spinning when the first component loads, not after all components load.
Any suggestions? The page works fine otherwise. This is really just an issue of appearance but its driving me nuts.