How to handle loading progress flicker

One of the most important things in our web apps UX is to provide a form of feedback when the app needs more time to process the user's action when e.g an ajax request is fired in the background. This is usually done using a progress bar, a spinner, or a combination of both.

Have you ever noticed though a "flaky" behavior when a lot of API calls happen at the same time?

We can provide a smooth experience to our users, so let's fix that!

What we'll build

We'll create a simple loader handler function for Promises that will make sure our loading indicator will disappear only when the last unresolved Promise gets resolved. We'll also make sure that the function is reusable so that it can be used with any project and with any progress loading indicator plugin.

Implementation

createLoader.ts

export const createLoader = (options: {  start: () => void;  end: () => void;  inc?: () => void;  slackTime?: number;}) => {  const promises: Promise<unknown>[] = [];  const opts = {    ...{      inc: () => {},      slackTime: 0,    },    ...options,  };  const load = <T>(promise: Promise<T> | (() => Promise<T>)) => {    const p = typeof promise === 'function' ? promise() : promise;    !promises.length && opts.start();    promises.push(p);    p.finally(() => {      setTimeout(() => {        promises.pop();        !promises.length ? opts.end() : opts.inc();      }, opts.slackTime);    });    return p;  };  return { load };};

We created a factory function that takes an options object that 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 our 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 our load function instead. Our loader then will make sure that the loading progress ends when the last of the Promises is resolved.

Options

Creating our loader

It's time to create our loader. Here we're using the popular nprogress library for our progress loading indicator as an example.

loader.ts

import NProgress from 'nprogress';import { createLoader } from './createLoader';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;

We have configured the NProgress instance and setup a new loader that will start, end, or increment the nprogress progress bar depending on the Promises' state.

How to use

Using our loader is fairly simple, we just need to pass our Promises into the load function and our loader will take care of the rest. Here's an example using axios that dispatches two requests so that they get registered in our 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`));

That's it, no more loading progress flicker!

If you want to see how this feels in a browser, checkout a live example of the loader that implements a global page progress bar (and some extra stuff too) in this stackblitz here

Make sure you open this with a Chromium-based browser (e.g Chrome) and run npm run dev on the console.

Thanks for reading.