Ionic v2 - Dynamic List + Scroll issue

Ionic Framework ionic-v3
1

So Guys,

I’m trying to simulate an chat view.

As you might know, usually the user scrolls up to get older messages. To solve this I used ion-infite-scroll with position top. Kinda easy so far:


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

<ion-list>
  <ion-item  text-wrap *ngFor="let message of messages" >
      // message-box here

And when the APP loads we go all the way down:

 ionViewDidEnter() {
    this.content.scrollToBottom(0);
  }

The problem is when I modify the messages array, I try to scroll down, it actually does, but the view didnt finish updating, so the page length is still the same. Check the code:


  appendRows(newData){
    if(!newData || newData.length == 0)
      return;

    this.lastMessage = newData[(newData.length-1)].id;

    if(this.messages){
      let newArray = this.messages.concat(newData);
      this.messages = newArray;
    }else{
      this.messages = newData;
    }

    // THIS WORKS BUG IONIC DIDNT FINISH 
   // REFRESHING THE VIEW
    this.content.scrollToBottom(0);
  }

So, how can I fix this? Is there a way to add an change event to the view or to ion-list ?

Guys, to demonstrate the problem I’ve create some sample code: https://gist.github.com/mtnoronha/e78eba6b610b71f1e72424ed21722be1

The last added element is only visible when:

1 - user manually scrolls down
2 - another item is added, then it will be hidden, and the older one will pop up.

Thanks