Skip to content
This repository has been archived by the owner on Nov 26, 2022. It is now read-only.

Demonstrate use of ghost (aka skeleton) elements in Angular UX and animated with @angular/animations

Notifications You must be signed in to change notification settings

ThomasBurleson/angular-animated-ghost-elements

Repository files navigation

Animated Ghost-Elements in Angular

image

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.


Blog at Angular-in-Depth

image

Hosted PWA Demo

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


Approaches

Ghost views can be used in three (3) ways:

  1. Separate, distinct overlays that of DOM elements used in place of the 'real' elements (DOM)
  2. Inline-elements that either show ghosts or 'real' data
  3. 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.


StackBlitz Demo

1.) Animated Ghosts Overlay

image


2.) Animated Inline Ghosts

image


3.) Animated Ghosts + AsyncItem

image


Learning Resources

About

Demonstrate use of ghost (aka skeleton) elements in Angular UX and animated with @angular/animations

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published