‫Let's now add a very simple loading indicator
‫to our application.
‫So basically, whenever the movie data here
‫is still being loaded in the background
‫we want to instead display some kind of loading indicator
‫right here.
‫And to show you what I mean,
‫let's come here to the Network tab,
‫which is always a good friend
‫when we're dealing with HTTP requests,
‫and then let's throttle our network here to a slow 3G
‫and so then I can easier show you what I mean.
‫So all of this will now take a lot of time to load
‫but here you now see this flash
‫where there is no content basically.
‫So the movie data was loading but hadn't arrived yet
‫and so now, again, in the meantime
‫we want to display some loading indicator
‫so in order to do that we need some more state.
‫So a state variable which basically tells our UI
‫that the data is still being loaded
‫and then as soon as the data has been loaded,
‫we want to display then the data
‫and not that loading indicator anymore.
‫But anyway, let's simply create that state variable
‫and usually it is called isLoading.
‫And so then set isLoading and let's start with false.
‫Now then let's come here to our effect
‫into our async function,
‫and so then right before the fetching actually starts
‫let's set isLoading to true.
‫And so this then will indicate our UI
‫that loading is being happened
‫and it can then render that indicator over there.
‫And then when all of this is done,
‫so let's do it right at the very end.
‫So this one we don't need anymore.
‫So here, after everything is finished
‫we can then set the isLoading state back to false,
‫and now it's very easy.
‫So here inside this box
‫we basically want to say that if isLoading,
‫then we want to display that indicator
‫and I will actually create a new component for that,
‫let's call it Loader, or else display that movie list.
‫Okay, so creating that loader that's just very simple
‫we just return a paragraph with the class of Loader
‫and then here we can say just Loading.
‫So many times in web applications
‫you will get like a rotating spinner or something like that,
‫ah, but you immediately saw that it was already working.
‫So as I save now the code it will always refetch the data
‫but let's try it again here manually.
‫Let's wait for it.
‫So now it's still the application that's being loaded
‫so we get this white screen in the meantime,
‫but now it has started fetching the data
‫then it displayed that loader, so that new component here
‫but then as soon as isLoading was set to false
‫it was time to actually display our movie list.
‫And so with this, this whole behavior is a bit more natural
‫and also a bit more real-world
‫because in all real applications
‫you always have some indication to the user
‫that some data is being fetched.