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
npm install @ultraq/react-deferred-loader
<DeferredLoader> takes a single child function that is passed a boolean
value of whether the 1 second has elapsed (
true) or not (
import DeferredLoader from '@ultraq/react-deferred-loader';<DeferredLoader>showLoader ?/* Render your loading component here */: null</DeferredLoader>