Skeleton

Text initial loading

tsx

import React from 'react';
import { Text } from 'intergalactic/typography';
import Skeleton from 'intergalactic/skeleton';

class Demo extends React.PureComponent {
  width = 600;
  height = 100;
  timerFetch: any = -1;
  timer: any = -1;

  state = { loading: true };

  componentDidMount() {
    this.timerFetch = setInterval(this.fetchData, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.timerFetch);
    clearInterval(this.timer);
  }

  fetchData = () => {
    this.setState({ loading: false });
    setTimeout(() => {
      this.timer = this.setState({ loading: true });
    }, 1000);
  };

  render() {
    const { loading } = this.state;

    return (
      <div style={{ width: `${this.width}px`, height: `${this.height}px` }}>
        {!loading && (
          <Text size={100}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam atque beatae
            distinctio doloremque, et id quae reiciendis repellat saepe sapiente sequi veritatis.
            Adipisci, consequuntur excepturi nobis porro quas recusandae?
          </Text>
        )}
        <Skeleton hidden={!loading} height={this.height}>
          <Skeleton.Text amount={2} />
          <Skeleton.Text y='40' width='60%' />
        </Skeleton>
      </div>
    );
  }
}

export default Demo;

import React from 'react';
import { Text } from 'intergalactic/typography';
import Skeleton from 'intergalactic/skeleton';

class Demo extends React.PureComponent {
  width = 600;
  height = 100;
  timerFetch: any = -1;
  timer: any = -1;

  state = { loading: true };

  componentDidMount() {
    this.timerFetch = setInterval(this.fetchData, 3000);
  }

  componentWillUnmount() {
    clearInterval(this.timerFetch);
    clearInterval(this.timer);
  }

  fetchData = () => {
    this.setState({ loading: false });
    setTimeout(() => {
      this.timer = this.setState({ loading: true });
    }, 1000);
  };

  render() {
    const { loading } = this.state;

    return (
      <div style={{ width: `${this.width}px`, height: `${this.height}px` }}>
        {!loading && (
          <Text size={100}>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam atque beatae
            distinctio doloremque, et id quae reiciendis repellat saepe sapiente sequi veritatis.
            Adipisci, consequuntur excepturi nobis porro quas recusandae?
          </Text>
        )}
        <Skeleton hidden={!loading} height={this.height}>
          <Skeleton.Text amount={2} />
          <Skeleton.Text y='40' width='60%' />
        </Skeleton>
      </div>
    );
  }
}

export default Demo;

Usage with other elements

tsx

import React from 'react';
import Skeleton from 'intergalactic/skeleton';

const Demo = () => {
  return (
    <Skeleton>
      <circle cx='30' cy='30' r='30' />
      <rect x='70' y='0' rx='4' ry='4' width='20%' height='38' />
      <rect x='70' y='50' rx='4' ry='4' width='60%' height='8' />
      <rect x='0' y='70' rx='4' ry='4' height='250' width='100%' />
    </Skeleton>
  );
};

export default Demo;

import React from 'react';
import Skeleton from 'intergalactic/skeleton';

const Demo = () => {
  return (
    <Skeleton>
      <circle cx='30' cy='30' r='30' />
      <rect x='70' y='0' rx='4' ry='4' width='20%' height='38' />
      <rect x='70' y='50' rx='4' ry='4' width='60%' height='8' />
      <rect x='0' y='70' rx='4' ry='4' height='250' width='100%' />
    </Skeleton>
  );
};

export default Demo;

Skeleton examples for charts

Use h={100} and w={100} to adjust the height and width of the skeleton.

tsx

import React from 'react';
import Card from 'intergalactic/card';
import {
  LineChartSkeleton,
  AreaChartSkeleton,
  BarChartSkeleton,
  VennChartSkeleton,
  ScatterPlotChartSkeleton,
  BubbleChartSkeleton,
  RadialTreeChartSkeleton,
  HistogramChartSkeleton,
  DonutChartSkeleton,
} from 'intergalactic/skeleton';

const Demo = () => {
  return (
    <>
      <Card mb={5}>
        <Card.Header>
          <Card.Title>LineChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <LineChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>LineChart skeleton (type=monotone)</Card.Title>
        </Card.Header>
        <Card.Body>
          <LineChartSkeleton type='monotone' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>AreaChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <AreaChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>AreaChart skeleton (type=monotone)</Card.Title>
        </Card.Header>
        <Card.Body>
          <AreaChartSkeleton type='monotone' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BarChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <BarChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BarChart skeleton (layout=vertical)</Card.Title>
        </Card.Header>
        <Card.Body>
          <BarChartSkeleton layout='vertical' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>HistogramChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <HistogramChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>HistogramChart skeleton (layout=vertical)</Card.Title>
        </Card.Header>
        <Card.Body>
          <HistogramChartSkeleton layout='vertical' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>DonutChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <DonutChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>DonutChart skeleton (halfsize)</Card.Title>
        </Card.Header>
        <Card.Body>
          <DonutChartSkeleton halfsize />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>ScatterPlotChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <ScatterPlotChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BubbleChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <BubbleChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>VennChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <VennChartSkeleton />
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <Card.Title>RadialTreeChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <RadialTreeChartSkeleton />
        </Card.Body>
      </Card>
    </>
  );
};

export default Demo;

import React from 'react';
import Card from 'intergalactic/card';
import {
  LineChartSkeleton,
  AreaChartSkeleton,
  BarChartSkeleton,
  VennChartSkeleton,
  ScatterPlotChartSkeleton,
  BubbleChartSkeleton,
  RadialTreeChartSkeleton,
  HistogramChartSkeleton,
  DonutChartSkeleton,
} from 'intergalactic/skeleton';

const Demo = () => {
  return (
    <>
      <Card mb={5}>
        <Card.Header>
          <Card.Title>LineChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <LineChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>LineChart skeleton (type=monotone)</Card.Title>
        </Card.Header>
        <Card.Body>
          <LineChartSkeleton type='monotone' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>AreaChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <AreaChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>AreaChart skeleton (type=monotone)</Card.Title>
        </Card.Header>
        <Card.Body>
          <AreaChartSkeleton type='monotone' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BarChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <BarChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BarChart skeleton (layout=vertical)</Card.Title>
        </Card.Header>
        <Card.Body>
          <BarChartSkeleton layout='vertical' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>HistogramChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <HistogramChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>HistogramChart skeleton (layout=vertical)</Card.Title>
        </Card.Header>
        <Card.Body>
          <HistogramChartSkeleton layout='vertical' />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>DonutChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <DonutChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>DonutChart skeleton (halfsize)</Card.Title>
        </Card.Header>
        <Card.Body>
          <DonutChartSkeleton halfsize />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>ScatterPlotChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <ScatterPlotChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>BubbleChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <BubbleChartSkeleton />
        </Card.Body>
      </Card>

      <Card mb={5}>
        <Card.Header>
          <Card.Title>VennChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <VennChartSkeleton />
        </Card.Body>
      </Card>

      <Card>
        <Card.Header>
          <Card.Title>RadialTreeChart skeleton</Card.Title>
        </Card.Header>
        <Card.Body>
          <RadialTreeChartSkeleton />
        </Card.Body>
      </Card>
    </>
  );
};

export default Demo;

Accessibility

Writing code

CSS Injection

Text initial loading

Usage with other elements

Skeleton examples for charts

Accessibility

CSS Injection

Skeleton

Text initial loading ​

Usage with other elements ​

Skeleton examples for charts ​

Text initial loading

Usage with other elements

Skeleton examples for charts