promise-loading-spinner
Advanced handling of loaders/spinners based on one or multiple Promises.
Why?
- Show a spinner using a promise Spinner will disappear when promise is resolved
- No Spinner for short operations Spinner won't show up for short operations so operation doesn't feel lazy
- Support of multiple promises Spinner will disappear when the last unresolved promise is resolved
- Operations in a sequence If there are multiple operations in a sequence the spinner will disappear when the last operation is finished
See this Codepen.
Install
$ yarn add promise-loading-spinner
Usage
This shows loading spinners based on promises.
; const loader = // options; // ... const myPromise = { ;}; loader;
You can also use a wrapper function for a function that returns a promise or uses await
:
const myFunction = loader; ;
It also exports a method decorator:
const loaderDecorator = loader; @loaderDecorator async { // ... }
Options
Option | Description | Type | Default |
---|---|---|---|
delay |
Time (ms) until spinner will show up to handle short operations without a spinner | Number |
300 |
closeDelay |
Time (ms) to wait until last promise is resolved to enable multiple operations in a sequence without a "flickering" spinner | Number |
10 |
initDelay |
Delay (ms) after loader initialization to suppress spinners on page load | Number |
1000 |
loaderElement |
the element which represents the spinner | string (selector) or HTMLElement |
js-page-loader |
classActive |
class name used to show the spinner | string |
is-active |
License
MIT © 2020 Jens Simon