Components: mat-spinner burns CPU on chrome

Created on 20 Feb 2019  路  5Comments  路  Source: angular/components

Go https://material.angular.io/components/progress-spinner/overview

On chrome it takes quite a lot CPU resource (20-30% on my MacBook) while on Safari it almost takes nothing.

There seems like there has been an issue (#1511) before that has been fixed on other browsers, however, it is still not working on Chrome.

G P3 materiaprogress-spinner material spec perf
Source
picture zhuhaow
👍3

Most helpful comment

Is there any update on this?
One spinner is still burning through ~10% of CPU

picture bene-starzengruber on 17 Dec 2019
👍3

All 5 comments

The problem in #1511 was that we used to animate the circle using JS, in order to support older browsers. Currently it is being animated with CSS.

crisbeto picture crisbeto on 20 Feb 2019

Seems like there is some thing different between Chrome and Safari on handling these animations, though I thought they were using similar render engine.

zhuhaow picture zhuhaow on 20 Feb 2019

Is there any update on this?
One spinner is still burning through ~10% of CPU

bene-starzengruber picture bene-starzengruber on 17 Dec 2019
👍3

Shouldn't this be implemented with Pure CSS instead of SVG? Maybe it's SVG for compatibility reasons. I will investigate.

alan-bio picture alan-bio on 1 Jun 2020

It appears this is still quite bad. This is Google Cloud console for Cloud Build that shows a number of spinners during a build:
image

This makes the fans of my MacBook pro spin up like crazy using Chrome 85.0.4183.102:
image

wvanderdeijl picture wvanderdeijl on 14 Sep 2020
👀1 👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

constantinlucian picture constantinlucian  路  3Comments
theunreal picture theunreal  路  3Comments
LoganDupont picture LoganDupont  路  3Comments
crutchcorn picture crutchcorn  路  3Comments
julianobrasil picture julianobrasil  路  3Comments