- [Man] In this video, we're going to simulate what happens
when you have a slow connection to your API
and how you can deal with that nicely.
When I refresh this, everything loads almost instantaneously
because we're just connecting to this very computer
that I'm loading this on to retrieve the messages.
What if things are slow?
Going to go down to my retrieve status messages method here
and I'm going to add in a delay parameter.
This is something that I've included just for this purpose.
So I'm going to set a delay of five seconds like this.
I'll save this and switch back to the browser and refresh.
And as you can see, nothing's happening here for a while
and eventually, the messages will load.
And what we'd really like to have here
is some sort of loading animation
to let us know that something's happening.
It's just not quite ready yet.
So I'm going to leave this delay in
and now we need to deal with this in some way.
I'm going to open the loading-process.html file
that comes with the exercise files for this video.
I'm going to copy this in to the template
for my message list component.
I'll put it down here underneath the messages for now.
I'm going to
add my backslashes at the end here.
There we go.
So I'll save that, come back
and let's see what happens.
Here we go.
Now we can see that this is loading
but of course, when the messages come through,
the loading animation is still here.
So what we really want is
for that loading animation to start there
when the messages are loading and then of course,
go away when we're finished.
To do that, we're going to set a flag called loaded
down here in our Vue instance
and pass it through as a prop.
So let's add this to the data object.
We'll call it loaded and we'll start it out as false.
Then once the messages have loaded successfully
down here where I'm setting the messages,
I can also set loaded to true.
Okay, that's fine so far.
Now I need to pass it through as a prop
into the right component.
Let's jump down to line 50.
And here for my post status messages component,
I'm going to pass in loaded as well.
Now this component will be aware
of whether that flag is set.
Now that I've done this, I need to act on it in some way.
Vue has another couple of directives that we can use
to make this work.
It's called v-if
and I'm going to set it right here on the messages list.
So this accepts a bouillon which is the data value
coming through as a prop.
Loaded.
So if this is true, this will be displayed
and if it's not true, these two elements are siblings.
So v-else here means that when this is false,
this will be displayed instead
and when this becomes true, this will go away.
I also need to add loaded to my props list right here.
Okay.
Let's switch back to the browser and try it again.
So far so good.
The loading animation is showing.
Then the messages come through and the loader goes away.
Okay.
We're going to do one more thing
which is turn that delay down
to something a little more moderate
so we don't have to wait quite so long in the future
but we'll still know that it's working.
So I'm going to set this to one second instead of five.
One more refresh.
There we go.
So now we've seen how we can use v-if and v-else
in combination with a bouillon flag
somewhere in our data so that we can show certain things
under certain conditions and hide them in others.
We're using it here to display a loading animation
but you can use it for any number of conditions.