LoadingState

A loading overlay that blocks user interaction on a specific element while displaying a spinner.

Design guidance

When and how to use this

Use LoadingState to indicate that an action or request is in progress, and the user cannot interact with the container until it is complete. Some examples include:

Loading an image or multimedia content
Preventing a user from editing a form that is being submitted

When to consider something else

If the action is triggered with a Button, setting isLoading on the button may be sufficient. To implement a more custom loading state with a spinner, use a [Loader] directly. If you need to block the entire page while loading, use LoadingOverlay.

React

import { LoadingState } from '@hoverinc/design-system-react-web';

Render the LoadingState component itself unconditionally using the isLoading prop to control its open state. Provide an accessible label to describe the pending action.

Note

Make sure to set position on the parent element as LoadingState is positioned absolutely.

live

() => {
  const [isLoading, { on, off }] = useBoolean();
  useEffect(() => {
    if (!isLoading) return undefined;
    const id = setTimeout(off, 2000);
    return () => clearTimeout(id);
  }, [isLoading, off]);
  return (
    <Form
      backgroundSize="cover"
      bg="url('/images/kitten--300-200.jpg')"
      onSubmit={event => {
        event.preventDefault();
        on();
      }}
      p="300"
      position="relative"
      rounded="300"
      shadow="distance100"
      spacing="300"
      maxWidth="800"
    >
      <TextInput iconBefore={iconMail} placeholder="Email" />
      <Button iconBefore={iconSend} size="large" type="submit">
        Submit
      </Button>
      <LoadingState isLoading={isLoading} size="large" />
    </Form>
  );
};

Progress

By default, the loading state uses the brand loader. You can switch over to a FauxProgress version via the variant prop with a value of progress to also display the progress loader. It also takes in some optional props for controlling the duration as well as

live

<Center
  rounded="300"
  overflow="hidden"
  position="relative"
  display="inline-flex"
  width="800px"
>
  <Image
    src="/images/kitten--2160-1080.jpg"
    width="100%"
    height="100%"
    objectFit="cover"
  />
  <LoadingState
    isLoading
    variant="progress"
    duration={10}
    loadingTexts={[
      'Lets get started...',
      'Here we go...',
      'Almost there...',
      'Helpful tips!',
    ]}
  />
</Center>

Size

Size defaults to medium and supports the same sizes as Icon.

live

<Center
  rounded="300"
  overflow="hidden"
  position="relative"
  display="inline-flex"
>
  <Image src="/images/kitten--2160-1080.jpg" maxWidth="800" width="100%" />
  <LoadingState
    color="burlywood"
    isLoading
    size={{ base: 'large', mobile: 'huge' }}
  />
</Center>

LoadingOverlay

Design System

Settings

LoadingState

Design guidance

When and how to use this

When to consider something else

React

Note

Progress

Size