ion-infinite-scroll firing extremely infrequently

Question

I am trying to get ionInfiniteScroll to work - I have already gotten it to work in several other places in my app, and this page is actually almost identical to another page where it is working fine. When I scroll down nothing happens, no loading graphic. I have a console message right on the inside of my doInfinite method and it never executes...so the doInfinite code is never executing. I'm thinking maybe there is something wrong with the html structure since the method doesn't execute:

<ion-content no-padding>
  <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->

    ...

   <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of promotions" no-padding>
      <div class="feedtoptextcontainer">
        <!--<div class="imageparent">
          <img class="postprofilepic" src="{{a.url}}">
        </div>-->
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
        </div>
        <h3 class="promotitle">{{a.title}}</h3>
        <div class="desccontainer">
          <h4 class="deal">{{a.caption}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  ...

  <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>

doInfinite method code:

doInfinite(infiniteScroll) {
    console.log("in doinfinite promotionsssssss");
    setTimeout(() => {
      console.log('Begin async operation');
      /*console.log(this.content.directionY + "        upupupupupupu********");
      if(this.content.directionY == 'up') {
        this.show = false
      }
      else {
        this.show = true;
      }*/

      console.log(this.startAtKey1 + "     before %%^&^&^% start at");
      this.list2 = this.af.list('/promotions', {
      query: {
        orderByKey: true,
        endAt: this.startAtKey1,
        limitToLast: 11
      }});

      this.subscription11 = this.list2.subscribe(items => { 
          let x = 0;
          this.lastKey1 = this.startAtKey1;
          items.forEach(item => {


            let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png');

            storageRef.getDownloadURL().then(url => {
              console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
              item.customMetadata.picURL = url;
            }).catch((e) => {
              console.log("in caught url !!!!!!!$$$$$$$!!");
              item.customMetadata.picURL = 'assets/blankprof.png';
            });

            if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key) {
              console.log(this.startAtKey1 + "   :startAtKey1 before 4444444        item key:     " + item.$key);
              this.promotions.push(item.customMetadata); //unshift?**************
            }

            if(x == 0) {
              this.startAtKey1 = item.$key;
            }

            x++;
          });          

      })

      infiniteScroll.complete(); 

    }, 500);
  }

UPDATE

I think another important thing to note is that I am using 5 different lists that look like the one below...all on the same page (I only have included 2 below - that is what I was last testing with). Where the ... is in the code, that are 4 more lists like the one you see above. They are all enclosed in <div>'s like the one above - and none of them are ever being displayed at the same time - I think I should post the whole <ion-content> just incase things are interfering with one another:

<ion-content no-padding>
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"-->



  <!--<ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>-->


  <div class ='availability contentone' #availability [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{z.pic}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{z.salon}}</h4><br>
          <h4 class="poststudio">{{z.time}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='distance contentone' #distance [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{z.pic}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{z.salon}}</h4><br>
          <h4 class="poststudio">{{z.distance}} mi</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='ratings contentone' #ratings [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{a.picURL}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
          <h4 class="poststudio">{{a.stars}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
  </div>

  <div class ='price contentone' #price [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)">
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{a.picURL}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
          <h4 class="poststudio">{{a.price}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfiniteP($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let a of promotions" no-padding>
      <div class="feedtoptextcontainer">
        <!--<div class="imageparent">
          <img class="postprofilepic" src="{{a.url}}">
        </div>-->
        <div class="usernamecontainer">
          <h4 class="postusername">@{{a.username}}</h4><br>
        </div>
        <h3 class="promotitle">{{a.title}}</h3>
        <div class="desccontainer">
          <h4 class="deal">{{a.caption}}</h4>
        </div>
      </div>
      <!--<img class="imagepost" src="{{i}}">-->
     </ion-item>
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
   </ion-infinite-scroll>
  </div>

  <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item>
</div>
</ion-content>

I switch the lists in and out by using renderer like renderer.setElementStyle(el, 'display', 'none) or block.

Scarper

can you make a working example in stackblitz.com ? I dont see anything in your html – Potence

hey thanks...yah sure...ill let u know when its ready, haven't used stackblitz before. – Scarper

I am trying to get the stackblitz working....here is the editable version...stackblitz.com/edit/ionic-trknv8 - basically i can't get it to recognize angularfire2 auth and database packages, but angularfire2 is installed - which are needed especially for ion-infinite-scroll...any ideas? feeduser.ts/feeduser.html is the only relevant page, the rest are stubs so that it would work...also a little ways down it is throwing an error at keyboardControl: false....also my code is very messy sorry - i was very rushed with this and didnt have much time with ionic before starting – Scarper

@SurajRao - i have been unsuccessful setting up the stackblitz, it won't work if if the angularfire2/auth .... /database packages dont work....if u think u could fix this and have the time i could give u the git repo url...its public – Scarper

You can add it in the dependencies section.. – Potence

hey, i did...it doesnt recognize the /auth or /database as being part of angularfire2 – Scarper

Or Just try a small example... Not the entire project.. – Potence

yah i just put in everything that the one page, feeduser, requires as stubs so i think its as small as i can get it...if i start taking out the angularfire2 code it wont compile for sure – Scarper

Answer 1

It turned out to be conflicting css that I had on .scroll-content. It seems if you add css to .scroll-content, ion-infinite-scroll stops working.

Scarper

Glad to hear that you found the issue! – Brion

problem is...i was using margin-top: -xx% to fix a bug where the top margin is like half the screen...and i can't think of another way to do it. a friend suggested i inject an element into the dom above scroll content and use -margin-top so im going to try that...let me know if you have any ideas...this will probably turn into another stack question :) – Scarper