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
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
And we are done. Here’s the final output of the application
I hope you’ve enjoyed reading, complete source code is available at ‘GitHub’. Happy coding!