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

npm i promise-loading-handler

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.

Create the loader loader.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

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`));

promise-loading-handler works in all browsers that support Promise (either natively or polyfilled).