Disable energy distribution animation if prefers-reduced-motion is set

[karwosts]

Proposed change

Remove the animated moving dots on energy distribution if prefers-reduced-motion is set.

I believe these are kind of unnecessary to convey the information (and happen to consume high cpu).

I can't decide if this is an accessibility issue, but seems like it might qualify. Might also be good for users who want it on a slower or low-power dashboard.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
  energy-distribution card causes high CPU - moving dots...? #13816
  Energy Distibrution hardware acceleration high GPU usage #17941
  Avoid high CPU usage of the browser at overview & energy #24575
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[piitaya]

Should we default it to false and then enable it if there is no prefer-reduced-motions to avoid a first render with animation?

[bramkragten]

Should we default it to false and then enable it if there is no prefer-reduced-motions to avoid a first render with animation?

Or we do the match media before rendering

[karwosts]

Moved from firstUpdated to willUpdate (conditioned on hasUpdated).

Also added a check to disable the home energy "spin-in" animation.