Skip to main content

ns-live

Introduction#

Through the use of a loading icon, a helpful message and subtle animation; ns-live draws attention to areas of the page that are dynamically updating.

Accessibility#

This component adds the aria-live attribute to itself. Screen readers will announce all changes that occur within this component

Content guidance#

Image of ns-ive component in busy state

KeyField typeGuidelines
AIconThis is the loading icon inside ns-live
BMessageKeep this under 10 words and describe to the user what is happening e.g. Updating your quote

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use to wrap small pieces of dynamic contentWrap large parts of the UI
Wrap html elementsPlace inside text elements (<p>, <h1-6>)
Use as a slotUse for media
Keep the contents of ns-live simple
Leave the old content in place whilst busy
Remove the busy attribute and update content at the same time

Considerations of best practice#

Smooth transitions to new content#

For the best user experience follow these guidelines to avoid excessive page movement when content is updating. This is particularly important when the content being updated is larger than the busy message

  • Keep the busy message short or the same size as the content that is being updated - this prevents ns-live pushing down the page when the busy state is applied
  • Leave the old content in place whilst busy - this makes sure that ns-live still occupies the same space on the page and prevents any resizing
  • Update the content and remove the busy state at the same time - this will apply a subtle fade in animation to the body of ns-live which helps the transition to the new size of the content

Usage#

View example on Storybook

Component placement#

The ns-live component can be used to wrap any html elements but be aware that it will effect the flow if used in components that rely on clean markup for layouts (e.g. in ns-form or ns-content);

Specification#

AttributeTypeDefaultOptionsDescription
busybooleanfalseAdd to component to show the loading icon and busy message
busymessagestringUpdatingThe message to show when the area of the page is updating
SlotsType
AnonymousAny html flow content

Specification notes#

Anonymous#

  • Place the html being updated into this slot.

Design Tokens

You can change the branded look and feel of the ns-live by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "typography": "p-normal"
}

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!