Loading indicator

Firebase is pretty quick to load, but if our users are on slow connections, they will see a blank screen until their messages load, and be wondering, "Where are all my awesome chats?" Let's give them a loading indicator.

Inside our ChatContainer, we only want to show the messages if a prop called messagesLoaded is true (which we'll define in a moment). We will make the rendering of our message container conditional on that prop. We can do so using a ternerary statement.

Ternerary statements in JavaScript are a short way of doing if else. Instead of if (true) { // this code }, else { // that code }, we can write true ? // this code : // that code, which is short and sweet.

The code looks like this:

// Beginning of ChatContainer ...

Get Progressive Web Apps with React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.