A Smart Angular Spinner - Scoping on App as well as Component Level

Shashank Vivek
Apr 11 · 3 min read

Creating spinner components in Angular is done in almost all web apps. The 1st rule of thumb is to avoid Spinners as much as we can. There are several smart ways to do that. I’ll keep that to a different article. In this article, we will be creating the same old spinner of Angular but with a little trick up its sleeve.

In my frontend development experience with different MNCs, I have seen spinner implementation in few different ways.

  1. Create a separate Spinner Component and add the selector wherever it has to be used in other components. Set *ngIf flag to show and hide the spinner inside the component.
  2. Create a global Spinner Component and keep calling it via service. Generally, it is applied on app level and the entire UI is blocked while the data is loading.

In one of my projects, I came across a spinner component that was applied on the app level. Anytime it was called using spinner service, the entire UI was blocked. It was a straightforward implementation.

So far, so good. But later on, I realized that there were few screens that contained several small components to show data (for example: a Dashboard UI). Hence an app level spinner would restrict the user interaction time until the entire data of all components are loaded. This seems to be a problem to manage because unless the entire data is loaded, the dashboard UI will be blocked.

I decided to explore the possibility of using a Spinner component which can also have scope of both App level as well as Component level. I decided to reuse the same component but with some slight code modification.

Here is what I did:

  1. Created another div with styling position: absolute inside spinner.component.html . I added a template tag #componentSpinner

2. I removed #componentSpinner from visibility using display:none , so that it is not visible by default. To achieve that, I used AfterViewInit hook. Once I have the ElementRef , I saved it inside SpinnerService .

3. Now I needed to add this template to our targetComponent on which we want to add scoped spinner. Once the loading was completed, I also needed to remove the #componentSpinner template which I added dynamically.

To handle this, I created:

  • startLoadingForComponent(component: ElementRef)
  • finishLoadingForComponent(component: ElementRef)

And, that’s it!

To use it inside a component, we need to add a #template to the parent div. This would help us get the entire component HTML and add our small spinner code to it.

In our use, we can have an app that has a DashboardComponent . The Dashboard component may call several APIs and it can also have a few small components such as OrderCountComponent & UserCountComponent . These components may depend on DashboardComponent to get some @Input data or they can independently make API calls inside them.

We can use the SpinnerComponent scoped to UserCountComponent by adding #userTemplate to its parent div

And, using the ElementRef to show spinner on the component level as below:

I have added some intensional delays to mock slow network calls.

I know it may not be a good fit for all use cases, but it extended the feature of existing SpinnerComponent . If you liked the idea or to improve it further, feel free to drop me a note. For me, it was a fun and unique implementation.

You can refer to the final code in my github profile as scoped-spinner project.

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Shashank Vivek

Written by

works as developer in Schlumberger. Find me on https://shashankvivek.github.io/

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store