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.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *