Ion-Spinner not showing on Infinite-Scroll when using ng-if

ionic-v1
1

Hi guys.

I’ve implemented ion-infinite-scroll and functionally it works great, but I noticed that it doesn’t display the spinner icon when it’s loading the next page of results.

I’ve searched the forum and found similar problems but only when using collection-repeat, but I’m using ng-repeat.

Here’s the code I’m using for the infinite-scroll:

<ion-infinite-scroll 
        ng-if="moreActivitiesCanBeLoaded"
        immediate-check="false"
        on-infinite="loadMoreActivities()"
        distance="10%">
 </ion-infinite-scroll>

For a test, I removed the ng-if from the code and then the spinner did show up. But obviously I need the ng-if there otherwise the infinite-scroll keeps calling out for more data when it reaches the end.

Is there something obvious I’m missing here? A better way of doing this?
Let me know if you need to see any more of my code.

Thanks

2

Hi @mrsmeeth i have same problem, could you solve it?.

3

Hi @mapeveri - Afraid not. I’m kind of pinning all my hopes on someone answering here!

As long as the functionality works though, which it does, then it’s not totally crucial I get this working - but it’d be nice!

4

same here. I cannot see the spinner but the data loads when reaching the end

 <ion-infinite-scroll on-infinite="loadMore()" distance="1%" ng-if="moreDataToLoad()">
    </ion-infinite-scroll>
5

I solved it this way, adding a timeout when I load data. Example:

$timeout(function () {

        promise.then(function(obj){
            $scope.data = obj;
        }, function(error){
            $scope.$broadcast('scroll.infiniteScrollComplete');
        }).then(function(res){
            $scope.$broadcast('scroll.infiniteScrollComplete');
        });
      }, 2000);

I don’t know if it’s better, but resolved.

1 Like
6

Hi,
Any update on this one?

7

Hi,

We have something new? I have the same problem.

Thanks for any feedback.

Jackson

8

Hi,

Not a very good solution, but it’s working:

HTML:
<ion-infinite-scroll ng-if=“moreItemsAvailable” on-infinite=“loadMoreItems()” distance=“2”>
<ion-spinner ng-show=“loadingMoreItems” icon=“ios” class=“spinner spinner-ios my-spinner”>

CSS:
.my-spinner{
position: absolute;
bottom:20px;
left:45%;
right:45%;
}

Controller:
$scope.loadMoreItems = function(){
if ($scope.currentFeed <= $scope.totalNumberFeeds) {
$scope.loadingMoreItems = true;
console.log(“load more feeds code”);
console.log("after loading feeds or if error set loadingMoreItem to false);
$scope.loadingMoreItems = false;
} else {
$scope.loadingMoreItems = false;
}
};

1 Like
9

I noticed I’ve never be abble to made spinner appear event without ng-if…you have latest version of ionic?