Much of SA5 is dedicated to creating a dynamic UX experience- sorting, filtering, data-binding, calculations, and much more.

This requires placeholder elements which - before the SA5 code executes, will be uninitialized.

To ensure a perfect view, we are standardizing on a specific preloader approach which can be controlled per-element using the wfu-preload attribute.

Final details are being refined, and this capability is being rolled out across all libs gradually.


wfu-preload = ( method )

  • hidden - the element is initially hidden and collapsed from view using CSS display: none.

  • invisible - the element is initially invisible, but takes space using CSS visibility: hidden.

  • animated - the element has an element-specific loading animation.

Animation types;

  • redacted, animated

  • SVG animation

    • dot-dot-dot

  • static placeholder text

  • blurred placeholder text, then unblurred on load

Technical Notes

  • All preloaders are CSS-based, and are driven by the wfu-preload attribute.

  • On load, the value is set first

  • Then the wfu-preload attribute is removed. This gives the element its default visibility.

Preload effects generally do not appear at design time, only in the published site.

Last updated