@redocly/theme/src/core/utils/with-load-progress.ts

Shared UI components lib

import nprogress from 'nprogress';

nprogress.configure({
  trickleSpeed: 100,
  template: '<div class="bar" role="bar"><div class="peg"></div></div>',
});

// Only the last caller should be able to call nprogress.done()
let lastCalledBy: symbol;

export async function withLoadProgress<T>(loadTarget: Promise<T>): Promise<T> {
  const callIdentifier = Symbol();
  lastCalledBy = callIdentifier;

  // Cancel any existing progress and restart
  nprogress.done();
  nprogress.start();

  return loadTarget.finally(() => {
    if (lastCalledBy === callIdentifier) {
      nprogress.done();
      nprogress.remove();
    }
  });
}