https://github.com/smeijer/spin-delay
Smart spinner helper for React, to manage the duration of loading states.
https://github.com/smeijer/spin-delay
hacktoberfest react spinner
Last synced: 23 days ago
JSON representation
Smart spinner helper for React, to manage the duration of loading states.
- Host: GitHub
- URL: https://github.com/smeijer/spin-delay
- Owner: smeijer
- License: mit
- Created: 2020-11-25T15:12:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-25T20:21:51.000Z (about 1 year ago)
- Last Synced: 2024-05-02T02:10:23.597Z (about 1 year ago)
- Topics: hacktoberfest, react, spinner
- Language: JavaScript
- Homepage:
- Size: 706 KB
- Stars: 285
- Watchers: 3
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# spin-delay
[](#contributors-)
**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:
```sh
npm install --save spin-delay
```
With yarn:
```sh
yarn add spin-delay
```
## API
The examples below use the following data object:
```jsx
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 ;
}
// ...
}
```
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Stephan Meijer
🤔 💻 🚇 🚧 ⚠️
Peter Hozák
🤔 ⚠️
Eric Hosick
📖
Supachai Dev
💻
Kent C. Dodds
💻
Phong Chu
💻
Joe Porpeglia
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!