Progressive Web Apps with React

Moving the loading indicator

Let's take it one small step forward, and also add the loading indicator into our app shell, to give the user a sense of what is happening.

Copy the JSX from ChatContainer and add it to our index.html. Then, reload the page:

<div id="root">  <div id="container">    <div class="inner-container">      <div id="Header">        <img src="/assets/icon.png" alt="logo" />        <h1>Chatastrophe</h1>      </div>      <div id="loading-container">        <img src="/assets/icon.png" alt="logo" id="loader"/>      </div>    </div>  </div></div>

Now, the user gets a clear sense that the application is loading, and will be much more forgiving of our app's load time (though ...