This video is available to students only

Showing Loader

In this lesson, we're going to show a loader when app is fetching data

Showing loader#

Right now, we are using fetchCurrent user and fetchBasketAsync function inside App.tsx file inside the useEffect hook, but both of these functions are asynchronous and we're not handling them properly. Let's create a function with name, appInit. This will be an async function. Inside it, we can make a try catch block where catch will just log the error and inside the try block, we can use both of our async thunk functions by using await in front of them.

Now inside the useEffect hook, we can use appInit function. Till the time the appInit function is making the api call, we can show a loader; so we can create a new state loader and setLoader with initial value, true. After the appInit is run successfully, we can setloading to be false and pass appInit as a dependency.

Now let's make a loading component inside components. The function can be called Loading, and inside, we will return a div with class loading, and inside the div, we can use Spin component from antd, of size large and tip, Loading....

I have added a file in the code which is \_loading.scss. Let's copy that, and paste it inside sass components

client/src/sass/components/\_loading.scss

Start a new discussion. All notification go to the author.