Header Ads Widget

Ticker

6/recent/ticker-posts

Mostrar un indicador de carga / girador en Ionic 5 con LoadingController

 En este tutorial, aprenderemos cómo mostrar un indicador de carga / spinner en Ionic 5 con LoadingController.

¿Por qué utilizar el controlador de carga en su aplicación Ionic 5?

La experiencia del usuario se considera un factor muy importante para una aplicación móvil exitosa. Una de las cosas que constituyen una buena experiencia de usuario es la retroalimentación visual, lo que significa que sus usuarios reciben retroalimentación de lo que está sucediendo con su aplicación cada vez que su aplicación está trabajando en alguna tarea de bloqueo de la interfaz de usuario.

Por ejemplo, si su aplicación está obteniendo algunos datos de una base de datos remota (lo que puede llevar un tiempo significativo), entonces debe mostrar algún indicador visual que les indique a sus usuarios que esperen a que los datos se reciban por completo y, al mismo tiempo, bloqueen la interfaz de usuario para evitar los usuarios de repetir acciones o de lo contrario pueden repetir acciones que pueden hacer que la aplicación funcione mal en lugar de esperar la finalización de la tarea actual.

Ionic 5 / Angular tiene un servicio integrado para bloquear la interfaz de usuario y dar retroalimentación visual a los usuarios cuando la aplicación está ejecutando alguna actividad que consume mucho tiempo en segundo plano, como cargar datos desde una base de datos remota.

Simplemente puede usar el LoadingControllerque está disponible en el @ionic/angularpaquete.

Usando LoadingController en Ionic 5 por ejemplo

Así que comience importando LoadingController:

import { LoadingController } from 'ionic-angular';

Luego inyéctelo en el constructor de la clase:

constructor(public loadingController:LoadingController){...}

    let loading = this.loadingController.create({content : "Logging in ,please wait..."});
    loading.present();
    this.auth.login('basic', {'email':this.email, 'password':this.password}).then(()=>{
        loading.dismissAll();
    });

Cuando ha iniciado sesión correctamente, el dismissAll()método oculta el indicador de carga para que pueda continuar interactuando con su aplicación normalmente.

Lea los documentos oficiales de Ionic 5 para LoadingController

Publicar un comentario

0 Comentarios