Skeleton

Introduction

Skeleton provides elements that can be used as placeholders while your content is loading. The idea is that the interface should "jump" as little as possible, which you often can get with loading spinners.

• <Skeleton repeat={N}> Repeats its children N times
• <Skeleton.Text /> Text line (size follows text height)
• <Skeleton.Rect /> Rectangle (any arbitrary size)
• <Skeleton.CardImage /> Used in place of <Card.Image />

Placeholder for text

Let's say you have some content loading that should render as a heading and a paragraph with a couple of lines of text, you can create equivalent placeholders while waiting for the data to load.

<h2>
  <Skeleton.Text width='40%' />
</h2>
<p>
  <Skeleton.Text />
  <Skeleton.Text width='70%' />
</p>
<h2>
  <Skeleton.Text width='40%' />
</h2>
<p>
  <Skeleton.Text />
  <Skeleton.Text width='70%' />
</p>

Combinations

Cards

In combination with other components, like <Card> you can create a wireframe of how your page will look before any data has been received.

<AutoCol>
  <Skeleton repeat={4}>
    <Card>
      <Skeleton.CardImage />
      <Card.Title>
        <Skeleton.Text width="70%" />
      </Card.Title>
      <Card.Content>
        <Skeleton.Text />
        <Skeleton.Text width="60%" />
      </Card.Content>
    </Card>
  </Skeleton>
</AutoCol>
<AutoCol>
  <Skeleton repeat={4}>
    <Card>
      <Skeleton.CardImage />
      <Card.Title>
        <Skeleton.Text width="70%" />
      </Card.Title>
      <Card.Content>
        <Skeleton.Text />
        <Skeleton.Text width="60%" />
      </Card.Content>
    </Card>
  </Skeleton>
</AutoCol>

Table cells

By default, HTML tables stretch columns to acommodate the content of its cells. In order to avoid "jumping" on load you can apply widths to table header cells.

<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell width="30%">Navn</Table.HeaderCell>
      <Table.HeaderCell width="40%">Tittel</Table.HeaderCell>
      <Table.HeaderCell width="30%">Avdeling</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {/* content to be replaced with real data, assuming three rows */}
    <Skeleton repeat={3}>
      <Table.Row>
        <Skeleton repeat={3}>
          <Table.Cell>
            <Skeleton.Text />
          </Table.Cell>
        </Skeleton>
      </Table.Row>
    </Skeleton>
  </Table.Body>
</Table>
<Table>
  <Table.Header>
    <Table.Row>
      <Table.HeaderCell width="30%">Navn</Table.HeaderCell>
      <Table.HeaderCell width="40%">Tittel</Table.HeaderCell>
      <Table.HeaderCell width="30%">Avdeling</Table.HeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {/* content to be replaced with real data, assuming three rows */}
    <Skeleton repeat={3}>
      <Table.Row>
        <Skeleton repeat={3}>
          <Table.Cell>
            <Skeleton.Text />
          </Table.Cell>
        </Skeleton>
      </Table.Row>
    </Skeleton>
  </Table.Body>
</Table>

Sandbox

import { useState, useEffect } from "react";
import Skeleton from "@intility/bifrost-react/Skeleton";
import Button from "@intility/bifrost-react/Button";
import Card from "@intility/bifrost-react/Card";
import AutoCol from "@intility/bifrost-react/AutoCol";

export default function SkeletonDemo() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setLoading(false);
    }, 2000);

    return () => clearTimeout(timeout);
  }, [loading]);

  return (
    <>
      <Button style={{ marginBottom: "16px" }} onClick={() => setLoading(true)}>
        Start simulation
      </Button>
      <AutoCol>
        <Skeleton repeat={3}>
          {loading && (
            <Card>
              <Skeleton.CardImage />
              <Card.Title>
                <Skeleton.Text width="40%" />
              </Card.Title>
              <Card.Content>
                <Skeleton.Text />
              </Card.Content>
            </Card>
          )}

          {!loading && (
            <Card>
              <Card.Image url="https://picsum.photos/id/152/100/100" />
              <Card.Title>Title here</Card.Title>
              <Card.Content>Text here Text here Text here</Card.Content>
            </Card>
          )}
        </Skeleton>
      </AutoCol>
    </>
  );
}