Ionic 2 disable Infinite scroll spinner

Ionic Framework ionic-v3
1

Hi,

I have an infinite scroll working perfectly, however, when I get to the end of my data, the spinner still spins. How do i stop the spinner?

As you can see, I am setting hasMoreData to false, but the spinner still spins.

Thanks

html

  <ion-infinite-scroll *ngIf="hasMoreData" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>

ts

  doInfinite(infiniteScroll: any) {
    this.firstResult += this.MAX_RESULTS;
    var promise: Promise<EmployeeModel[]>;
    promise = this.employeeService.getEmployeeRangeSearch(this.firstResult, this.MAX_RESULTS, this.latitude, this.longitude, this.maxDistance, this.miles, this.searchQuery);
    promise.then((employeeModels: EmployeeModel[]) => {
      for (var index = 0; index < employeeModels.length; index++) {
        this.employeeModels.push(employeeModels[index]);
      }
      if (employeeModels.length === 0) {
        infiniteScroll.enable(false);
        this.hasMoreData = false;
      } else {
        infiniteScroll.enable(true);
        this.hasMoreData = true;
      }
      infiniteScroll.complete();
    });
  }
2

I had a look at my working solution and the only difference I see is that I don’t set to enabled or not the infiniteScroll.

How does it work if you remove infiniteScroll.enable(false) and infiniteScroll.enable(true)?

Furthermore, could it be that your last query return a null value for employeeModels? In case yes, the infiniteScroll.complete(); may not be reached (maybe)?

3

Thanks reedrichards,

If I removeinfiniteScroll.enable(false) and infiniteScroll.enable(true), I get the same result (makes no difference). I just had them in to see if that would work, but they don’t.

The result set does not contain nulls.

4

Sorry to hear that. I also just noticed that you infiniteScroll in your method as any where I defined infiniteScroll as InfiniteScroll, don’t think that would make it but it’s another difference

doInfinite(infiniteScroll: InfiniteScroll) {

otherwise almost same. In case you want to compare:

html

<ion-content padding>
....
<ion-infinite-scroll
      *ngIf="!isLastPageReached()"
      (ionInfinite)="findNext($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
 
</ion-content>

ts

findNext(infiniteScroll:InfiniteScroll) {
    this.find().then(() => {
        infiniteScroll.complete();
    });
}

 private find():Promise<{}> {
    return new Promise((resolve) => {
        this.myService.find().then((resultsA:Result[]) => {
            this.results = this.results.concat(resultsA);

            if (Utils.Comparator.isEmpty(resultsA) || resultsA.length < 10) {
                this.lastPageReached = true;
            }

            resolve();
        }, (errorResponse: Response) => {
            // Nothing found
            this.lastPageReached = true;

            resolve();
        });
    });
}

isLastPageReached():boolean {
    return this.lastPageReached;
}
2 Likes
5

Thanks, doInfinite(infiniteScroll: InfiniteScroll) { is better practice.

Looking at your code it is similar. I will play around with it an see if I can get mine working too.

6

Change opacity will be a great idea

Add style="height: 5px;opacity: .01;" in <ion-infinite-scroll

For Example :-

 <ion-infinite-scroll threshold="100px" (ionInfinite)="loadProducts()" style="height: 5px;opacity: .01;">
      <ion-infinite-scroll-content loadingSpinner="dots">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
1 Like