Skip to main content

ns-skeleton

Introduction#

A placeholder to show that content is loading.

Accessibility#

This component is hidden to screen readers. It will add a message, visible only to screen readers, within the parent element stating "Loading". When the skeleton component is removed from the DOM it will find the loading message and delete it.

To prevent users with cognitive disabilities from being overwhelmed; the shimmer animation loops for 6 seconds then stops.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use to show a block of content is loadingUse for partial content
Use within a component slotUse for actionable elements like tabs or cta's
Use if content will load under 5 secondsUse for media
Use if part of the page is updating or loading

Considerations of best practice#

  • It should not have any siblings that are not itself, i.e. it is the only child of its parent element.
  • The use of a skeleton should be considered as a last resort for page loading.
  • Partial content cannot be used as it will conflict with the messaging that this is loading.
  • If loading times are longer than a few seconds, consider using a Stopgap instead.

Usage#

Component placement#

The ns-skeleton component can be used in the following components:

Specification#

AttributeTypeDefaultOptionsDescription
typestringtexttext, paragraph, heading, subheadingVisual element it is representing

Specification notes#

Type#

Type can be manually picked, however it will automatically decide the best type based on the slot it is in.

Feedback#

  • Do you have insights or concerns to share? You can raise an issue via Github bugs.
  • See all the issues already raised via Github issues.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!