Ionic 2/4 Infinite Scroll going upwards...not downwards, for a chat application. Weird spacing and weird behavior

Question

I'm on one of my last pieces of functionality for my chat application in my Ionic app where I'm trying to infinitely scroll to the "first" message created between two individuals, similar to any other chat app you've used, be it Facebook, Skype, Slack, etc.

The problem I'm running into is a few things.

1. When I add the infinite scroll code above the <ul> that houses all the messages, I get a giant 200px height whitespace (I think to account for the loading spinner). Here is my code:

          <ion-infinite-scroll (ionInfinite)="scrolled($event)"
           threshold="10px"
           position="top">
           <ion-infinite-scroll-content></ion-infinite-scroll-content>
         </ion-infinite-scroll>
         <ul>
           <li *ngFor="let message of messages; let i = index">
           ... other code to build the message
           </li>
         </ul>
   

2. I have my chat setup to grab just the first 10 messages for the particular conversation, with the idea being that once it his the "top" infinite scroll area, it queries for the next 10, etc. The problem is that when the chats load, there is a momentary pause before the scroller gets scrolled down to the bottom of the screen to show the last message that was sent. However, in that brief moment, the scroller is already at the top of the page which seems to indicate to the <ion-infinite-scroll> to fire the scrolled() function.

Has anyone else run into something like this? The messages load asynchronously once the page is rendered, so I'm trying to figure out the best way to prevent the <ion-infinite-scroll> from firing on page load. Is there something simple I'm missing here?

Thanks in advance! :)

Answer 1

For #2, you can disable the scroll while loading your first batch of chats.

Import ViewChild and InfiniteScroll:

import { ViewChild } from '@angular/core';
import { InfiniteScroll } from 'ionic-angular';

Then create a property for infiniteScroll:

@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;

Then disable it, load your stuff, do the scroll, and re-enable:

ionViewDidLoad(): void {
  // Disable to give time for loading & scrolling
  this.infiniteScroll.enable(false);

  loadFirstTenChats().then(() => {
    // Fiddle with the timing depending on what you are doing.

    // If you have footers or other dynamic content to worry about.
    setTimeout( () => this.content.resize(), 100);

    // Scroll to the bottom once the size has been calculated:
    setTimeout( () => this.content.scrollToBottom(100), 200);

    // The scroll above has to be finished before enabling or
    // else the IS might think it needs to load the next batch.
    setTimeout( () => this.infiniteScroll.enable(true), 1000);
  });
}

For #1, I don't know why it takes up so much space, but if the above works, it will be scrolled off page and won't be noticed.

Answer 2

To solve #1, you can use disabled property of the ion-infinite-scroll component. When true, it won't take any space. You can have a logic for when your paginated content ends, then disable the ion-infinite-scroll.

<ion-infinite-scroll [disabled]="true"></ion-infinite-scroll>

---

And to solve #2, you can use the same above logic. On page load you can disable the ion-infinite-scroll, and after the scroll to bottom event, you enable the ion-infinite-scroll.