react-loading-delay
⛔️ Warning: This library will be unnecessary when Async React is released, as this is a feature that will be implemented in it. Most likely in a different way, but it will not be difficult to switch over to that hopefully. If you want more information, just go and watch the latest talk from Dan Abramov from jsconf.
Sometimes you want to display a Loading Component in your UI longer than a flicker.
With this component you can delay the rendering for as long as you need.
API
Input Props
Propname | Type | required | Description |
---|---|---|---|
check |
boolean | true | When this prop is true the delay will be started. |
delay |
number | true | delay in milliseconds |
children |
function | true | Function that gets the output props |
Output Props
Propname | Type | Description |
---|---|---|
isLoading |
boolean | This prop is a mirror of the check prop |
isDelaying |
boolean | This prop will be true until the delay is over. |
Example
This library is fascilitating a pattern called Render Props (Read more about it here) which requires a function as a prop:
; const loading = true; <LoadingDelay check=loading delay=3000> { if isDelaying return 'UI being delayed'; if isLoading return 'Data still loading after delay'; return 'Loading and delay done'; }</LoadingDelay>
So what happens here is when the value passed in the check
prop is true
, the delay will be initiated. The passed down prop named isLoading
will mirror this value passed into the component, meanwhile isDelaying
will return true
.
When the delay is over, isDelaying
will be returned as false
and the content of the child function will be re-rendered.
This package does not take care of fetching data, it is just facilitating a small delay for the UI to prevent pesky flickers.
Apollo Client
Example withHere is a simple example with the Apollo Client GraphQL Query
Component and how this would interact with each other. It can be integrated nicely into the all around workflow with react-apollo
.
;; <Query query=GET_TODOS> { return <LoadingDelay check=loading delay=1000> { if isDelaying || isLoading return 'UI being delayed for 1s or GraphQL still querying after delay'; return 'Loading and delay done'; } </LoadingDelay> ; }</Query>