A core UX principle is that the user should get instant feedback about whatever happens in an application. This includes when people are waiting for stuff to load on a website. Going to a site and wait for several seconds (not all live in a first world country with fast internet) can be very confusing because the user is looking at a blank page and isn’t aware of if the page is broken or whether it eventually will load. For this reason, you should always illustrate loading with a loading spinner (or a loading illustration of your choice) to inform the user to…:
In this post, we are to explore four ways to implement spinners in an Angular application and when to use what.
Get the complete demo of how to implement these different spinners here:
1. way: The “before app loads” spinner
Angular applications can take a while to bootstrap, even with optimized technologies such as tree-shaking and bundle optimization. Especially if you are running init code in an app initializer, it can take considerable time before the application components are getting rendered.
For this reason, you should have a vanilla HTML and CSS version of your spinner getting shown upon app loading.
Creating the pre-Angular spinner
For showing a spinner before Angular has loaded we can write HTML inside the app-root tag Angular uses to bootstrap an Application:
The spinner is styled as:
And then the spinner style is added to the global styles.scss file which will make the style global accessible from our index.html file:
2. way: The spinner component
Sometimes you just want to show a spinner without any overlay. This can be just by creating a spinner component based on the previously designed spinner.
Creating the spinner component
This spinner is bootstrap based and is showing an animated spinner.
The spinner component template:
Spinner style is the same as for the pre-Angular spinner and gets imported even though it is in global scope, to make the dependency explicit:
Otherwise, global CSS can be a mess and in my opinion. Components should be self-reliant style-wise, except for something trivial such as the grid system.
3. way: The spinner overlay wrapper component
Sometimes you just want to add a spinner overlay over a specific part of the DOM and leave other parts, such as the navigation bar, clickable. This is done by creating an Angular wrapper component which will create an overlay over the inner HTML and show a spinner in the middle of the screen.
Creating the spinner overlay wrapper component
The spinner overlay wrapper component is used as a wrapper for the spinner and is wrapping other dom tags using ng-content for creating an overlay over these and show a spinner.
The spinner overlay wrapper style:
Voila! That’s all it takes.
4. way: The full-screen spinner overlay service
The spinner overlay service is creating an overlay which is making the screen unclickable. Depending on your needs you sometimes want to disable all interactions of the app, when it is loading, by creating a full-screen overlay.
Creating the spinner overlay service
The spinner overlay service is using the Angular CDK to spawn a new spinner overlay by creating a CDK Portal and attaching it to the CDK overlayref. This post won’t cover how the Angular CDK works, but in short, the Angular CDK is making it easy to show the SpinnerOverlayComponent by adding it to the bottom of the DOM, absolutely positioned.
The spinner overlay service is created like this:
The spinner overlay component is creating a full-screen overlay and wrapping the spinner component.
The styling:
Finally, the component being created dynamically as a CDK portal:
Note that this component needs to be added to the entryComponents property of the NgModule that declares this component for Angular to create it dynamically.
Hook into middleware
For avoiding manually coding every time the spinner overlay should be shown this can be hooked into middleware in Angular, such as an HTTP interceptor for showing loading spinner on HTTP request or a Redux store property eg. isLoading property.
Conclusion
In this post we went through four ways to create spinners in your Angular application: raw HTML and CSS pre-Angular spinner, spinner component, spinner overlay wrapper component and spinner CDK overlay service. All four spinners can make sense to use in the same project because they serve a different purpose. Depending on the desired timing and scope of the spinner you now know how to use the right spinner for the right job.
Get the complete demo of how to implement these different spinners here:
