perf: Infinite scroller is hogging too much power

[ErkoKnoll]

Type: perf

Ionic Version: 2.x

Platform: android 5.1 webview

I have a case when the infinite scroller is enabled (can still be scrolled) then it is causing noticeable lag for SVG or Canvas renderings.

When the scroller has been disabled or removed then the lag is gone. I'm using http://leafletjs.com/ for maps and when the page that is not on top of the stack has infinite scroller that is enabled then panning and zooming the map on the active is very laggy. And each time when either the scroller is disabled or not added to DOM then there is no lag.

May I suggest also to disable infinite scroller internal workings if the page that it is attached to is not in the top of the view stack, because for me the infinite scroller is not in the active page but is still causing heavy lag for other pages.

Here is the scroller code im using:

<ion-infinite-scroll *ngIf="invisibleEmployees.length > 0" (infinite)="doInfinite($event)" threshold="20%"> <ion-infinite-scroll-content></ion-infinite-scroll-content> </ion-infinite-scroll>

[adamdbradley]

Good call, I'll take a look into this. Right now the scroller is opacity: 0 so it can quickly be shown. But probably the better route is to have it completely display none. Thanks!

[ErkoKnoll]

It indeed seems to be the spinner animation that is causing the lag. If I removed the spinner and added text instead as following then everything was really smooth.
loadingSpinner="none" loadingText="Loading more data..."

[adamdbradley]

Cool, good to know. Yeah animating that SVG in the background must be causing the issue, thanks for the report.

[adamdbradley]

I made a fix that by default the SVG will be display none, and only display block during the loading state. Please let us know if you're still having issues, thanks!