Loader

A Loader component is a visual indication that content is being loaded or processed. It displays a spinning animation accompanied by the text "Loading...". This component is essential for providing feedback to users during data fetching or processing.

Installation instructions

yarn add @department-of-veterans-affairs/clinical-design-system-loader npm install @department-of-veterans-affairs/clinical-design-system-loader

Guidance

Please note that this component is only available in the React Component library. When to use a loader

• Fetching data. Display the Loader component while fetching data from an API.
• Processing. Indicate that a process is ongoing, such as form submission or file upload.

Use a progress indicator for any action that takes longer than about 1 second.

Use a spinner or looped animation to offer feedback that the system is working, but it doesn’t give any information about how long the user will have to wait. Best Practices

In Nielson Norman’s Ten Usability Heuristics, the first principal Visibility of System Status, states that the design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Appropriate feedback serves to keep users informed of the current status and to allow them to steer the interaction in the right direction, without wasting effort. Loading indicators communicate that the system is working, and reduce uncertainty — preventing users from tapping the same button multiple times because they weren’t sure if the first time worked.

Accessibility

• Keyboard Navigation. Ensure the user can navigate to the Loader component using the Tab key.
• Screen Readers. Provide an accessible name for screen readers using ARIA attributes.

Technical Documentation

VACDS Specific functionality: A Loader component is a visual indication that content is being loaded or processed. It displays a spinning animation accompanied by the text "Loading...". This component is essential for providing feedback to users during data fetching or processing.

aria-live and aria-busy can be used to inform screen readers about the status of an element. aria-live has three options: "off," "polite," and "assertive," each indicating different levels of urgency for announcing updates. These attributes help ensure screen readers convey dynamic content and busy states to users effectively.

The alignLeft and alignTop properties can be adjusted to position the loader within its container. For example, setting alignLeft to '-20px' and alignTop to '10px' will position the loader 20 pixels from the left and 10 pixels from the top edges.

Props

loaderRole
The role attribute for the loader, typically set to "status" for accessibility purposes.
string

	-
ariaLive
The aria-live attribute, indicating the type of updates the screen reader should announce.
"off""assertive""polite"
	-	-
ariaBusy
Indicates whether an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
boolean
	-	-
centerLabel
The label to display at the center of the loader, providing additional context.
string

	-
alignLeft
Adjusts the left position of the centerLabel within its container.
string
	-	-
alignTop
Adjusts the top position of the centerLabel within its container.
string