Implementing a Page Overlay Loader With Angular CDK | by Silvère Marie

Be UX friendly by adding a loader to your pages

0*9QHbm23Gw VmMe6J

In most web applications data is loaded from a server. It can be images, videos, plain text, or any other kind of data. While retrieving that information the user needs to be informed with a visual indicator.

That is why this article is about adding a component on top of the whole page, to inform the user and prevent interaction during the loading.

We are going to reuse the table from the Angular Material as an example.

After cloning the component, let’s simulate some network latency using this function.

We can call this function with 5000 milliseconds and now we have an excuse for adding a loader 🤓

Our approach consists of adding a component on top of the whole page using the Angular Material overlay.

First, let’s create the LoaderComponent that will be responsible for showing the loader. We are going to use a loader from as an example.

For showing the LoaderComponent as an overlay, we first need to inject the Angular Material overlay service.

Next, we create an overlay by using the overlay service.

The overlay can be customized for positioning the component in the center of the page using the positionStrategy property. In addition, hasBackdrop can be used for adding a gray background that prevents user interaction while loading.

Next, we need to attach and detach the LoaderComponent to the overlay using the following methods.

Finally, we can encapsulate the code in service to make the logic easier to reuse.

Using the loader service

Like we did for the Overlay service, let’s inject our LoaderService into the component to load.

Now we call the method showLoader, then we subscribe to the request, and finally, we hideLoader once the response is received:

Tadam 🎉

Now that the loader is functional, it’s time to improve the code. There are (at least) two areas of improvement. The first one is that we need to implement the show/hide logic in all the components to load. This can lead to many boilerplate code when creating more components with loading.

The second one is that it’s recommended to manually subscribe over Observable as least possible. For more information about this topic, I suggest reading the article RxJS in Angular: When To Subscribe? (Rarely) from Michael Lorton.

To tackle the first problem we are going to create an RxJs operator that will be responsible for the show/hide logic.

Now we can apply our operator and remove the usage of showLoader and hideLoader in our component.

Next, we are going to use the AsyncPipe in order to remove the manual subscription.

Finally, we replace the subscription with an assignment.

We’ve just finished building our page loader. It is really helpful for keeping the user waiting and blocking the interactions with other components. However, blocking the user from interacting with other components can be a bit frustrating. That is why I suggest reading the next article on transforming the page loader into a component loader.

Otherwise, if you don’t want to maintain this logic in your app, we build ngx-load, a library that does the job for you.

You can also connect with me Twitter to read more about Angular!

News Credit

%d bloggers like this: