Infinite scroll never dismisses

[juliocbcotta]

Short description of the problem:

After scrolling ion-list to the bottom item, the spinner appear, the callback is triggered, the code calls infiniteScroll.complete(), but the spinner never is removed.

What behavior are you expecting?

After the calling of infiniteScroll.complete(), the spinner should be removed from the screen.

Steps to reproduce:
1 include the code bellow in the page controller

public doInfinite(infiniteScroll: InfiniteScroll) {
     console.log('Begin async operation');
     setTimeout(() => {
       console.log('Async operation has ended');
       infiniteScroll.complete();
     }, 500);
   }

2 include the code bellow in the html

 <ion-infinite-scroll (infinite)="doInfinite($event)">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

3 run the code.

Ionic Version: 2.x

Browser & Operating System:
tested on Android

Run ionic info from terminal/cmd prompt:

ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version:  Requiring external module ts-node/register
Gulp local:   CLI version 3.9.0
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS: Distributor ID:     Ubuntu Description:     Ubuntu 15.10 
Node Version: v5.6.0

[brandyscarney]

Infinite scroll was added in beta.2 and you are running beta.1. I don't think it should be working at all in beta.1, but I can't remember if it was there and just not fully working. Can you try updating to beta.2?

[juliocbcotta]

@brandyscarney , I did migrate to beta2! the ionic-cli is showing a wrong info!

[brandyscarney]

@BugsBunnyBR Hmm maybe update the CLI to beta.19 to see if that will print the proper output (for the ionic info being wrong): npm install -g ionic@beta

If you're using beta.2, you should call complete() after the user scrolls to the bottom of the page (if you aren't passing a threshold value it will be within 15% of the bottom of the page). Once you are done triggering the infinite scroll when the user scrolls you will have to disable the infinite scroll by calling infiniteScroll.enable(false);.

It looks like to me you are triggering the infinite event and complete event over and over since there is no new data being loaded for the user to scroll down to. In one of our examples we have the doInfinite defined like this:

doInfinite(infiniteScroll: InfiniteScroll) {
  console.log('Begin async operation');

  getAsyncData().then(newData => {
    for (var i = 0; i < newData.length; i++) {
      this.items.push( this.items.length );
    }

    console.log('Finished receiving data, async operation complete');
    infiniteScroll.complete();

    if (this.items.length > 90) {
      infiniteScroll.enable(false);
    }
  });
}

So once the number of items exceeds 90 we stop triggering the infinite scroll. Does this help?

[juliocbcotta]

@brandyscarney
I tried to update to the latest ionic-cli, but the update process shown some errors, even though, the ionic info worked and shown the right version of ionic (beta.2). I reverted to ionic-cli 17(sudo npm install -g cordova [email protected]).
I included the call to enable(false) and the infinite-scroll dismissed. Thanks.
How can I enable the infinite scroll again when the user hits the refresher ? I mean, how to get a reference to the InfiniteScroll object?

[adamdbradley]

I think this is a bug with the CSS. When the state changes to just enabled to css should hide spinner. Normally you don't see this because the list is usually tall enough it below the fold.

[juliocbcotta]

People, I am using infinite scroll with refresher, if the user reaches the last page, I set the infinite scroll do enable(false), but I need to be able to enable it again when the user hits the refresher (because I only load the first page in the refresher and the user may again go to end of the list).
How to enable the infinite scroll again?
Or even better, if infinite scroll can listen the ion-list scroll event it would know if the user scrolled down and only show the spinner again if it happened.

[mserranog]

I have the problem Adam says. When the list is short and doesn't need scroll the spinner and loading text is visible. Thank you guys, you're doing a really good job.

[adamdbradley]

Thanks for the help everyone!