Show content if route is ready and xhr is done. (for algular's ui-router)

show-if-ready.directive.coffee

# <div app-show-if-ready ui-view></div>
appShowIfReady = ($animate, $rootScope, $timeout, cfpLoadingBar) ->
  restrict: 'A'
  link: ($scope, $element) ->
    container = $element.parent()
    stateChangeStartOff = $rootScope.$on '$stateChangeStart', ->
      container.hide()

    stateChangeSuccessOff = $rootScope.$on '$stateChangeSuccess', ->
      $timeout ->
        if !$element.data('waitingXHR')
          container.show()
      , cfpLoadingBar.latencyThreshold + 1

    $scope.$on 'cfpLoadingBar:started', ->
      container.hide()
      $element.data('waitingXHR', true)

    $scope.$on 'cfpLoadingBar:completed', ->
      container.show()
      $element.data('waitingXHR', false)


appShowIfReady.$inject = ['$animate', '$rootScope', '$timeout', 'cfpLoadingBar']

angular.module('app.directives')
  .directive 'appShowIfReady', appShowIfReady