Potential implementation for loading graphics?

PromiseObserver.js

function PromiseObserver() {
  this.observables = {
    root: false;
  };
}

/**
 * @param {object} promise a promise to reserve
 * @return {object} the observed promise
 */
PromiseObserver.prototype.observe = function(promise /** ,key **/) {
  var that = this,
      key = 'root';

  if (arguments.length > 1) {
    key = arguments[1];
  }

  if (! this.observables.hasOwnProperty(key)) {
    this.observables[key] = false;
  };

  promise.then(function (result) {
    that.observables[key] = true;
    return result;
  }).finally(function () {
    that.observables[key] = false;
  });

  return promise;
};

/**
 * @param {String} key - defaults to root
 */
PromiseObserver.prototype.resolving = function(/** key **/) {
  var key = root;

  if (arguments.length > 1) {
    key = arguments[1];
  }

  if (! this.observables.hasOwnProperty(key)) {
    return false;
  }

  return this.observables[key];
};

//used in an angular resolve block
{
  school: ['PromiseObserver', 'School', function (observer, School) {
    //observe returns the promise to simplify client code
    return observer.observe('school', School.get().$promise);
  }];
}

// an accompanying directive to conditionally show hide when a key is resolving?
// <div class="loading-spinner" show-if-resolving="school"></div>