React SPA-显示加载屏幕，直到呈现多个组件

Question

Apologies for the relatively conceptual question. I'm attempting to emulate the full-page Heroku loading screen that appears when the page first loads and disappears after the navbar, images, libraries, and other components have mounted:

I know the underlying stack of Heroku is Ember , but is there a good practice/way for accomplishing a similar effect using node.js , webpack , react , react-router , and express . It's not isomorphic and I would prefer all rendering to take place on the client.

Thank you for your help and let me know if there's any other information that would be helpful in understanding what I'm trying to do.

Answer 1

I haven't tried this but I imagine you could simply provide the HTML for your 'full page loading screen' as the initial HTML that comes with your page, and then simply replace it with your ReactDOM.render call which will only get processed after everything has been processed.

More specifically, if you put all of your JS script tags in the footer, then the rest of your document will load and render while the scripts are being loaded, giving you your 'loading screen' effect. It should work to simply put the loading graphic within a div and then render over it with React.