Aitor Sánchez - Blog - Oct. 31, 2023, 10:36 a.m.
¿Quieres mostrar un cuadro de dialogo a tus usuarios cúando, por ejemplo, hagas peticiones HTTP? O, quizás, ya sabes cómo se hace y lo que buscas es información sobre alguna función o campo de Loading Ionic ¿verdad?
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a mostrar un Loading Ionic en tu aplicación de manera sencilla e intuitiva para que le des feedback a tu usuario de lo que está haciendo tu app.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Al pertenecer al paquete core de sistema de Ionic no es necesario que realicemos instalación o configuración alguna. Simplemente tendremos que inyectarlo en los constructores y él se auto configura. Pero no te preocupes, ahora lo veremos todo más adelante.
Para poder crear un ion-loading tenemos que hacer uso, como he explicado en el punto anterior, del módulo Loading Controller. Este nos proveerá de toda la estructura necesaria para poder utilizarlo. Veamos un ejemplo antes de continuar.
constructor(public loadingCtrl: LoadingController) {
}
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
setTimeout(() => {
loading.dismiss();
}, 5000);
}
Como ves, construirlo es muy sencillo. Solo tenemos que llamar al método “créate” del módulo que hemos inyectado en el constructor y listo. Disponible para lo que necesitemos.
Como sucede con los Alert y los Popover, tenemos la función “dismiss()” que será la encargada de disposear y eliminar el loading de la pantalla. Veamos un ejemplo:
loading.dismiss();
¿A qué es muy sencillo?
Antes de proceder, vamos a ver un ejemplo completo de cómo usar todo el tinglado este.
constructor(public loadingCtrl: LoadingController) {
}
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: 'Please wait...'
});
loading.present();
setTimeout(() => {
loading.dismiss();
}, 5000);
}
presentLoadingCustom() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
</div>`,
duration: 5000
});
loading.onDidDismiss(() => {
console.log('Dismissed loading');
});
loading.present();
}
presentLoadingText() {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: 'Loading Please Wait...'
});
loading.present();
setTimeout(() => {
this.nav.push(Page2);
}, 1000);
setTimeout(() => {
loading.dismiss();
}, 5000);
}
Primero, vamos a realizar una importación de LoadingController. Será el módulo que nos permita, como he explicado antes, llevar a cabo todo este tutorial. (No está en el código, no veía necesario incluirlo)
Posteriormente, es necesario que hagamos una inyección del componente en el constructor de nuestra clase. Recordamos que no es necesaria ninguna configuración previa.
Continuemos, ahora nos vamos a posicionar en la función presente Loading. Esta función, tal cual está escrita, nos permitirá presentar un Loading en el que simplemente podrá “Please Wait..”
Para construir este loading nos vamos a valer del método “create()” que necesita una instancia de “loadingOptions”. Esta interfaz ahora la veremos más abajo. Por ahora quédate con el ejemplo.
La siguiente instrucción, será llamar al método “present()” que será el encargado de que nuestro loading se presente/muestre al usuario.
Dejando de un lado el “setTimeOut” que hemos definido en el ejemplo, que simularía, por ejemplo, una petición http a una api rest full alojada en alguna web, centrémonos en el método “dismiss()” Que será, como puedes imaginar, el método que esconderá el loading de la pantalla dejándose de mostrar al usuario.
Y esto es todo. Ya tenemos un ejemplo funcional. Ahora vamos a ver un poco más los ejemplos que hemos puesto en el ejemplo.
Como era de esperar, Ionic pone a nuestra disposición la posibilidad de que hagamos el alert como nos de la gana, hablando mal. Por que nos permite pasarle un contenido html directamente que será, ni más ni menos, que lo que se muestre al lado del spinner.
A parte, nos permite definirle una duración “X”. Recuerda, Ionic trata todos los tiempos en milisegundos, a menos que se especifique explícitamente de otra manera.
Por otro lado, y como puedes ver en el ejemplo, “onDidDismiss()” es listener que nos permite conocer cuando el loading en cuestión ha dejado de estar activo y ya no está visible.
En muchos casos, nuestras necesidades nos piden que quitemos el spinner de un loading. Pues bien, basta con que en el objecto loadingOptions que le pasamos al método créate le digamos en el campo “spinner” que se esconda con el valor “hide”.
Ahora, en un intento de enseñarte algo más avanzado, vamos a hablar de los campos y funciones que tenemos disponibles en este componente. Los veremos con detenimiento para que lo entiendas perfectamente.
Este método será el que nos permite construir y definir todo nuestro loading.
Esta es la clase que venimos hablando desde hace un rato. Ahora vamos a ver los campos que tenemos disponibles para poder editar nuestro loading.
Como se que tengo algunos lectores, quizás seas tu, o no, os dejo una explicación en vídeo de como podemos hacerlo.
Mira, mejorar el logo de tus aplicaciones móviles tiene un impacto directo en su visibilidad, en sus descargas y en los ingresos que tu app genera.
Por esta razón, hemos creado esta herramienta para que tu puedas evaluar, optimizar y mejorar el logo de tus apps y espiar a ver cómo lo está haciendo la competenciapara que te hagas una idea de por donde tirar. No te espoileo más, entra al enlace.
Bueno geniete, hasta aquí el artículo de hoy. Espero haberte ayudado y nos vemos en el siguiente. Hasta entonces ¡que vaya bien!