Measure load time of an element in an AngularJS app (with UI-Router)

load-measure.js

(function () {
  var nameOfState = 'name of the state we want to start the measuring from',
      timingTag = 'an arbitrary tag to tag the timestamps',
      elementSelector = `a selector of the element we're wating for`,
      observer;
  angular.element(document).injector().get('$rootScope').$on('$stateChangeSuccess', (e, toState) => {
    if (toState.name === nameOfState) {
      console.time(timingTag);
      observer = new MutationObserver(e => {
        if (document.querySelector(elementSelector)) {
          console.timeEnd(timingTag);
          observer.disconnect();
        }
      });
      observer.observe(document.body, {childList: true, attributes: false, subtree: true});
    }
  });
})();