I discovered that the fan in my laptop enables when I open the page which has the loading animation, e.g. search card in loading state. The browser reports significant energy usage from the page. If I remove that element, things become normal.
I assume this happens because the animation is applied to too many elements. It can be optimised applying animation to only the parent element with [aria-busy=true] despite it could have children.
There are 2 options: render in pseudo-element or with background-image. I prefer background-image due to safety usage along with pseudo-elements but ::after could look better on the other hand.
I discovered that the fan in my laptop enables when I open the page which has the loading animation, e.g. search card in loading state. The browser reports significant energy usage from the page. If I remove that element, things become normal.
I assume this happens because the animation is applied to too many elements. It can be optimised applying animation to only the parent element with
[aria-busy=true]despite it could have children.There are 2 options: render in pseudo-element or with background-image. I prefer background-image due to safety usage along with pseudo-elements but
::aftercould look better on the other hand.