Showing Loader

[00:00 - 00:14] Right now we are using fetch current user and fetch basket async function inside app.tsx file and both of them are being used inside the user effect hook. But both of these functions are asynchronous and we are not handling them properly.

[00:15 - 00:48] So what we can do is we can create a new function and let's call it app init. This will be an asynchronous function so let me write async and since it's an asynchronous function let me write the try catch block the arrow and let's simply log the arrow.

[00:49 - 01:11] Now inside the try block we can use both of our async tongue functions by using await in front of them. So what we can do is cut it from here and use it inside the try block and since they both are asynchronous functions let's write await.

[01:12 - 01:44] Now inside the user effect hook we can call the app init function and till the app init function is fetching the API calls we can show a loader. So what we can do is we can create a new state so here let's create a new state called loading and set loading for this we will use new state hook and the default value will be true.

[01:45 - 02:05] Now here when both of these API calls are successful we can use then which will set loading to false. And now when this loading is true we want to show a loader so let's make a loading component inside components.

[02:06 - 05:46] Let's go to our components and create a new file let's call it loading dot t6 and let's start with a function loading and inside we will return a dev with class name loading and now we can use a spin component from anti so let's write spin which will be imported from Andy we can give it a size so let's give it a size large and also a tip which means a keyword so let's give it loading and we can export it from here. I have added a file in the code which is called loading dot sss let's copy that and paste it inside sass components so inside sass inside components create a new file called loading dot sss paste it here and inside main dot sss file you can import it so let's write add to import components slash loading dot sss now coming back to the app dot t 6 file if loading is true so if loading we want to return the loading component that we have created and also instead of dispatch let's pass app in it as a dependency so the dependency we are passing inside the user effective it will cause multiple rerenders because the app in it function will change on every render so it's a best practice to wrap this inside use callback hook with dispatch being its dependency by doing this app in it function will be memoized and we don't change on every render so what we can do is first of all let's cut it and let's make this function use callback since it's an asynchronous function let's write async and here we want to give dispatch as a dependency so let's write dispatch and inside we can paste the same code that we cut now before moving to the browser I observed that inside agent dot t s file they're using user but it should be users slash current user now we can open the browser now if we refresh the page we see loading component for a small amount of time which means our loader is working as expected also let's check the notification error which says session has been expired for that we'll have to edit our token so let's open inspect and open storage now we'll open local storage and then click on local host 3000 here we can edit our value so that whenever it's rejected we see a notification error which says session has been expired so what I'll do is I'll just add a in front of my token and click enter now it has been edited and as you see we are logged in and now if we refresh the page we see session has been expired which means everything is working as expected