We will create a Promise wrapper, that can be used instead of normal promises, to track different tasks that we need to show the spinner for.
export class PromiseWithLoadingProgress extends Promise { constructor(callback) { super((originalResolve, originalReject) => { const resolveSpy = (...args) => { originalResolve(...args); existingTaskCompleted(); }; const rejectSpy = (...args) => { originalReject(...args); existingTaskCompleted(); }; callback(resolveSpy, rejectSpy); }); newTaskStarted(); } } const doVeryQuickWork = () => { new PromiseWithLoadingProgress(resolve => { setTimeout(() => { resolve(); }, 300); }); }; const doAlmostQuickWork = () => { new PromiseWithLoadingProgress(resolve => { setTimeout(() => { resolve(); }, 2200); }); };