Reemplazar el loading inicial con un componente Skeleton

[mancuellofran]

Actualmente, al ingresar por primera vez a la página, se muestra un spinner de loading que queremos reemplazar con un componente Skeleton. El componente Skeleton puede usarse como un indicador de carga alternativo, imitando el contenido que se va a cargar, como texto, imágenes o videos.

Loading spinner

Skeleton

Objetivo:

Mejorar la experiencia del usuario eliminando el spinner inicial y utilizando componentes Skeleton para cargar el contenido de manera más visual y atractiva.

Tareas:

1. Eliminar el spinner de loading inicial:

   • Identificar y eliminar el spinner de loading que se muestra al ingresar por primera vez a la página.

2. Implementar componentes Skeleton:

   • Crear componentes Skeleton que imiten el contenido real de la página (texto, imágenes, videos).
   • Utilizar los componentes Skeleton en lugar del spinner para indicar que el contenido se está cargando.

3. Integración y despliegue:

   • Integrar los componentes Skeleton en el flujo de carga de la página.
   • Asegurarse de que los Skeletons sean reemplazados por el contenido real una vez que este se haya cargado.

4. Pruebas y validación:

   • Verificar que los componentes Skeleton se muestren correctamente durante la carga.
   • Asegurar que la transición entre el Skeleton y el contenido real sea fluida.
   • Realizar pruebas en diferentes navegadores y dispositivos para garantizar la consistencia.

Recursos:

• Skeleton Component PrimeNG

Evidencia:

Adjuntar capturas de pantalla o grabaciones de video que muestren la diferencia entre el spinner inicial y el nuevo componente Skeleton.