Creating a loader

In a frontend project, performance is not only about having faster requests but also improving the user’s perception of the application. A blank screen without any feedback signals to the user that the page did not load, that their internet is having a problem, or any other type of negative perception.

That’s why we always need to signal that the action the user expects is being performed. One way to show this is a loading indicator, and that’s what we’re going to do in this session. In the command line of our operating system, we will use the Angular CLI:

 ng generate component loading-overlay
 ng generate service loading-overlay/load
 ng generate interceptor loading-overlay/load

With that, we created the overlay component, the service that will control the loading state, and the interceptor that will control the beginning and end of the loading based on HTTP requests.

Let’s create the loading overlay screen in the HTML...