Our app is built with Ionic 5 / Angular 10 and one of the screens contains a list of items which can easily get to a few hundred in total so we use infinite-scroll to load the data page by page.
This generally works fine but we have had several users complaining over the last few months that in this screen they are unable to scroll fully down the list. When I test this locally in Chrome I have found that occasionally when I am scrolling down the list the list position will suddenly jump up to the top again so I can see the first page rather than the page I should be seeing. This does not happen all the time, but does happen occasionally. When it happens I always see this in the console:
[Violation] 'load' handler took XX ms
[Violation] 'requestAnimationFrame' handler took XX ms
Does anyone know what these messages might be pointing at in terms of any potential fix I could make to the scrolling mechanism?
My infinite-scroll handler is:
doInfinite(event) {
this.pageCount = this.pageCount + 1;
this.loadMoreData();
setTimeout(() => {
event.target.complete();
}, 500);
}
and the loadMoreData function dispatches an action to the NgRx store which loads the data in - the data is grouped into categories in the list so a bit of work is done in the NgRx reducer to maintain these categories when the data is loaded in - I’m wondering if these console log messages are indicating that sometimes this load/categorise operation is taking too long or something?
1 post - 1 participant