MTG2000
commented
2 years ago I looked into this for some time yesterday, and I was surprised to see that this is an issue from 2 years ago which didn't get solved... There was a suggested approach using React's concurrent rendering, but it's experimental, and might break some times, so I didn't like it.
I think the best approach for now would be to: 1- use some pre-loading selectively, in places that are common to visit together. (eg. preload post page after the user visits the feed page) 2- and if there are still some commonly used page that still displays a white page for more than 1 second, we can build a skeleton page for it and load it with the initial app bundle (should try to make'em as few as possible).
Currently, when you are on some page and move to another one, there is a few moments where the page becomes empty except for the navbar and the top loading progress loader. And that's because each page is lazy loaded only when requested.
A common approach used by websites like Youtube or Facebook, is to keep the currently rendered page, and show some loading indicator until the the lazy loaded resource is loaded successfully.
There is no native way currently with React.Js to do this, so some research should be done to find a good way to implement it.