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
createSkeletorElementand 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
- Install via npm
npm install @trainline/react-skeletor
- Wrap the component (often a container) with the
createSkeletonProviderhigh 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);- 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.