• Stars
    star
    182
  • Rank 206,199 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 10 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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 te 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

πŸ’»

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

More Repositories

1

unimported

Find and fix dangling files and unused dependencies in your JavaScript projects.
TypeScript
1,970
star
2

leaflet-geosearch

A geocoding/address-lookup library supporting various api providers.
TypeScript
1,008
star
3

next-runtime

All you need to handle POST requests, file uploads, and api requests, in Next.js getServerSideProps.
TypeScript
590
star
4

redux-define

Define action constants for Redux
JavaScript
174
star
5

where-broke

A CLI utility that helps finding breaking module versions using binary search and automated tests.
JavaScript
92
star
6

jest-partial

A partial matcher for Jest to simplify validation of complex structures.
JavaScript
20
star
7

latodoc

jsDoc3 Theme
JavaScript
19
star
8

graphql-args

A lib that parses the resolver ast, to return the requested object fields and provided params, at any nested level.
JavaScript
12
star
9

blocktober

say STOP to hacktoberfest spammers
JavaScript
11
star
10

paychecker

compare web developer salaries across the planet
TypeScript
5
star
11

issupported.com

Check if your browser is still supported by your favorite websites.
TypeScript
4
star
12

botz

TypeScript
4
star
13

open-api

TypeScript
3
star
14

git-prettier

Run prettier during git clean and smudge stages.
JavaScript
3
star
15

meijer.ws

MDX
2
star
16

cache-key

create stable cache keys from complex objects
TypeScript
2
star
17

smeijer

my ✨special ✨ profile repo
2
star
18

form-data-kit

a lib to parse, stringify, and expand FormData
TypeScript
2
star
19

geoxs-net

GeoXS website
CSS
1
star
20

meteor-prebuild

Compiler plugin to run node script prior to meteor build process
JavaScript
1
star
21

react-emotional

react-emotion extended with some plugins
JavaScript
1
star
22

fetch-addons

A collection of add-ons for the fetch API
TypeScript
1
star
23

something-new

whoei
TypeScript
1
star
24

nexis

CLI utils that help me bootstrap and manage my projects
TypeScript
1
star
25

fetch-repo

fetch a repo from github without git
TypeScript
1
star
26

eslint-config

JavaScript
1
star
27

sme-scripts

JavaScript
1
star
28

tsconfig

Shared TypeScript config for my projects
JavaScript
1
star
29

ts-project

JavaScript
1
star
30

link-workspaces

Link Yarn Workspaces while respecting publishConfig.directory
TypeScript
1
star
31

picoid

Nanoid configured to behave like Meteor Random.id
TypeScript
1
star
32

magicbell-react-nextjs

Next.js template for CodeSandbox Projects
TypeScript
1
star
33

gh-email

retrieve email address by github handle
JavaScript
1
star