- [Narrator] In this video,
we'll add some sort of loading indicator
for when our data is loading.
So on the Vuetify website,
we'll go back to the UI components section on the left,
and then under the progress section,
we can see several progress indicator options.
So I've scrolled down to the size and width section.
And now let's take a look at the code.
Over here, we can see the largest progress component
with a size of 70.
So I'll go ahead and copy that.
Now let's go back to our edit student component.
And below our first div on line two,
I'll paste that in.
And I've auto-formatted, but we just paste it in.
Next what I'll do
is I'll grab the if condition from line two,
and I'll paste it into the v flex of line four.
That way, we're only hiding the v flex
if it's not loaded.
And then I'll also paste it
into the progress circular element at the beginning.
And set it to not.
So if it's not loaded,
let's show the progress circular element.
Otherwise, let's show the rest of our component.
Now let's give it a try.
So we're seeing the progress circle,
but there's a bit of a problem with our div structure.
It'd be a lot nicer if the progress circle
showed up in the card of each component.
So we know that each component is trying to load its data.
So in this case, I'll cut line three.
And I'll go down to below our first toolbar on line seven.
And I'll paste that in.
Then I'll take the v if on line three and cut that out.
And I'll paste it into the v form on line 17.
Let's save that and take a look.
And it's looking a bit better.
But I'd like the progress circle to be centered
with some sort of margin around it.
If we go back to the Vuetify example,
and we scroll up, we can see they're using
a class text xs center.
So let's copy that.
And then we'll wrap our progress circle element
with a v container.
And then we'll add that class to the v container.
Let's take a look at that.
So that's looking pretty good.
Let's make those changes for students as well.
So let's copy everything between line nine and line 17.
And go over to students.
And then below line six, let's paste it in.
Then back in edit student,
let's copy the v if from line 18.
And we'll paste it into our v list
in our students component on line 18.
Let's save that and try it out.
And it's looking pretty good.
So now let's go back to our app component.
And uncomment line 34 to load our students.
Let's do a refresh.
And you can just see the progress circles
as the data is loaded in.
Next, let's take a look at a Vuex helper called map getter.