ns-live
Introduction#
Through the use of a loading icon, a helpful message and subtle animation;
ns-livedraws 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#
| Key | Field type | Guidelines |
|---|---|---|
| A | Icon | This is the loading icon inside ns-live |
| B | Message | Keep 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 content | Wrap large parts of the UI |
| Wrap html elements | Place inside text elements (<p>, <h1-6>) |
| Use as a slot | Use 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-livepushing down the page when the busy state is applied - Leave the old content in place whilst busy - this makes sure that
ns-livestill 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-livewhich helps the transition to the new size of the content
Usage#
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#
| Attribute | Property | Type | Default | Options | Description |
|---|---|---|---|---|---|
busy | busy | boolean | false | Add to component to show the loading icon and busy message | |
busy-message | busyMessage | string | Updating | The message to show when the area of the page is updating | |
aria-live | _ariaLive | string | polite |
| Slots | Type |
|---|---|
| Anonymous | Any html flow content |
Specification notes#
Anonymous#
- Place the html being updated into this slot.
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.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.