NProgress and RequireJS with onResourceLoad and contexts._.defined

nprogress-requirejs-context.js

// Start showing a progress bar
NProgress.start();

// Remember how many resources have been requested
let completed = 0;
let oldPercentage = 0;

// Delay calculations so that if the first of a few resources has many dependencies,
// we don't immediately jump far in the progress bar before starting their loads
requirejs.onResourceLoad = context => {
    setTimeout(
        () => {
            // Don't run this logic if NProgress has finished since it was scheduled
            if (!NProgress.status) {
                return;
            }

            // Tell the user whenever we make progress (only on increased percentages)
            const newPercentage = (completed += 1) / Object.keys(context.defined).length;
            if (newPercentage > oldPercentage) {
                NProgress.set(newPercentage);
                oldPercentage = newPercentage;
            }
        },
        100);
};

// Send a network request, and when it's done, hide the bar
sendNetworkRequest().then(() => {
    NProgress.stop();
    delete requirejs.onResourceLoad;
    doOtherWork();
});