Ionic

Mejora el Aspecto de tu App con Ion-Skeleton

Joshua A. Díaz Robayna

Joshua A. Díaz Robayna

— 2 min read
Mejora el Aspecto de tu App con Ion-Skeleton
Photo by ian dooley / Unsplash

¡Hola, desarrolladores creativos! 🎨 Hoy vamos a hablar sobre Ion-Skeleton, una herramienta increíble para darle un toque profesional a tus aplicaciones Ionic. Si quieres que tu app luzca más elegante y proporcione una mejor experiencia de usuario mientras se cargan los datos, ¡este es el lugar perfecto!

¿Qué es Ion-Skeleton?

Ion-Skeleton es un componente de carga que simula la estructura de tu contenido antes de que se cargue por completo. En lugar de dejar a los usuarios mirando un espacio en blanco, Ion-Skeleton muestra una representación simplificada de tu diseño, lo que no solo mejora la estética, sino que también reduce la percepción de tiempo de espera. ¡Es como un aperitivo visual antes del plato principal! 🍽️

Paso 1: Instalación de Ion-Skeleton

Para empezar a usar Ion-Skeleton en tu proyecto Ionic, asegúrate de que estás utilizando Ionic 5 o superior. Si no tienes el proyecto configurado, puedes crear uno nuevo con:

ionic start myApp blank --type=angular

Luego, navega al directorio de tu proyecto:

cd myApp

Paso 2: Uso de Ion-Skeleton

Ahora, es momento de agregar Ion-Skeleton a tu componente. Supongamos que estás cargando una lista de usuarios. Aquí hay un ejemplo de cómo hacerlo:

<ion-content>
    <ion-list>
        <ion-item *ngFor="let user of users; let i = index">
            <ng-container *ngIf="user; else loading">
                <ion-label>
                    <h2>{{ user.name }}</h2>
                    <p>{{ user.email }}</p>
                </ion-label>
            </ng-container>
            <ng-template #loading>
                <ion-skeleton-text animated></ion-skeleton-text>
            </ng-template>
        </ion-item>
    </ion-list>
</ion-content>

¿Qué está sucediendo aquí?

  1. Estructura de la Lista: Usamos un ion-list y un ion-item para mostrar cada usuario.
  2. Condicional de Carga: Con *ngIf, verificamos si el usuario está disponible. Si no lo está, mostramos un ion-skeleton-text.
  3. Animación: El atributo animated añade un efecto de pulsación, lo que hace que la carga se sienta más dinámica.

Paso 3: Simulando la Carga de Datos

Para simular la carga de datos, puedes usar un método en tu componente que retrase la carga real de los usuarios:

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  users: any[] = [];

  constructor() {
    this.loadUsers();
  }

  async loadUsers() {
    // Simular un retraso de carga
    setTimeout(() => {
      this.users = [
        { name: 'Juan Pérez', email: 'juan@example.com' },
        { name: 'María López', email: 'maria@example.com' },
      ];
    }, 2000); // 2 segundos de espera
  }
}

¡Y voilà!

Cuando abras tu app, verás los ion-skeleton-text animándose mientras los datos se cargan. Una vez que la carga se completa, la lista de usuarios aparecerá, dándole un aspecto mucho más profesional a tu aplicación.

Consejo de JadrDev:

Recuerda que una buena experiencia de usuario es clave. ¡No dudes en personalizar el diseño de tus ion-skeleton para que coincida con el estilo de tu app! Puedes usar diferentes tipos de ion-skeleton como ion-skeleton-text, ion-skeleton-card, o incluso crear tus propios componentes personalizados.

¡Y ahí lo tienen! Ahora saben cómo implementar Ion-Skeleton en sus aplicaciones Ionic para ofrecer una experiencia de usuario más pulida y profesional. ¡Espero que disfruten este pequeño truco y continúen creando apps increíbles!

Read more