Skeleton

Purpose

Skeleton loading states provide an indication that the application is actively loading, as well as feedback about how and where content will be placed when fully loaded.

These are best used for content-rich layouts, such as a video grid, transcript, or meetings list.

SkeletonText

Use the SkeletonText component to represent text that is loading.

Usage

import {SkeletonText} from '@loomhq/lens'
<SkeletonText lines={1} size="body-md" />

Sizes

<>
  {availableSizes.map((size, index) => (
    <SkeletonText size={size} key={index} />
  ))}
</>

Number of lines

<SkeletonText lines={3} />

Animation

Use the animated prop to indicate that loading is actively happening.

<SkeletonText lines={3} animated={true} />

SkeletonContainer

The SkeletonContainer is used to represent non-text elements of a UI, such as an avatar, icon or thumbnail.

Usage

import {SkeletonContainer} from '@loomhq/lens'
<SkeletonContainer />

Setting height, width, and radius

The styling of the SkeletonContainer is limited to setting the height, width, and border radius.

  <Split gap="large">
    <SkeletonContainer animated={true} />
    <SkeletonContainer height="24px" width="24px" radius="large" animated={true} />
    <SkeletonContainer height="1rem" width="32px" radius="medium" animated={true} />
  </Split>

Animation

Just like SkeletonText, you can use the animated prop to indicate that loading is actively happening.

  <Split gap="large">
    <SkeletonContainer />
    <SkeletonContainer animated={true} />
  </Split>

Combining SkeletonText and SkeletonContainer

While useful on their own, SkeletonText and SkeletonContainer can be combined to represent richer UI elements.

  <Container padding="large" radius="large" borderSide="all" borderColor="border">
    <SkeletonContainer animated={true} />
    <Spacer bottom="medium" />
    <SkeletonText lines={2} animated={true} />
  </Container>

Props

SkeletonText

SkeletonContainer