Skeleton gray views with animation, while loading backend data

Show skeleton views to the user, until all data are fetched

1- Loading...

2 - Loading completed

1. Component - HTML

<div>

    <br/><br/>

    <p>All cars:</p>

    <br/>

    <div *ngFor="let car of cars">

        <div fxLayout="row" fxLayoutAlign="space-between center" style="width:70%; padding-left: 20px">

            <div [ngClass]="{'skeleton': this.loading}">{{car.name}}</div>

            <div [ngClass]="{'skeleton': this.loading}">{{car.brand}}</div>

            <div [ngClass]="{'skeleton': this.loading}">{{car.type}}</div>

        </div>

        <br/>

    </div>

</div>

2. Component - TS

import {Component, OnInit} from '@angular/core';

interface ICar {
  name: string,
  brand: string,
  type: string
}
@Component({
  selector: 'jhi-test-comp',
  templateUrl: './test-comp.component.html',
  styleUrls: ['./test-comp.component.scss']
})
export class TestCompComponent implements OnInit {
  loading = true;
  SKELETON_CARS = [{name: 'xxx', brand: 'xxx', type: 'xxxx'}, {name: 'xxxx', brand: 'xxxxxx', type: 'xxxxxx'}, {name: 'xxxxxxx', brand: 'xxxxxxxx', type: 'xxxxxxxxx'},
    {name: 'xxxxxxxx', brand: 'xxxxxxx', type: 'xxxxxxxxx'}, {name: 'xxxxxxxx', brand: 'xxxxxxx', type: 'xxxxxxxx'}, {name: 'xxxxxxxx', brand: 'xxxxxxxx', type: 'xxxxxxx'}];
  cars: ICar[] = this.SKELETON_CARS;
  constructor() {
  }
  ngOnInit(): void {
    setTimeout(() => {
      this.cars = [{name: 'i10', brand: 'Hyundai', type: 'gasoline'}, {name: 'swift', brand: 'Suzuki', type: 'gasoline'}, {name: 'Y', brand: 'Tesla', type: 'electric'},
        {name: 'Almera', brand: 'Nissan', type: 'gasoline'},{name: 'Primera', brand: 'Nissan', type: 'gasoline'},{name: 'Civic', brand: 'Honda', type: 'gasoline'},{name: 'Romeo', brand: 'Alfa', type: 'gasoline'},
        {name: 'Golf', brand: 'VW', type: 'gasoline'},{name: 'Impreza', brand: 'Subaru', type: 'gasoline'}];
      this.loading = false;
    }, 3600);
  }
}

3. Component - CSS

.mat-button {
  border-radius: 30px;
  font-size: 2.08vh;
  background-color: #3339ea;
  color: white;
  width: 10%;
}
.skeleton {
  animation: skeleton-loading 1.7s infinite linear;
  background-color: #dee0e2 !important;
  color: rgba(0, 0, 0, 0) !important;
  background-image: -webkit-linear-gradient(to right, #dee0e2 0%, #ebeced 20%, #dee0e2 40%, #dee0e2 100%);
  background-image: linear-gradient(to right, #dee0e2 0%, #ebeced 20%, #dee0e2 40%, #dee0e2 100%);
  background-repeat: no-repeat;
}