@acctglobal/skeleton v1.0.0

Installation

yarn add @acctglobal/skeleton
npm install @acctglobal/skeleton

import { Skeleton } from '@acctglobal/skeleton'
import '@acctglobal/skeleton/src/styles/animation.css' // Import if you want to use animation prop

<Skeleton /> // Simple, single-line loading skeleton
<Skeleton count={5} /> // Five-lines loading skeleton
<Skeleton table={ rows: 4, columns: 4 } /> // Four-rows and four-columns loading skeleton table
<Skeleton responsiveImage={{ srcWidth: 1280, srcHeight: 650 }} /> // A fake responsive image with 1280px x 650px originally

Pre-defined classes

The Skeleton can be fully customized from props. But if you want something even more specific, you can use the predefined classes. Are they:

• skeleton-container (the outermost level of skeleton);
• skeleton-wrapper (the wrappers generated from the prop count);
• skeleton-table (the table generated from the prop table);
• skeleton-animation (the div generated from the prop animation).

Props Reference

All props are optional

Examples

Wrappers in Skeleton

The default height of wrappers is 1em, but you can change using the prop height.

const BlogPost = (props) => {
  return (
    <div>
      <h1>
        {props.title || (
          <Skeleton
            height="2em"
            placeholder="Loading..."
            placeholderPosition={{ horizontal: 'center', vertical: 'center' }}
            animation
          />
        )}
      </h1>
      {props.body || <Skeleton count={10} animation />}
    </div>
  )
}

Table in Skeleton

Generate tables while yours does not load:

const BlogPost = (props) => {
  return props.myCells.lenght > 0 ? (
    <table>
      <tbody>
        <tr>
          <td>{props.myCells[0]}</td>
          <td>{props.myCells[1]}</td>
          <td>{props.myCells[2]}</td>
        </tr>
        <tr>
          <td>{props.myCells[3]}</td>
          <td>{props.myCells[4]}</td>
          <td>{props.myCells[5]}</td>
        </tr>
        <tr>
          <td>{props.myCells[6]}</td>
          <td>{props.myCells[7]}</td>
          <td>{props.myCells[8]}</td>
        </tr>
      </tbody>
    </table>
  ) : (
    <Skeleton table={{ rows: 3, columns: 3 }} animation />
  )
}

Responsive Images in Skeleton

You can also generate several responsive images, with defined breakpoints (no limits for the number of responsive images):

const BlogPost = (props) => {
  return props.image ? (
    <img
      src={
        props.myScreenWidth <= 768 ? props.image.mobile : props.image.desktop
      }
      alt={props.imageTitle}
      width="100%"
    />
  ) : (
    <Skeleton
      responsiveImage={[
        { srcWidth: 400, srcHeight: 300, breakIn: 768 },
        { srcWidth: 1980, srcHeight: 720 }
      ]}
      animation
    />
  )
}

If you are using SSR and need to render different images for each viewport type, you can render multiple skeletons and style them with css. it's not possible to use the user's screen size in the SSR, but using the media query it works normally. Follow this example:

import './style.scss'

const BlogPost = (props) => {
  if (typeof window === 'undefined') {
    return (
      <div className="loading">
        <Skeleton responsiveImageSSR={{ srcWidth: 320, srcHeight: 212 }} />
        <Skeleton responsiveImageSSR={{ srcWidth: 1920, srcHeight: 632 }} />
      </div>
    )
  }

  if (typeof window !== 'undefined') {
    return (
      <img
        src={width < 768 ? props.image.mobile : props.image.desktop}
        alt={props.imageTitle}
        width="100%"
      />
    )
  }
}

.loading {
  .skeleton-container:nth-child(1) {
    @media (min-width: 768px) {
      display: none;
    }
  }

  .skeleton-container:nth-child(2) {
    @media (max-width: 767px) {
      display: none;
    }
  }
}

The props placeholderPosition ~and animation~ don't working corretly with SSR. Wait for more atts. Animation working with SSR.