From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Enhancing the loading state with loader component

Enhancing the loading state with loader component

From the course: Build Modern Web Apps with React, Hooks, State Management, and APIs Using Vite or Next.js

Start my 1-month free trial Buy for my team

Enhancing the loading state with loader component

“

Hello and welcome back. In this video, we are going to enhance our loading state. And we are going to make a component for loader. And wherever we were showing the loading state, instead of showing the loading div, we are going to show an enhanced loader, which is going to have a spinner kind of effect showing the user that something is getting loaded. You can have a generic component being created inside your components folder. And this component is a common reusable component for all of your application. So by making a component out of it, you are going to use it in multiple places and you can have the logic in just one file. Let's see that in action. This is the Xeo's client-based example where we are showing a div showing a blue color text of loading. For enhancing this, we have to create a loader component. This loader component will have this one outer div where we are going to set it to screen height. It will be flex and flex call and it should be aligned in the center of the…

Contents