Preloading animation for React webpack bundle

Question

I have a single page webapp, which is about 300Kb big. It gets bundled with webpack and uses React/Redux.

How do I put a small loading spinner upfront until

Answer 1

One way would be to insert the loading animation in the index.html

e.g.

Then after the bundle.js is loaded it will render in the content and the loading animation will disappear.

EDIT:

Another method is to use a progressive webapp. https://developers.google.com/web/updates/2015/10/splashscreen

However this feature might only be available in modern browsers, which is why the first approach should be used as a fallback method. The benefit however is, that if your app is offline it will still play the loading animation and can give specific error messages.