ionic-framework: bug: infinite scroll event does not fire if quickly scrolled

Bug Report

Ionic version:

[x] 4.x

Current behavior: When using infinite scroll:

If you initially load not enough items to fill the page and to enable scrolling, ionInfinite will never fire. You have to resize the browser window.
If you scroll down quickly, ionInfinite does not always fire, especially when you load only few additional items and/or the threshold is set to a high value. You have to scroll up and back down.

This is an issue because:

You might want to load as few items as possible, especially if the load time is high or because of bandwidth/costs.
You never now how many items are enough to fill the page, because of screen size, font size, etc…

Expected behavior: I expect ionInfinite to fire when more items can be shown on the page.

Other information:

This problem has already been reported for Ionic 1/2/3 as #661, 4980 and #6341.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.11.0
   Ionic Framework               : @ionic/angular 4.3.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

System:

   NodeJS : v10.15.0
   npm    : 6.4.1
   OS     : Windows Server 2016

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 9
Comments: 32 (7 by maintainers)

Commits related to this issue

fix(infinite-scroll): remaining in threshold after ionInfinite can trigger event again on scroll (#28569) Issue number: resolves #18071 --------- <!-- Please do not submit updates to dependenci... — committed to ionic-team/ionic-framework by liamdebeasi 7 months ago

Most upvoted comments

Happy to look into this one, we also ran into this and for now just used a very large default page size, but it would be nice if the component invoked the infinite method until it fills the viewable area. The important part is to make sure it stops requesting if the list doesn’t grow (there truly are no more items)

daem0ndev on Apr 24, 2019

It is still an issue on Ionic 7 React.

joey542 on Jun 9, 2023

@luantrasel I even wrote Ionic via Twitter in December because this issue feels like such a crucial one for the entire framework but never received an answer.

@pc-robelbois Yeah something like this seems to be a solution for the initial view but it still won’t work when you scroll a bit faster or the server response is a bit slower for one of the requests.

derWebdesigner on Jan 20, 2023

Bummed to see this is still an issue 😦

And it’s actually a really crucial one for the entire usage of the framework because infinite lists inside apps are basically everywhere. I tried to build workarounds by loading double content and caching half of it to speed up the complete() call but that resulted in other even bigger issues.

derWebdesigner on Nov 5, 2022