spin-delay

Smart Spinner Helper for React

There are a few annoyances when working with spinners. Network request can be so fast that rendering a spinner does more harm than good. Why render a spinner when loading the data only takes like 50ms?

This can be fixed by adding a delay. Only show the spinner when the request takes longer than 200ms for example. And what happens when the request takes 210ms? Right, we see a spinner for 10ms. This flicker can be annoying.

spin-delay solves these issues by wrapping your booleans, and only returning true after the delay, and for a minimum time of minDuration. This way you're sure that you don't show unnecessary or very short living spinners.

Demo

Sandbox -> https://codesandbox.io/s/spin-delay-jlp2c

Installation

With npm:

npm install --save spin-delay

With yarn:

yarn add spin-delay

API

The examples below use the following data object:

import { useSpinDelay } from 'spin-delay';

function MyComponent() {
  const [{ loading }] = useFetch('http://example.com');

  // options are optional, and default to these values
  const showSpinner = useSpinDelay(loading, { delay: 500, minDuration: 200 });

  if (showSpinner) {
    return <Spinner />;
  }

  // ...
}

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Stephan Meijer 🤔 💻 🚇 🚧 ⚠️

Peter Hozák 🤔 ⚠️

Eric Hosick 📖

Supachai Dev 💻

Kent C. Dodds 💻

Phong Chu 💻

Joe Porpeglia 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

spin-delay

2.0.1

Patch Changes

• f380792 Thanks @smeijer! - Fixes the initial delay used when options.ssr is false.

2.0.0

Major Changes

• #8 1b81585 Thanks @smeijer! - We now support spinner initialization from the server (SSR). When the loading prop is true due to server-side rendering, the spinner will be shown immediately. You can opt-out of this behavior by setting the ssr option to false.

  import { useSpinDelay } from 'spin-delay';
  
  const spin = useSpinDelay(loading, {
    ssr: false, // defaults to true
  });

• #6 3d4f4d5 Thanks @smeijer! - We've to removed the default export. Please update your code to use the named export instead. This is a breaking change, but it's a minor one. Chances are that you're already using the named export, and you don't have to do anything.

  - import useSpinDelay from 'spin-delay';
  + import { useSpinDelay } from 'spin-delay';