$ionicLoading and pull to refresh are clashing


#1

I am creating an app that pulls articles in from a joomla k2 powered website and I have run into a snag regarding $ionicLoading and “pull to refresh”. I implemented loading so that the user doesnt just stare at a blank screen while the articles are being pulled into the app. This triggers an overlay with a spinner which is perfect. then once the articles are loaded I am caching them to prevent any more unnecessary calls to the joomla site and just using pull to refresh to update the newest articles. When i pull to refresh it shows the loading icon specific to that function I.E. the loading spinner at the top of the page as well as the $ionicLoading spinner in the middle of the page giving me 2 spinners going at once. Is there any fix for this? I cant seem to find anything on it. Here is my controller for articles:

.controller('ArticleCtrl', function ($scope, $stateParams, $timeout, _, Articles) {
  $scope.numberOfItemsToDisplay = 5;
  $scope.articles = [];
  Articles.all().then(function (response){
      $scope.articles = response;
      window.localStorage.setItem("articles", JSON.stringify(response));
  }, 

  function (err) {
     if(window.localStorage.getItem("articles") !== undefined) {
        $scope.articles = JSON.parse(window.localStorage.getItem("articles"));
      }
    }
  );

  $scope.doRefresh = function() {
    Articles.getNew().then(function (articles){
      var loadedIds = _.pluck($scope.articles, 'id');
      var newItems = _.reject(articles, function (item){ 
         return _.contains(loadedIds, item.id); 
      });
      $scope.articles = newItems.concat($scope.articles);
      $scope.$broadcast('scroll.refreshComplete');
    });
  };
})

and the $ionicLoading located in my app.js:

.config(function ($httpProvider) {
  $httpProvider.interceptors.push(function ($rootScope) {
    return {
      request: function(config) {
        $rootScope.$broadcast('loading:show')
        return config
      },
      response: function(response) {
        $rootScope.$broadcast('loading:hide')
        return response
      }
    }
  })
})

.run(function ($rootScope, $ionicLoading) {
  $rootScope.$on('loading:show', function() {
    $ionicLoading.show({template: '<ion-spinner icon="android"></ion-spinner>'})
  })

  $rootScope.$on('loading:hide', function() {
    $ionicLoading.hide()
  })
})