@ultraq/react-deferred-loader

react-deferred-loader

Delay the rendering of a loader animation/component by 1 second. This is useful for not prematurely putting users into a "passive" state of waiting that a loader normally signals, thus giving the appearance of a faster web application.

Inspired by this talk by Eli Fitch about perceived performance: https://twitter.com/elifitch/status/1047187122229321728

Installation

npm install @ultraq/react-deferred-loader

Usage

The <DeferredLoader> takes a single child function that is passed a boolean value of whether the 1 second has elapsed (true) or not (false), eg:

import DeferredLoader from '@ultraq/react-deferred-loader';

<DeferredLoader>
  {showLoader => showLoader ? (
    /* Render your loading component here */
  ) : null}
</DeferredLoader>