Make your application look nice when its loading!

Downloads in past


555101.0.25 years ago6 years agoMinified + gzip package size for @trainline/react-skeletor in KB


npm license Travis() npm
React Skeletor
React-skeletor gif
Display a skeleton preview of the application's content before the data get loaded.
  • Inject dummy data into the provider
  • Define your loading status with the provider
  • Wrap leaf component with createSkeletorElement and define the style of the component when it is pending. The component will do all the magic for you, it will turn on / off the pending design for you.



Basic usage

  1. Install via npm

npm install @trainline/react-skeletor

  1. Wrap the component (often a container) with the createSkeletonProvider high order component. This adds the loading status and style into the context and inject fake data in the components subtree.

// UserDetailPage.jsx

import { createSkeletonProvider } from '@trainline/react-skeletor';

const UserDetailPage = ({ user }) => (
    <NameCard user={user} />

export default createSkeletonProvider(
  // Dummy data with a similar shape to the component's data
    user: {
      firstName: '_____',
      lastName: '________'
  // Predicate that returns true if component is in a loading state
  ({ user }) => user === undefined,
  // Define the placeholder styling for the children elements,
  () => ({
    color: 'grey',
    backgroundColor: 'grey'

  1. Use a skeleton element to toggle between the placehoder design and the real content depending on the loading status in the context.

// NameCard.jsx

import { createSkeletonElement } from '@trainline/react-skeletor';

const H1 = createSkeletonElement('h1');
const H2 = createSkeletonElement('h2');

const NameCard = ({ firstName, lastName }) => (
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>

export default NameCard;


Before opening any Pull Request please post an issue explaining the problem so that the team can evaluate if the Pull Request is relevant.
Learn more on medium