Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kouts/promise-loading-handler
A utility to handle loading indicators state
https://github.com/kouts/promise-loading-handler
handler indicator loader loading progress promise spinner
Last synced: 13 days ago
JSON representation
A utility to handle loading indicators state
- Host: GitHub
- URL: https://github.com/kouts/promise-loading-handler
- Owner: kouts
- License: mit
- Created: 2021-12-31T08:32:53.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-23T13:07:28.000Z (over 2 years ago)
- Last Synced: 2024-11-28T03:16:45.513Z (30 days ago)
- Topics: handler, indicator, loader, loading, progress, promise, spinner
- Language: TypeScript
- Homepage:
- Size: 547 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# promise-loading-handler 
  
A simple, reusable loading handler function for `Promises` that will make sure the loading indicator in JS apps will disappear only when the last unresolved `Promise` gets resolved.
Created to solve the "flickering" issue that occurs when multiple requests are triggering the start of the loading progress.
**With** `promise-loading-handler`
**Without** `promise-loading-handler`
## Setup
```bash
npm i promise-loading-handler
```
## Usage
`promise-loading-handler` exposes a `createLoader` factory function that takes an options object as a parameter. The options object defines which operations will be performed on loading start/end and optionally an operation to execute when a `Promise` is resolved.
We can also define a `slackTime` that will be used as a delay to wait until the last Promise is resolved. This is useful in cases that we have e.g an API call that starts shortly after another call has just finished, causing a "flickering" effect in our loader.
The factory function will return a `load` method which will accept a `Promise` or a `function` that returns a `Promise`. Instead of firing our `async` functions directly, we'll pass them through the `load` function instead. The loader then will make sure that the loading progress ends when the last of the `Promises` is resolved.
### Example using [nprogress](https://github.com/rstacruz/nprogress) as the progress loading indicator.
Create the loader
`loader.js`
```js
import NProgress from 'nprogress';
import { createLoader } from 'promise-loading-handler';
NProgress.configure({
minimum: 0.35,
speed: 300,
});
const start = () => {
NProgress.start();
};
const end = () => {
NProgress.done();
};
const inc = () => {
NProgress.inc(0.05);
};
const loader = createLoader({ start, end, slackTime: 350, inc });
export const { load } = loader;
```
Use the loader
```js
import { load } from './loader';
import axios from 'axios';
const res1 = load(axios.get(`https://jsonplaceholder.typicode.com/todos`));
const res2 = load(axios.get(`https://jsonplaceholder.typicode.com/todos/1`));
```
## Options
Option | Description | Type | Default
--------|-------------|------|--------
`start` | A function to execute on loading start, this is where we start our progress loader | `function` | `undefined`
`end` | A function to execute when loading ends, this is where we stop our progress loader | `function` | `undefined`
`inc` | An optional function to execute when a promise resolves (valid for all promises except the last one). We can use this function to increment our loading progress. | `function` | `() => {}`
`slackTime` | Time in `ms` to wait until last promise is resolved as to enable multiple operations in a sequence without re-triggering a loader progress start | `Number` | `0`
## Browsers support
`promise-loading-handler` works in all browsers that support `Promise` (either natively or [polyfilled](https://github.com/taylorhakes/promise-polyfill)).