This course is archived!
While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).
Loading Messages
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeHmm. Refresh the page and watch closely. See it? When it first loads, the table is empty just for a moment. Then, when our AJAX call finishes, it gets filled in. That makes perfect sense, but it does make the page feel momentarily "broken"... and it may not always load this quickly.
No worries! This is why the Internet invented loading messages and animations! How can we add these in React? I have no idea! Let's find out!
Here's our goal: before our AJAX call finishes, I want to render one row that just says "Loading". Hmm... this will need to happen inside RepLogList: that's where the tbody lives. But, hmm again: this component somehow needs to know whether or not the AJAX call has finished... and that is something that only RepLogApp knows.
To keep track of whether or not the AJAX call is finished, we need new state. On top, add some new state isLoaded: false.
| // ... lines 1 - 7 | |
| constructor(props) { | |
| // ... lines 9 - 10 | |
| this.state = { | |
| // ... lines 12 - 14 | |
| isLoaded: false | |
| }; | |
| // ... lines 17 - 21 | |
| } | |
| // ... lines 23 - 85 |
Then, down below, when fetch() finishes, set isLoaded to true!
| // ... lines 1 - 23 | |
| componentDidMount() { | |
| getRepLogs() | |
| .then((data) => { | |
| this.setState({ | |
| // ... line 28 | |
| isLoaded: true | |
| }) | |
| }); | |
| } | |
| // ... lines 33 - 85 |
State, done! And thanks to how we're rendering RepLogs, this state is automatically passed as a prop. And now we start the prop-passing dance! In RepLogs, add the new prop type at the bottom: PropTypes.bool.isRequired. Oh, and you've probably noticed that I like to make pretty much everything required. That's a personal preference. Because this is my app, if I forget to pass a prop, it's probably a typo and I want to know.
| // ... lines 1 - 84 | |
| RepLogs.propTypes = { | |
| // ... lines 86 - 93 | |
| isLoaded: PropTypes.bool.isRequired, | |
| }; |
Next, scroll up, destructure the isLoaded variable, find RepLogList, and pass that prop: isLoaded={isLoaded}.
| // ... lines 1 - 17 | |
| export default function RepLogs(props) { | |
| const { | |
| // ... lines 20 - 27 | |
| isLoaded | |
| } = props; | |
| // ... lines 30 - 35 | |
| return ( | |
| <div className="col-md-7"> | |
| // ... lines 38 - 56 | |
| <RepLogList | |
| // ... lines 58 - 61 | |
| isLoaded={isLoaded} | |
| /> | |
| // ... lines 64 - 80 | |
| </div> | |
| ); | |
| } | |
| // ... lines 84 - 96 |
Finally, do the same in that component: I'll steal the prop type and go up to destructure the variable.
| // ... lines 1 - 3 | |
| export default function RepLogList(props) { | |
| const { highlightedRowId, onRowClick, onDeleteRepLog, repLogs, isLoaded } = props; | |
| // ... lines 6 - 42 | |
| } | |
| // ... line 44 | |
| RepLogList.propTypes = { | |
| // ... lines 46 - 49 | |
| isLoaded: PropTypes.bool.isRequired, | |
| }; |
Ok, this is interesting: if the app is not loaded yet, we don't need to run any of this code down here. So, we can short-circuit the entire process: if !isLoaded, then return a completely new set of JSX, with a tbody, tr and <td colSpan="4" className="text-center">. Say, "Loading...".
| // ... lines 1 - 6 | |
| if (!isLoaded) { | |
| return ( | |
| <tbody> | |
| <tr> | |
| <td colSpan="4" className="text-center">Loading...</td> | |
| </tr> | |
| </tbody> | |
| ); | |
| } | |
| // ... lines 16 - 52 |
Oh, and notice that this is colSpan with a capital "S". This is another, uncommon, case where the prop is slightly different than the HTML attribute. PhpStorm made it easy by auto-completing the correct version for React.
And... yea! That's it! Let's go refresh... but watch closely. There it was! And because React's model is so flexible, if you ever needed to, for some reason, reload the data, you could re-render that loading message simply by updating one piece of state. Nice.
We're on a roll! So let's make the delete link talk to our API.
