perf: SVG / IonicLoading / Ion-Refresher causing CPU usage when not shown

[nowcodingaway]

Type: perf

Platform: mobile webview

The animated SVG / loading animations are used in ion-refresher or in the ionicLoading code. Once they have been displayed and then hidden again they still remain in the DOM animating and eat up CPU. After a while on Android devices it heats the phone up and runs the battery down very quickly, especially if you have loaded the animated SVG in multiple views / places while using the app.

It appears a fix is needed to ensure that the SVG is entirely destroyed once finished with. Even when it is technically not in the DOM it still uses up CPU time. This appears to be more of an issue on android devices.

On Android if you load a view that loads an animated SVG and then leave that view, the CPU remains high.

On iPhone it sits the CPU at about 5% while on the view (even after the loader has finished / been removed) but returns to 0% when you leave the view.

Hopefully this helps someone trying to understand why their app ends up with decreasing performance, battery heating and odd CPU usage, especially on android devices.

I hope this issue has been submitted in the right way. We don't get have a fix other than trying to use an animated GIF or no animation at all instead of one of the animated SVGs.

It is also worth noting that if you simply have a pull-to-refresh tag at the top of the page it will cause this issue even if you have not yet done a pull to refresh.

[nowcodingaway]

Just did another check and happen to find this #3583

Appears this may be a duplicate of that issue and hopefully fixed in an upcoming release. Feel free to close this if indeed it is a dupe

[mhartington]

Closing as it is a duplicate of #3583