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

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

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

chore(deps): update dependency vite to v5.3.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

chore(deps): update dependency eslint to v9

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v4

actions/setup-node v4

codecov/codecov-action v4

actions/checkout v4

actions/setup-node v4

.github/workflows/codeql-analysis.yml

actions/checkout v4

github/codeql-action v3

github/codeql-action v3

github/codeql-action v3

.github/workflows/commitlint.yml

actions/checkout v4

wagoid/commitlint-github-action v6

npm

package.json

@commitlint/cli 19.3.0

@commitlint/config-conventional 19.2.2

@jenssimon/eslint-config-base 7.4.15

@jenssimon/eslint-config-typescript 5.2.39

@preact/signals-core ^1.6.0

@types/node 20.14.2

@vitest/coverage-v8 ^1.5.2

commitizen 4.3.0

cz-conventional-changelog 3.3.0

eslint 8.57.0

husky 9.0.11

jsdom ^24.0.0

lint-staged 15.2.7

npm-run-all2 ^6.1.2

pinst 3.0.0

semantic-release 24.0.0

stylelint ^16.4.0

stylelint-config-recess-order ^5.0.1

stylelint-config-standard ^36.0.0

typescript 5.4.5

vite ^5.2.10

vitest ^1.5.2

yarn 4.3.0

nvm

.nvmrc

node 20.14.0

Check this box to trigger a request for Renovate to run again on this repository

jenssimon / promise-loading-spinner Goto Github PK