Advanced handling of loaders/spinners based on one or multiple Promises.
- 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.
$ yarn add promise-loading-spinnerThis 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() {
// ...
}
}| 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 |
MIT © 2023 Jens Simon
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent