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 ...
