All language subtitles for 006 Handling Loading & Data States_en

So now let's continue

working on this application.

We are fetching the movies

whenever we click this button and that's great.

Now we're not really showing any loading state.

If I reload this app and I click fetch movies

it takes a second or so for the movies to show up.

In reality, you typically want to show some loading spinner

or at least some loading text in the meanwhile

to signal to your user that data is on its way

and you're doing some work.

And of course we want to do this here as well.

Now, how could we do that in React world?

In the end, it's again, just about managing state.

We get the movies state and we can,

of course, tell whether we have movies or not.

Now to tell whether we're waiting or not,

we can introduce a second piece of state.

We could name it isLoading and setIsLoading

and then add useState and initially set this to false.

Initially, we're not loading data.

When this component is loaded,

when the app component is rendered to the screen

we're not loading data.

But when we call fetchMoviesHandler,

when this function starts to execute,

we of course want to call setIsLoading here

and set this to true.

With that we changed the state when we start to load.

Now, once we're done, so basically,

after this await block or after we setMovies,

but that doesn't really make a difference

because these are synchronous tasks,

but once we're done, we want to call setIsLoading again,

and set it to false again,

because we're not loading anymore,

we got some data.

And now we can use the isLoading state

to render a loading spinner or some loading text.

So here we could say that we only want to render

the movies list if we are not loading.

So of course we can do it as we learned it,

wrap this in curly braces, check isLoading,

and if we're not loading, then we want to render this,

which we can do with this shortcut here.

So for not loading, then we render this,

alternatively, if we are loading,

so there is no exclamation mark here,

I will render a paragraph where I say loading.

So if we save this and we click this button

you see loading here, only briefly,

because the data arrives super fast,

but you see loading here for the fraction

of a second until the data is there

and also if we re-fetch.

And that is how we can show a loading spinner,

loading text, whatever you want to do whilst you're loading.

Now, of course, loading and not loading

are not the only states you might have.

We might also want to show a different content

if we're not loading, but we've got no movies yet,

so if movies is an empty array

and there is nothing to display.

Of course we could also handle this.

We could say that we only want to render the movies list

if we're not loading and movies length is greater than zero.

So only if we're not loading and we got movies,

only then we display the movies list.

Here, we want to show to loading text

whenever we are loading though.

No matter if we already have loaded movies or not

we started a new loading process

and therefore, of course, we want to show to loading text.

Now, maybe we want to show some fallback content

if we're not loading and we got no movies though.

So here we could say, if we're not loading,

so we want to display some content,

but the movie's length is equal to zero,

so we got no movies.

Then we show a paragraph where we say

found no movies or anything like that.

This of course, is just a simple fallback example.

Now you see when we reload this application

and we therefore no movies initially,

we see found no movies.

If I click fetch movies, this will change

to loading and then to the movies.

And that's of course a crucial part

of building user interfaces.

You want to let your users know which state

your application currently has.

And there is a difference between we got no movies,

we are loading, and we have movies, of course.