Ionic-framework: Infinite scroll on opposite direction (chat behavior)

[danielgolub]

Short description of the problem:

The infinite scroll component only supports distance from bottom of lists. Let's say we have a chat app that needs infinite scroll on the top of the list?

What behavior are you expecting?

The component should detect if the list is below or on the top of the list, and behave accordingly.

Steps to reproduce:

1. Create a list
2. Place the infinite scroll on top of it
3. It tries to calculate distance from bottom, not from top

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x
Ionic 2 Beta 7

Plunker that shows an example of your issue

http://plnkr.co/edit/dRjYc4yn333EP4tAzclx?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.7
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: Not installed
ios-sim version: 5.0.8
OS: Mac OS X El Capitan
Node Version: v5.8.0
Xcode version: Xcode 7.3 Build version 7D175

[paulogr]

Great to see you guys will implement that on beta 10!!

Chat use case is a big one!

[DamodarSojka]

Is there a possibility to implement it for ionic 1?

[theromis]

can't wait this feature, if I can help with this development please tell me how

[paulogr]

Hi, everyone! Any update on this issue or workaround? It's really hard to develop a chat app without the infinite scroll on top.

Thank you!

[theromis]

we should expect it in beta12, usually they releasing them every month

[DamodarSojka]

How about ionic 1?

[theromis]

now it removed from beta12, any further plans ?

[jgw96]

Hello @theromis . Since we are getting really close to an rc we made the decision yesterday to narrow down the beta.12 milestone to what i like to call "the world is on fire" issues. These are issues that can completely break an ionic app to the point where it just does not work, or breaks big parts of the functionality of the framework. You can be assured that this issue will be re-added to a future milestone though 😃

[theromis]

@jgw96 Thank you for quick reply, may be I can take a part in this development?

[jgw96]

sure! Were always excited to have contribution from the ionic community! Here is a link to our contribution guide to help get you started. Thanks!

[theromis]

I thought may be somebody already started development, so I can join. Am I right that development should be started from scratch?

[jgw96]

@theromis you are correct, as of now no code has been written for this issue.

[Manduro]

I've just submitted a PR for this feature, give it a try!

[theromis]

@jgw96 what do you think about this great feature and PR?

[jourdan-jobox]

Would love to have the pull request reviewed and merged in soon!

[epetre]

Here is how I did it while waiting for the official release:

Notes:

• I also scroll bottom when the page loads
• I trigger inifinite scroll only when at 10%, but I commented that part because I'm not sure we will
  keep it like that.

Code:
import {Content} from 'ionic-angular';
...
@ViewChild(Content) content: Content;
...

  doInfinte = () => {
    return new Promise((resolve, reject) => {
      console.log('Load more stuff here and call resolve when done');
      resolve();
    });
  }

  loadingMore = false;
  previousScrollPosition = 0;
  onScroll = (e) => {
    let page = e.target.clientHeight;
    let scrolled = e.target.scrollTop;
    let direction = this.previousScrollPosition > scrolled ? 'top' : 'bottom';
    this.previousScrollPosition = scrolled;
    if(scrolled < page * 0.10) { //trigger infinite when we are at 10% from top
      if(!this.loadingMore && direction == 'top') {
        this.loadingMore = true;
        this.doInfinte().then(_=> {
          setTimeout( _=> {
            this.loadingMore = false;
          }, 200);
        });
      }
    }
  }

  ngAfterViewInit(){
    this.content.addScrollListener(this.onScroll);
  }

[viklele]

Why can't I simply use ion-refresher for this? In a chat application, user is going to pull down the list to get the older chat items, and this will trigger ion-refresher.

Do you anticipate any problem in this approach?

[pdrosos]

@viklele I currenty use ion-refresher as a workaround in a chat window to load chat history.
It works, but still more natural UI for this use case is infinite scroll in top direction. At least as it's the way all popular chat apps work and users are used to it. Can't wait when this will be integrated in Ionic too :).

[viklele]

@pdrosos, with ion-refresher the user experience will be exactly as the user expects. In a whatsapp like chat view, typically the latest message is at the bottom, and for loading older messages, the user normally pulls down on the page - this triggers ion-refresher event, and we can use that to fetch the older messages from the server.

Here is the HTML fragment I am using:

<ion-content padding class="page-chat-view">
   <ion-refresher (ionRefresh)="onPullOldMessages($event)">
      <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
   <ion-list no-lines no-padding>
      <ion-item *ngFor="let msg of chatMessages | reverse">
         <chat-bubble [position]="msg.SenderId === currentUserId?'right':'left'" [content]="msg.Message" [time]="msg.SentAt | date:'dd-MMM-yyyy HH:MM'"></chat-bubble>
      </ion-item>
   </ion-list>
</ion-content>

Here I am using 'reverse' pipe that flips the messages array (because from the server they are fetched with latest first, to simplify paged fetching).

[Manduro]

Updated my PR #8099 to have it automatically maintain scroll position when loading more at the top, and have the page scroll to the bottom on load. Have a look and give it a try!

[manucorporat]

Feature will be supported in 2.3 thanks to @Manduro ! thank you very much from the ionic team :)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.