Skeleton loading for React
Display a skeleton preview of the application's content before the data get loaded.
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.npm install @trainline/react-skeletor
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);
// 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;
Before opening any Pull Request please post an issue explaining the problem so that the team can evaluate if the Pull Request is relevant.