Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

spin-delay

Package Overview
Dependencies
Maintainers
0
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

spin-delay

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

  • 2.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

spin-delay

All Contributors

Smart Spinner Helper for React

demo animation of spin-delay

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
Stephan Meijer

🤔 💻 🚇 🚧 ⚠️
Peter Hozák
Peter Hozák

🤔 ⚠️
Eric Hosick
Eric Hosick

📖
Supachai Dev
Supachai Dev

💻
Kent C. Dodds
Kent C. Dodds

💻
Phong Chu
Phong Chu

💻
Joe Porpeglia
Joe Porpeglia

💻

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

Keywords

FAQs

Package last updated on 16 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc