Skeleton Image

Use the SkeletonImage component to simiulate images, illustrations, avatars or icons whenever loading asynchronous data.

<SkeletonContainer>
  <SkeletonImage />
</SkeletonContainer>
<SkeletonContainer>
  <SkeletonImage />
</SkeletonContainer>
Hide source

Best practices

• Each SkeletonImage needs to be wrapped by a SkeletonContainer component.
• Pass some value to the width and height props to make the skeleton the same size as the simulated image (default values are 70). You can use the same values a normal <rect> tag would accept for width and height

<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage width={100} height={35} />
  </SkeletonContainer>
</>
<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage width={100} height={35} />
  </SkeletonContainer>
</>
Hide source

• Pass some value to the radiusX and radiusY props to control the roundness of skeleton's corners (default values are 0). You can use the same values a normal <rect> tag would accept for rx and ry

<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage radiusX={100} radiusY={100} />
  </SkeletonContainer>
</>
<>
  <SkeletonContainer>
    <SkeletonImage />
  </SkeletonContainer>
  <SkeletonContainer>
    <SkeletonImage radiusX={100} radiusY={100} />
  </SkeletonContainer>
</>
Hide source