Skeleton

Display a skeleton whilst another component is loading.

Default with Set Width

Code Editor

<Skeleton width={160} />

<Skeleton width={160} />

Default with Box Height

Code Editor

<Skeleton width={160} boxHeight={42} />

<Skeleton width={160} boxHeight={42} />

Wrapping children

If you do not pass a fixed size, it will be calculated automatically.

Code Editor

<Container>
  <Container left>
    <Skeleton>
      <Button>Hidden by skeleton</Button>
    </Skeleton>
  </Container>

  <Container left>
    <Skeleton show={false}>
      <Button>Not hidden by skeleton</Button>
    </Skeleton>
  </Container>
</Container>

<Container>
  <Container left>
    <Skeleton>
      <Button>Hidden by skeleton</Button>
    </Skeleton>
  </Container>
  <Container left>
    <Skeleton show={false}>
      <Button>Not hidden by skeleton</Button>
    </Skeleton>
  </Container>
</Container>

Wrapping children with fixed size

The skeleton will hide when children are not null, but the size is retained.

Code Editor

<Container>
  <Container left>
    <Skeleton width="100%" height={100}>
      {null}
    </Skeleton>
  </Container>

  <Container left>
    <Skeleton width="100%" height={100}>
      <Button>Not hidden by Skeleton</Button>
    </Skeleton>
  </Container>
</Container>

<Container>
  <Container left>
    <Skeleton width="100%" height={100}>
      {null}
    </Skeleton>
  </Container>
  <Container left>
    <Skeleton width="100%" height={100}>
      <Button>Not hidden by Skeleton</Button>
    </Skeleton>
  </Container>
</Container>

Rounded

Code Editor

<Skeleton rounded width={48} height={48} boxHeight={48} />

<Skeleton rounded width={48} height={48} boxHeight={48} />

Squared

Code Editor

<Skeleton squared width={48} height={48} boxHeight={48} />

<Skeleton squared width={48} height={48} boxHeight={48} />