CODEWITHSUNDEEP
javascriptangularjsionic-frameworkfirebaseangularfire
Wes Haq
Wes Haq

Reputation: 73

$ionicLoading not showing during list fetch from Firebase in Ionic

I have a Firebase data store that I access to load a list. I would like to show a $ionicLoading indicator till the list loads completely and is actually displayed on the page.

For some reason, it seems that the $ionicLoading does come up but its for such a short time that it doesn't even show. Yet on the page, the list still takes 1-3 seconds to load and be displayed. Am I doing this wrong?

My controllers.js section is as follows:

.controller('ListCtrl', function($scope, ListService, LoaderService) {
  var message="Loading list...";
  LoaderService.showLoader(message);

  ListService.listAll().then(function(data){
    $scope.list = data;
    LoaderService.hideLoader();
  });
})

My services.js section that returns the list promise is as follows:

.factory('ListService', function($q, $firebaseArray) {

    var refList = 
    new Firebase('https://my-list-db.firebaseIO.com/coupons');

    return {
        listAll: function() {
            var deferred = $q.defer();
            var items = $firebaseArray(refList);
            deferred.resolve(items);
            return deferred.promise;
        }
    };
})

.factory('LoaderService', function($ionicLoading){
    //var LoadingObj= new $ionicLoading;

    return {
        showLoader: function(loadingMessage){
            //loadingMessage="Loading List...";
            $ionicLoading.show({
                template: loadingMessage
            });
        },

        hideLoader: function(){
            $ionicLoading.hide();
        }
    };
});

Upvotes: 1

Views: 628

Answers (2)

Md. Zubaer Ahammed
Md. Zubaer Ahammed

Reputation: 981

You can use $loaded with an instance of a factory or service to show loading message and hide it when the data are loaded.

.factory("Trendingpackages", function($firebaseArray) {
   var TrendingpackagesRef = new Firebase("https://brilliant-torch-4678.firebaseio.com/items");
   return $firebaseArray(TrendingpackagesRef);
 })

Then you can use it within a controller:

.controller('TrendingpackagesCtrl', function($scope, Trendingpackages, $ionicLoading) {


  var trendingpackages = [];


  $ionicLoading.show({
    template: 'Loading...'
  });


  $scope.trendingpackages = Trendingpackages;

  Trendingpackages.$loaded().then(function(){
    $ionicLoading.hide();
  })

})

Upvotes: 0

David East
David East

Reputation: 32604

You don't need to resolve a $firebaseArray() in a promise, as it returns a promise when it is loaded with $loaded().

Try this instead:

.constant('FirebaseUrl', 'https://my-list-db.firebaseIO.com/')
.service('rootRef', ['FirebaseUrl', Firebase])
.factory('ListService', function(rootRef, $firebaseArray) {
   var refList = rootRef.child('coupons');
   return $firebaseArray(refList);
})
.controller('ListCtrl', function($scope, ListService, LoaderService) {
   var message = "Loading list...";
   LoaderService.showLoader(message);

   $scope.list = ListService;

   $scope.list.$loaded.then(function(data){
      LoaderService.hideLoader();
   });
})

However, you should know that $loaded() is generally not needed. Because when the data loads, AngularFire triggers the $digest loop and the data will appear on the screen. So you can assign the ListService to scope, and then resolve $loaded() to know when to dismiss the LoaderService.

Check out the AngularFire API for more information.

Upvotes: 1

Related Questions