Sometimes referred to as ‘skeletons’, ghost elements are gray-box representations of pending UI that will be available in the future; once async data is loaded or perhaps a lazy-loaded module is ready.
Ghost elements are very useful for implementations of complex tables and other UX where data loads are not trivial.
While many applications [most notably Slack and Facebook] incorporate UX with skeletons and CSS, the Angular developer community has yet to discuss this technique in any detail.
https://angular-animated-ghost-list.firebaseapp.com/
Ghost views can be used in three (3) ways:
- Separate, distinct overlays that of DOM elements used in place of the 'real' elements (DOM)
- Inline-elements that either show ghosts or 'real' data
- Inline Ghosts with AsyncItem wrappers
For lists or tables, ghost elements can be especially challenging to implement.
The advantage of (1) is that developers have maximum power to animated the ghost elements and the real elements simultaneously. Especially for lists, where developers may want to stagger items as the :enter or :leave.
This repository demonstrates ideas on how to partition, implement, and animate ghost elements... implemented with Angular 7.x and @angular/animations.
3.) Animated Ghosts + AsyncItem
- 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-performance-with-skeleton-screens/
- https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html