@rexlabs-spicerhaart/render-loading v0.1.12

Render Loading - Heidi Component

RenderLoading is a component that manages the switch between a loading view and the content that will be viewed after the loading is finished, as well as dealing with rendering error states.

Content is rendered invisibly by default, however for large items that might extend passed the screen and show a scroll bar the alwaysRenderChildren prop can be set to false. The component will set the height of the loading container to the initial height of the component, however after some data has been loaded this height could change so it recalculates the height to the components new height before it transitions back in.

The 'switchingThreshold' prop also acts as a minimum load time for the component, by default it is set to 50ms to stop a jittery effect if isLoading is switched between false and true several times in a row.

For lists a different component called 'RenderLoadingList' can be used that has the extra props 'isListLoading', 'ListLoadingView' and 'ListErrorView'.

Caveats

For RenderLoadingList you should only ever set either 'isLoading' or 'isListLoading' to true at any given time, for this component to work correctly.

The content will default to having an opacity of 0 so that it is not visible while loading and 'alwaysRenderChildren' is true. It is advisable to keep this setting as otherwise you have to set an explicit background color which can sometimes not cover the whole element. This does mean that if you customise your animation you will need to set an opacity of 1 for the final state of the animation.

E.g. if you are translating the element from off the page and you want it to be visible as soon as it is on screen you would do something like this:

const animation = keyframes({
  '0%': {
    opacity: 1,
    transform: 'translateX(-1000px)'
  },
  '100%': {
    opacity: 1,
    transform: 'translateX(0px)'
  }
})

Development

Install dependencies

$ yarn

Available Commands

$ yarn start              # starts storybook, for visually testing render-loading
$ yarn test               # runs all units tests
$ yarn test:watch         # runs unit tests when files change
$ yarn build              # bundles the package for production

Legal

Copyright © 2018 Rex Software All Rights Reserved.