Skeleton screens with angular 2+

While performing interactions with servers or handling a user event, most of the web applications display spinners, loaders etc. But these loaders gives a feel that the page is loading much slower. To make user feel that application is loading much faster we can make use of skeleton screens. It gives a visual effect that content is loading into each UI element area progressively.

It has also been observed that perceived performance of skeleton screens is much faster as compared to spinners, loaders or progress bars. Lets see what we are going to achieve in todays tutorial

Time to build an angular app which can support ‘Skeleton Screens’. Let’s start by creating a new angular application

ng new angular-skeleton-screen — style=scss

Create a dummy user service which can provide us with some data, lets say after 5 seconds in order to display a loading effect.

Inject this service in app.component.ts to retrieve user data

Please note, we are going to use ‘generateFake’ function to support skeleton screen UI.

Create a new file spinner.scss inside ‘src’ folder and add some scss to show a spinner on UI, while we fetch the user data from our service

Import spinner.scss into style.scss

Modify your app.component.html to showcase a spinner before loading the data

Here’s is the current UI state of our application with spinner

Displaying loader before data is received

Lets remove this spinner and add a skeleton screen in the UI. Replace the content in your app.component.html with the following code

Look closely, we have added a new block which will create dummy html elements(4 elements) for us using ‘generateFake’ function. This content is shown till the user response is received from user service.

Time to add styling for skeleton screen. Create skeleton.scss in ‘src’ folder and add the below mentioned styling in it

Import the skeleton.scss into your style.scss

@import 'skeleton.scss';

And we are done. Here’s the final output of the application

Displaying skeleton screen before data is received

I hope you’ve enjoyed reading, complete source code is available at ‘GitHub’. Happy coding!

Like what you read? Give Siddhartha Gupta a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.