Skeleton React Component

Skeleton Components
Skeleton Properties
Examples

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) are basically "gray box" representations of UI that will be available soon. They are designed to improve perceived performance.

Skeleton React component represents Skeleton component.

Skeleton Components

There are following components included:

SkeletonBlock
SkeletonText

Skeleton Properties

Prop	Type	Default	Description
<SkeletonBlock> properties
string number	string		Skeleton block width
string number	string		Skeleton block height
tag	string	div	Skeleton block tag
<SkeletonText> properties
string number	string		Skeleton text element width
string number	string		Skeleton text element height
tag	string	span	Skeleton text element tag

Examples

class AppComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      loading: false,
      effect: null,
    };
  }
  load(effect) {
    var self = this;
    if (self.state.loading) return;
    self.setState({
      effect: effect,
      loading: true,
    });
    setTimeout(() => {
      self.setState({ loading: false });
    }, 3000);
  }
  render() {
    return (
      <App>
        <View main>
          <Page>
            <Navbar title="Menu" />

            <BlockTitle>Skeleton List</BlockTitle>
            <List mediaList className="skeleton-text">
              <ListItem
                title="Title"
                subtitle="Subtitle"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
              >
                <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
              </ListItem>
              <ListItem
                title="Title"
                subtitle="Subtitle"
                text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum."
              >
                <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
              </ListItem>
            </List>

            <BlockTitle>Skeleton Card</BlockTitle>
            <Card
              className="skeleton-text"
              title="Card Header"
              content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit."
              footer="Card Footer"
            ></Card>

            <BlockTitle>Loading Effects</BlockTitle>
            <Block strong>
              <Row tag="p">
                <Button fill small round className="col" onClick={() => this.load('fade')}>Fade</Button>
                <Button fill small round className="col" onClick={() => this.load('blink')}>Blink</Button>
                <Button fill small round className="col" onClick={() => this.load('pulse')}>Pulse</Button>
              </Row>
            </Block>
            {this.state.loading
              ? (
                <List mediaList v-if="loading">
                  {[1,2,3].map(n => (
                    <ListItem
                      key={n}
                      className={`skeleton-text skeleton-effect-${this.state.effect}`}
                      title="Full Name"
                      subtitle="Position"
                      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
                    >
                      <SkeletonBlock style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
                    </ListItem>
                  ))}
                </List>
              )
              : (
                <List mediaList>
                  <ListItem
                    title="John Doe"
                    subtitle="CEO"
                    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis et massa ac interdum. Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
                  >
                    <img src="https://placeimg.com/80/80/people/1" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
                  </ListItem>
                  <ListItem
                    title="Jane Doe"
                    subtitle="Marketing"
                    text="Cras consequat felis at consequat hendrerit. Aliquam vestibulum vitae lorem ac iaculis. Praesent nec pharetra massa, at blandit lectus. Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
                  >
                    <img src="https://placeimg.com/80/80/people/2" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
                  </ListItem>
                  <ListItem
                    title="Kate Johnson"
                    subtitle="Admin"
                    text="Sed tincidunt, lectus eu convallis elementum, nibh nisi aliquet urna, nec imperdiet felis sapien at enim."
                  >
                    <img src="https://placeimg.com/80/80/people/3" style={{ width: '40px', height: '40px', 'border-radius': '50%' }} slot="media" />
                  </ListItem>
                </List>
              )
            }
          </Page>
        </View>
      </App>
    )
  }
}