trainline / react-skeletor

Skeleton loading for React

React Skeletor

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.

Demo

Documentation

Basic usage

1. Install via npm

npm install @trainline/react-skeletor

2. 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 }) => (
  <div>
    ...
    <NameCard user={user} />
    ...
  </div>
)

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'
  })
)(UserDetailPage);

3. 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 }) => (
  <div>
    <H1 style={style}>{ firstName }</H1>
    <H2 style={style}>{ lastName }</H2>
  </div>
)

export default NameCard;

Contribute

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

react-skeletor's Issues

Copy non-react specific statics to decorated component

Redux and other modules with a React API are using hoist-non-react-statics to copy non-react specific statics to the decorated component.

Add demo on codesandbox.io?

Is it possible to link to a demo from the Readme?
Will help to understand the value proposition and usage.
Thanks!

createSkeletonElement typing only accepts stateless components.

It has no real reason to do so though, the exact component type is of no relevance to skeletor, as it passes the argument down to createElement eitherway.

Upgrade to typescript 2.4

Upgrade to typescript 2.4 and fix the types (See todos in the source files)

Connector API to access isPending

I'm starting to use react-skeletor, and I'm missing something in the API: a connector to access the isPending and have my own logic of rendering, for example a component to render an avatar:

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

@connectSkeleton(({ isPending }) => ({
    isPending
})
class Avatar extends React.Component {
    render() {
         const { isPending } = this.props;

         return isPending ? <div></div> : <a href="...">...</a>
    }
}

Currently, I can directly use contextTypes and get the skeleton context, but this is a not recommended API by React.

At some point, it may requires a subscribing schema in the context instead of storing the values directly.

Will you be willing to accept a connectSkeleton API ? (I can make a PR)

i want to use class to return from createSkeletonProvider for element styling

In the place of createSkeletonProvider's third argument which is element style. i want return class name in place of style. please suggest somethink

createSkeletonElement for images switch onLoad

Is it possible to make it so that when you create a skeleton element for an image tag, that it waits for the onLoad event to occur before switching? Or for there to be a manual keep on skeleton state as a prop?

Basically I'd like to be able to have my component wait for the image source to be passed down from a fetch, then wait until the onLoad event has occurred and then switch to show the image. Otherwise, there is a flash.

Could not find declaration file for prop-types

In a TypeScript project, this compilation error appears because @types/prop-types is listed as a devDependency, but is exported in utils.d.ts for consumption.

#14

What happen when a framework like material-ui is used?

Hi,

I have been playing with your react-skeletor, it's a great solution btw, but what happen when there is not complete domain of the elements of the dom like in material-ui that has useful component? Can we still be able to use react-skeletor? How?

Thank you very much!

Allow passing function for styling skeleton element

createSkeletonElement only accept Object or string for now

Any examples using with Redux?

As above, any examples where the HOC (createSkeletonProvider) is wrapped in a connect() perhaps?

My component will dispatch during componentWillMount if the data is not present, which doesn't seem compatible with dummyData method.

Skeleton elements don't have displayName property

Testing libraries, such as enzyme rely on the displayName property to be able successfully find a component after rendering see example documentation here.

Currently react-skeletor does not set this property making it difficult to use with testing libraries such as enzyme.

We can use a similar technique used by styled-components to set the displayName

@alex3165 I have tested this out and I'm happy to put this in a PR.
I also work for Trainline :)

Add optional stylesheet

It would be convenient to ship this package with an optional stylesheet for styling a basic skeleton screen.

import { createSkeletonProvider } from 'react-skeletor';
import 'react-skeletor/css/index.css';

export default createSkeletonProvider(
   dummyData,
   (props) => props.loading,
    'react-skeletor',
)(App);

/*  react-skeletor/css/index.css */
@keyframes progress {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}
.react-skeletor {
    animation: progress 1.2s ease-in-out infinite;
    color: rgba(0, 0, 0, 0.0);
    background-color: #eee;
    background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
    background-repeat: no-repeat;
    border-radius: 4px;
}