The app shell pattern

The essence of our application is the message list and chat box, where users read and write messages.

This core functionality relies on JavaScript to work. We cannot get around the fact that we are unable to display the messages until the user has been authenticated through Firebase and the messages array has loaded, but everything surrounding those two pieces is mostly static content. It's the same in every view and it does not rely on JavaScript to work:

We can refer to this as the application shell--the frame around the functional, JavaScript driven core.

Since this frame does not rely on JavaScript to function, there's actually no need for us to wait for React to load and boot up all our JavaScript before displaying it—which is what is currently happening.

Right now, our shell is a part of our React code, so, all our JavaScript has to be loaded before we call ReactDOM.render and display it on the screen.

However, with our app, and with many apps, there’s a significant...