Loading
Provides a visual cue that the application is processing data.Use the <LoadingSpinner /> component to indicate that an action is being processed. This is mainly a utility component used to build other EDS-components, such as <Button loading={true} />. If you need a loading state for data or content to be displayed, use the LoadingSkeleton.
The loading spinner uses currentColor by default. Prefer to not customise this, as other components will inform the color of the loading spinner correctly. If you absolutely need to change color, you can wrap it in a primitive and set the color there, which will be inherited down to the loading spinner.
There are two sizes, small and medium (default).
Replaces content with a same-shape placeholder while loading.
Use the isLoading prop to toggle between showing a skeleton and rendering children. When isLoading is true (default), the component shows a visual placeholder and disables interactivity. When false, it renders children as-is.
The isLoading prop is optional and defaults to true. Children only render when isLoading is explicitly set to false.
Wrap the text node, not the Text or Heading component, to preserve dimensions and line breaks.
The LoadingSkeleton component renders as a span by default. Use the as prop only when it's required for your HTML to be valid. For example, use it inside a ul.
When loading, the component hides its content from assistive tech and disables interactivity using aria-hidden, inert, tabIndex={-1}, pointer-events: none, and user-select: none.
The component inherits the border radius of the element it wraps. Use the borderRadius prop only when the direct child has no radius but a visual descendant does. For example, use it when wrapping a TextInput.
Wrap layout primitives like Box to create skeletons with specific shapes.
Use the <LoadingSkeletonProvider /> component to control the loading state for all nested skeletons.
When using LoadingSkeleton inside a LoadingSkeletonProvider, avoid setting the isLoading prop on individual components. The provider will override it.