O'Reilly logo

Progressive Web Apps with React by Scott Domes

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required