All language subtitles for 004 Handling the Loading State_en

So we are fetching our data

but as I mentioned at the end of the last lecture,

we are of course not showing any loading

or error state at the moment

and that's not necessarily the behavior we want.

Instead, we might want to only load this list of meals here,

once we really got a list of meals.

And to achieve this, we need to manage more our state

and now since we will have related state,

we could also consider using use reducer for that

but I'll stick to three individual use state pieces.

I will add isLoading

state

and a set IsLoading state updating function

and initially it's false, initially we're not loading.

But in use of fact,

at the beginning of this fetchMeals function,

I wanna call setIsLoading and set this to true,

because now we clearly are loading.

Of course, since we know that

right when this component will be rendered,

we will be loading,

we could also consider not setIsLoading to true here,

but instead setting the initial state to true,

because we know that we always will start

with loading data in this component

when the component is rendered.

And therefore in this case, that's fine.

Of course, if you have a component

where that's not necessarily the case,

where you're not necessarily loading

just because the component was created for the first time,

there you might not want to set this

but here, it should be fine.

Now we wanna set IsLoading to false once we're done.

So in the end, once we also set the meals,

we wanna set IsLoading to false

because we now definitely are done loading.

And now we can use setIsLoading to control what we render.

And we could say, that we don't wanna render

our meals at all.

So this entire section should not be rendered at all

if we're loading.

So, for that, we can simply check, if IsLoading is true

and I checked this before I tried to map my meals.

Before I do any of that I check if IsLoading is true.

And if it is true, I will return something else

in this functional component.

So then we don't even make it to the code down there.

And I'll return a section here,

where I simply have a paragraph where I say, "loading"

like this.

If we add that code,

you will see, there is this loading text on the left,

briefly showing up when we reload this.

And that's of course, not the best way to to show it

and therefore let's style it by adding a class name here

of classes.MealsLoading,

like this maybe

and then we can dive into this

available meals module CSS file

and quickly add a class selector

for the meals loading class,

where we set text align to center

and set the color to white.

Of course, you can definitely give this

a more elaborate styling

but it's better than nothing.

Because with this class added here

and assigned here to this section,

with those changes made if I reload,

we at least have the loading text here.

And it's still only flashing for a brief moment

because Firebase has a quick back end

but it's better than nothing.

Of course here, we could consider

omitting this loading state

since the data is loading rapidly quickly

but of course, we don't know which internet connection

our end users might have,

so showing this loading state might not be too bad

but actually there it was showing up a bit longer.

So that is not too bad.

But what if we have an error we should also work on that.