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

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.

Examples:

// loader loader(promise, { skipDelays: true }) // wrapFunction: wrapFunction(fnc, { skipDelays: true }) // decorator: class MyClass { @loaderDecorator({ skipDelays: true }) async foo() { // ... } }

MIT © 2023 Jens Simon