Saltar al contenido

Loading Ionic

Loading Ionic

¿Quieres saber cómo puedes 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?

Si has respondido que si a alguna de las dos preguntas, déjame decirte que no eres el único, ni serás el último, que pasa por este artículo a darles respuesta.

Es más, hasta los más expertos en el sector hacemos uso de este tipo de artículo cuándo vamos a implementar algo nuevo, o algo que llevamos mucho tiempo sin utilizar. Así que no te preocupes.

Por si no me conoces aún mi nombre es Aitor Sánchez González, soy desarrollador de apps móviles desde 2014, y en este artículo te mostraré cómo puedes implementar Loading Ionic en tu aplicación de manera sencilla e intuitiva. Si te lees todo, claro.

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Instalación y configuración de Ionic Loading

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.

 

Creación de un ion-loading

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.

 

Dismissing / quitar el Load

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?

 

Cómo podemos usarlo

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.

ion-load / loading personalizado / custom

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.

 

Como quitar el Spinner de un loading

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”.

 

Funciones y campos de ion-load

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.

create(loadingOptions)

Este método será el que nos permite construir y definir todo nuestro loading.

  • loadingOptions -> LoadingOptions -> Una instancia de esta interface que veremos más abajo cuales son sus campos.
  • Retorno -> Loading -> Básicamente una instancia de Loading que es la que nos permitirá mostrar, ocultar, mofidicar, etc… nuestro loading.

 

LoadingOptions

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.

  • spinner -> string -> Será el nombre del SVG del spinner. Veamos las opciones.
    • Ios
    • Ios-small
    • Bubbles
    • Circles
    • Crescent
    • Dots
    • Hide
  • content -> string -> El contenido, en html, que queramos que tenga nuestros loading.
  • cssClass -> string ->. La clase/s css que queremos que tenga nuestro loading en caso de que queramos cambiar la apariencia de este.
  • showBackdrop -> boolean -> Si queremos que el loading tenga fondo. Por defecto es verdadero.
  • enableBackdropDismiss -> boolean -> Si queremos que se cierre o no al pulsar fuera de él. Por defecto false.
  • dismissOnPageChange -> boolean -> Si queremos que desaparezca al cambiar de ventana.
  • duration -> number -> La duración, en milisegundos, que queremos que permanezca abierto el modal.

 

Más tutoriales de Ionic

 

Y para los más ganduletes…

Como se que tengo algunos lectores, quizás seas tu, o no, os dejo una explicación en vídeo de como podemos hacerlo.

 

Bueno compañero/a del metal. Hasta aquí hemos llegado hoy. Pero no te preocupes, si te falta algo que aprender, pero no está aquí, comunícamelo desde el contacto y estaré encantado de actualizar este artículo explicándolo.

Un saludo y nos vemos en el siguiente 🙂