smeijer / spin-delay

Smart spinner helper for React, to manage the duration of loading states.

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's Issues

[Feature Request]: Delay mutations

Hey, thanks for the cool library. I wonder if it makes sense to also support delaying mutations. I.e. always showing the spinner for at least 300ms, like in this example? I'd be willing to contribute a PR.

Delay is always ignored on mount (defeating the purpose of delay)

The useIsSSR hook is hardcoded to always return true when the component mounts, which isn't the worst assumption given the state of the React ecosystem.

However, the ssr option is not considered when deciding if the delay option should be respected or not.

This means that the spinner will always show immediately unless you are also using the loading prop you pass in as a backup like the setup below:

Steps to reproduce

1. Have the following:
   • Use useSpinDelay in a component and ensure the options argument at least has { delay: <some value>, ssr: false }
   • A loading useState that will start false and is passed as the loading argument to useSpinDelay
   • A button that will set loading to true, and then adds a timeout for a period of time that will set loading back to false
   • A span/div/etc. that shows the state of loading for verification
2. Ensure the timeout to set loading to false is relatively short (<1 sec) and the delay option is longer (1-2 sec)
3. Click the button

Expected behavior

The loading spinner will not show and the loading verification will show true then false.

Actual behavior

The loading spinner appears immediately and will hide when loading gets set back to false
If the minDuration option is specified, then the spinner will appear for only the full length of the minDuration, not including the delay amount.

---

Unrelated: the code sandbox in the README is really useful! However, it is still using version 0.0.1 by default, which means it doesn't show off the current behaviors properly.

Node version requirements

Does this require node version greater than or equal to 18? I received the following error when I tried to do a yarn add spin-delay:

error @azure/[email protected]: The engine "node" is incompatible with this module. Expected version ">=18.0.0". Got "16.20.2"
error Found incompatible module.