How to implement callback in ngHistory in Pubnub?

Question

When trying to retrieve the history message in the on event , the loading time is too long. The spinner show and hides too fast. But the message is not yet loaded.

How can we calculate or get the exact time to make the history load?

 $scope.limit = 100
 PubNub.ngHistory( {
                        channel : $scope.channel,
                        limit   : $scope.limit
                        });

   $rootScope.$on(PubNub.ngMsgEv($scope.channel), function(ngEvent, payload) {

                **ActivityIndicator.showSpinner();**

                    $scope.$apply(function(){
                    $scope.messages.push(payload.message);
                });

                $(".messages-wrap").scrollTop($(".messages-wrap")[0].scrollHeight);
                **ActivityIndicator.hideSpinner();**

            }); 

Answer 1

Can you programmatically turn the spinner on at history call time, and programmatically disable it at callback time?

Answer 2

Thank you so much for trying out the PubNub AngularJS API! I'll try to provide some help. There is a little bit of a difference between the PubNub JS API and the PubNub AngularJS API in this case.

Background

Behind the scenes, The PubNub JS API history() method returns instantly, and invokes the callback when the given "page" of history is retrieved.

The AngularJS API, in its quest for simplifying this interaction, does not take a callback - instead, it calls $rootScope.$broadcast() for each message in the returned history payload.

In this version of the AngularJS API, it's not currently possible to "get inside" the 'ngHistory' method to provide a callback. However, there are 2 solutions available to you: one has always been there, and the second one I just added based on your feedback.

Solutions

1) See codepen here (http://codepen.io/sunnygleason/pen/afqmh). There is an "escape hatch" in the PubNub AngularJS API that lets you call the JS API directly for advanced use cases, called jsapi. You can call PubNub.jsapi.history({channel:theChannel,limit:theLimit,callback:theCallback}). The only thing to keep in mind is that this will not fire message events into the $rootScope, and you will need to call $rootScope.$apply() or $scope.$apply() to make sure any changes you make to $scope within the callback function are propagated properly to the view.

2) See codepen here (http://codepen.io/sunnygleason/pen/JIsek). If you prefer a promise-based approach, I just added an ngHistoryQ() function to version 1.2.0-beta.4 of the PubNub AngularJS API. This will let you write code like:

PubNub.ngHistoryQ({channel:theChannel,limit:theLimit}).then(function(payload) {
  payload[0].forEach(function(message) {
    $scope.messages.push(message);
  }
});

You can install the latest version of the AngularJS SDK using 'bower install pubnub-angular'.

With either of these solutions, you should be able to display and hide your spinner accordingly. The only difference is in #2, you'll want to write code like this:

var historyPromise = PubNub.ngHistoryQ({channel:theChannel,limit:theLimit});
showSpinner();
historyPromise.then(function(payload) {
  // process messages from payload[0] array
  hideSpinner();
});

Does this help? Let me know what you think. Thank you again so much for trying this out.