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({
})
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(promise, { skipDelays: true })
wrapFunction(fnc, { skipDelays: true })
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 © 2023 Jens Simon