Mostrar spinner durante la carga de datos en Angular 2+

Hola a todos, hoy os voy a explicar como podemos mostrar un spinner durante la carga de datos en Angular 2+.

En nuestras aplicaciones, cargaremos datos y no siempre nos vendrá todo a tiempo, por lo que lo suyo es indicar de alguna manera al usuario que los datos aun no se cargaron y que no de la sensación de que este fallando la aplicación.

Para esto, lo que haremos es crearnos un atributo booleano, que estará a false inicialmente y cuando los datos estén cargados lo pondremos a true.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

  public load: boolean;

  constructor(){
    this.load = false;
  }

  ngOnInit(): void {
    setTimeout(() => {
      this.load = true;
    }, 5000);
  }

}

En este caso, hemos puesto un setTimeout para simular una llegada de datos, lo que hace es que a los 5 segundos (5000 milisegundos) se ejecuta el código de dentro, es decir, que pone el load a true.

En la parte de HTML, tendremos dos zonas diferenciadas, cuando carga esta cargada y cuando no este cargada. Lo haremos con *ngIf.

<div class="overlay" *ngIf="!load">
  
<div class="spinner ">
    <img src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif"/>
  </div>

</div>



<div *ngIf="load">
  

Datos cargados correctamente

</div>

Mientras no este cargado, mostraremos una imagen que es el spinner.

NOTA: podéis poner la imagen en assets, yo por cosas de stackblizt no he podido.

También pongo esta clase que utilizo para que se centre y se fije mas un overlay para que no se pueda clickar en la app.

.overlay{
    z-index: 2;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 100%, .6);
    cursor: default; 
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

Os dejo el ejemplo completo:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.