angular animated ghost elements

Elementos fantasmas animados en angular

A veces denominados "esqueletos", los elementos fantasma son representaciones en forma de caja gris de una interfaz de usuario pendiente que estará disponible en el futuro; una vez que se cargan los datos asíncronos o quizás un módulo de carga diferida esté listo.

Los elementos fantasma son muy útiles para implementaciones de tablas complejas y otras UX donde las cargas de datos no son triviales.

Si bien muchas aplicaciones [sobre todo Slack y Facebook] incorporan UX con esqueletos y CSS, la comunidad de desarrolladores de Angular aún tiene que discutir esta técnica en detalle.

---

Blog en Angular en profundidad

Demostración de PWA alojada

https://angular-animated-ghost-list.firebaseapp.com/

---

Aproches

Las vistas fantasma se pueden utilizar de tres (3) maneras:

1. Superposiciones separadas y distintas de los elementos DOM utilizados en lugar de los elementos "reales" (DOM)
2. Elementos en línea que muestran fantasmas o datos "reales"
3. Fantasmas en línea con envoltorios AsyncItem

Para listas o tablas, los elementos fantasma pueden resultar especialmente difíciles de implementar.

La ventaja de (1) es que los desarrolladores tienen el máximo poder para animar los elementos fantasmas y los elementos reales simultáneamente. Especialmente para listas, donde los desarrolladores pueden querer escalonar elementos como :enter o :leave .

Este repositorio demuestra ideas sobre cómo particionar, implementar y animar elementos fantasma ... implementados con Angular 7.x y @angular/animations .

---

Demostración de StackBlitz

1.) Superposición de fantasmas animados

2.) Fantasmas animados en línea

3.) Fantasmas animados + AsyncItem

---

Recursos de aprendizaje

• https://www.viget.com/articles/a-bone-to-pick-with-skeleton-screens/
• https://codepen.io/NickNoordijk/pen/VLvxLE
• https://css-tricks.com/building-skeleton-screens-css-custom-properties/
• https://blog.ionicframework.com/improved-perceived-rendimiento-con-esqueleto-pantallas/
  • https://github.com/ionic-team/ionic/tree/master/core/src/components/skeleton-text
• https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html