README
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.
import PromiseLoadingSpinner from 'promise-loading-spinner';
const loader = new PromiseLoadingSpinner({
// options
});
// ...
const myPromise = new Promise((resolve) => {
setTimeout(() => {
resolve('done');
}, 5000);
});
loader.loader(myPromise);
You can also use a wrapper function for a function that returns a promise or uses await
:
const myFunction = loader.wrapFunction(async (url) => {
const response = await fetch(url);
const result = await response.json();
return result;
});
myFunction(someUrl);
It also exports a method decorator:
const loaderDecorator = loader.decorator.bind(loader);
class MyClass {
@loaderDecorator()
async foo() {
// ...
}
}
All ways to add a promise can also take a configuration object as an optional parameter.
Option | Description | Type |
---|---|---|
skipDelays |
Skip all delays (initDelay , delay ) |
boolean |
Examples:
// loader
loader(promise, { skipDelays: true });
// wrapFunction:
wrapFunction(fnc, { skipDelays: true });
// decorator:
class MyClass {
@loaderDecorator({ skipDelays: true })
async foo() {
// ...
}
}
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 © 2021 Jens Simon