1.0.8 • Public • Published

react-loading-delay npm version

⛔️ 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.


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.


This library is fascilitating a pattern called Render Props (Read more about it here) which requires a function as a prop:

import LoadingDelay from 'react-loading-delay';
const loading = true;
<LoadingDelay check={loading} delay={3000}>
  {({ isLoading, isDelaying }) => {
    if (isDelaying) return 'UI being delayed';
    if (isLoading) return 'Data still loading after delay';
    return 'Loading and delay done';

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.

Example with Apollo Client

Here 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.

import { Query } from 'react-apollo';
import LoadingDelay from 'react-loading-delay';
<Query query={GET_TODOS}>
  {({ loading, data }) => {
    return (
      <LoadingDelay check={loading} delay={1000}>
        {({ isLoading, isDelaying }) => {
          if (isDelaying || isLoading) return 'UI being delayed for 1s or GraphQL still querying after delay';
          return 'Loading and delay done';

Package Sidebar


npm i react-loading-delay

Weekly Downloads






Unpacked Size

9.85 kB

Total Files


Last publish


  • saifadin