Have ideas to improve npm?Join in the discussion! »

    promise-loading-spinner
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    NPM version Downloads Dependencies star this repo fork this repo Build Status Coverage Status Code Style

    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();
     
    class MyClass {
      @loaderDecorator
      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 © 2020 Jens Simon

    Install

    npm i promise-loading-spinner

    DownloadsWeekly Downloads

    37

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    28.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar