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.
