How to use a skeleton loader with Angular ?

Introduction :

Skeleton loaders have been increasingly popular in recent years. The goal of these loaders is to display a placeholder while content is being loaded.

Skeleton loaders usually show a greyed template that reflects the structure and appearance of the full screen. It shows what type of material is loading in each block, such as photos, text, and so on.

While similar loaders may be implemented with HTML/CSS, it’s worth noting that frameworks like Angular include open-source ready-made skeleton loaders. We can make advantage of them with little effort.

Enter ngx-skeleton-loader

The most popular skeleton loader module for Angular on npm these days is ngx-skeleton-loader.

Install the library with npm in your project to utilise it:

npm install ngx-skeleton-loader

Then, in your application module, add the NgxSkeletonLoaderModule as a dependency:

import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
...
@NgModule({
  declarations: [
   ...
  ],
  imports: [
    ...
    NgxSkeletonLoaderModule,
    ...
  ],
    ...
})
export class AppModule {}

The skeleton loader component may now be used in your project. We’ll use one circle as a skeleton loader in this example:

<ngx-skeleton-loader count="1" appearance="circle"></ngx-skeleton-loader>

The goal is to display the skeleton component while the data is being loaded, which we can do with a simple ngIf directive on that component:

<ngx-skeleton-loader *ngIf="!contentLoaded" appearance="circle"

Rendering Option :

With the ngx-skeleton loader, you can choose between two appearances: circle and line.

These components also allow a variety of animations, including progress (the default), progress-dark, and pulse.

Here’s an example of how to use a pulse animation to display a block of two lines:

<ngx-skeleton-loader count="2" appearance="line" animation="pulse"></ngx-skeleton-loader>

This skeleton loader would come from the code above:

Fully customize the  skeleton loaders:

Custom CSS may be used to adjust any aspect of the skeleton loaders. The theme input value can be used to pass such alterations to a skeleton loader.

Here’s an example :