## Loading spinner

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](#loading-skeleton).

```tsx live
<LoadingSpinner />
```

### Color

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.

```tsx live
<Box color="critical">
  <LoadingSpinner />
</Box>
```

### Size

There are two sizes, `small` and `medium` (default).

```tsx live
<Flex gap="medium">
  <LoadingSpinner size="small" />
  <LoadingSpinner />
</Flex>
```

## Loading skeleton

Replaces content with a same-shape placeholder while loading.

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
    </PlaygroundCard>
    <LoadingSkeleton isLoading={isLoading}>
      <Avatar name="Jane Doe" size="xlarge" />
    </LoadingSkeleton>
  </Flex>
);
```

### With children

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.

<Notice>
  <Text>
    The `isLoading` prop is optional and defaults to `true`. Children only render when `isLoading` is explicitly set to
    `false`.
  </Text>
</Notice>

```tsx live
<Flex gap="small">
  <LoadingSkeleton isLoading={true}>
    <Button label="This button is loading" tone="neutral" />
  </LoadingSkeleton>

  <LoadingSkeleton isLoading={false}>
    <Button label="This button has loaded" tone="neutral" />
  </LoadingSkeleton>
</Flex>
```

### With text

Wrap the text node, not the `Text` or `Heading` component, to preserve dimensions and line breaks.

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);
const lorem =
  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta numquam perferendis porro eligendi fuga culpa placeat fugiat deserunt perspiciatis eveniet cum, nesciunt error, quam, vel molestias at dicta mollitia hic.';

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
    </PlaygroundCard>
    <Text>
      <LoadingSkeleton isLoading={isLoading}>{lorem}</LoadingSkeleton>
    </Text>

    <LoadingSkeleton isLoading={isLoading}>
      <Text>{lorem}</Text>
    </LoadingSkeleton>
  </Flex>
);
```

### Element type

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`.

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
    </PlaygroundCard>
    <ul>
      <LoadingSkeleton as="li" isLoading={isLoading}>
        {isLoading ? 'List item skeleton' : <li>List item skeleton</li>}
      </LoadingSkeleton>
    </ul>
  </Flex>
);
```

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`.

### Border radius

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`.

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);

const Example = () => (
  // Wrapper element without a border radius
  <Box>
    <Box borderColor="input" borderRadius="full" borderStyle="solid" borderWidth="thin" height="6rem" width="6rem" />
  </Box>
);

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
    </PlaygroundCard>

    <Flex alignItems="start" flexDirection="column" gap="large">
      {/* With matching borderRadius */}
      <LoadingSkeleton borderRadius="full" isLoading={isLoading}>
        <Example />
      </LoadingSkeleton>

      {/* Without matching borderRadius */}
      <LoadingSkeleton isLoading={isLoading}>
        <Example />
      </LoadingSkeleton>
    </Flex>
  </Flex>
);
```

### Custom dimensions

Wrap layout primitives like `Box` to create skeletons with specific shapes.

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);

return (
  <Flex flexDirection="column" gap="large">
    <PlaygroundCard>
      <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
    </PlaygroundCard>
    <LoadingSkeleton isLoading={isLoading}>
      <Box
        backgroundColor="informativeBold"
        borderRadius="xlarge"
        height={{ xsmall: 50, small: 100, medium: 150 }}
        width={{ xsmall: 50, small: 100, medium: 150 }}
      />
    </LoadingSkeleton>
  </Flex>
);
```

### With LoadingSkeletonProvider

Use the `<LoadingSkeletonProvider />` component to control the loading state for all nested skeletons.

<Notice>
  <Text>
    When using `LoadingSkeleton` inside a `LoadingSkeletonProvider`, avoid setting the `isLoading` prop on individual
    components. The provider will override it.
  </Text>
</Notice>

```tsx live
const [isLoading, setIsLoading] = useState(true);
const toggle = () => setIsLoading((prev) => !prev);

return (
  <LoadingSkeletonProvider isLoading={isLoading}>
    <Flex flexDirection="column" gap="large">
      <PlaygroundCard>
        <Toggle label="Toggle loading" onClick={toggle} size="small" toggled={isLoading} />
      </PlaygroundCard>

      <Flex flexDirection="column" gap="large" maxWidth={400} padding="xlarge">
        <Heading level={1}>
          <LoadingSkeleton>Sign in</LoadingSkeleton>
        </Heading>

        <LoadingSkeleton borderRadius="medium">
          <Field keepSpaceForMessage={false} label="Email address">
            <TextInput placeholder="Enter your email" />
          </Field>
        </LoadingSkeleton>

        <LoadingSkeleton borderRadius="medium">
          <Field keepSpaceForMessage={false} label="Password">
            <TextInput placeholder="Enter your password" />
          </Field>
        </LoadingSkeleton>

        <Flex justifyContent="end">
          <ActionsGroup>
            <LoadingSkeleton>
              <Button label="Create an account" tone="neutral" />
            </LoadingSkeleton>
            <LoadingSkeleton>
              <Button label="Sign in" tone="neutral" />
            </LoadingSkeleton>
          </ActionsGroup>
        </Flex>
      </Flex>
    </Flex>
  </LoadingSkeletonProvider>
);
```

Provides a visual cue that the application is processing data.

Loading

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources