Parfois appelés « squelettes », les éléments fantômes sont des représentations en boîte grise de l'interface utilisateur en attente qui sera disponible à l'avenir ; une fois les données asynchrones chargées ou peut-être qu'un module chargé paresseux est prêt.
Les éléments fantômes sont très utiles pour les implémentations de tables complexes et autres UX où les charges de données ne sont pas triviales.
Alors que de nombreuses applications [notamment Slack et Facebook] intègrent l'UX avec des squelettes et du CSS, la communauté des développeurs Angular n'a pas encore discuté de cette technique en détail.
https://angular-animated-ghost-list.firebaseapp.com/
Les vues fantômes peuvent être utilisées de trois (3) manières :
Pour les listes ou les tableaux, les éléments fantômes peuvent être particulièrement difficiles à mettre en œuvre.
L'avantage de (1) est que les développeurs disposent d'un pouvoir maximum pour animer simultanément les éléments fantômes et les éléments réels. Surtout pour les listes, où les développeurs peuvent souhaiter échelonner les éléments comme :enter
ou :leave
.
Ce référentiel montre des idées sur la façon de partitionner, d'implémenter et d'animer des éléments fantômes ... implémentés avec Angular 7.x et @angular/animations
.
1.) Superposition de fantômes animés
2.) Fantômes animés en ligne
3.) Fantômes animés + AsyncItem