Circular progress improvement in update area

[silamon]

Proposed change

Circular progress was displayed incorrectly on the update page after the upgrade to material design 3 component.

For the update area, the UX has been improved while being there:

• The circular progress now has an aria-label for accessibility.

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 Update spinner appears broken in iOS Home Assistant since 2023.12 #18976
• This PR is related to issue or discussion:
• 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

[bramkragten]

Not sure if I'm a fan of moving the circular progress, especially on mobile space is pretty limited, and placing the it above the image seems ok to me...

Also that the spinner is now no longer in the center of the row bothers me 😅

@matthiasdebaat any opinion?

[piitaya]

Material web is updated so patch is not needed anymore : #19064

[matthiasdebaat]

Not sure if I'm a fan of moving the circular progress, especially on mobile space is pretty limited, and placing the it above the image seems ok to me...

Also that the spinner is now no longer in the center of the row bothers me 😅

@matthiasdebaat any opinion?

The current implementation, swapping the chevron with the spinner, is a smart thing to do IMO. Let's keep that.
I would love to keep the dialog and list item animations the same. Can we do something similar as the list item?

[silamon]

I've went back to having the circular progress on the state icon. I've considered the design suggestion from Matthias, but the meta icon isn't displayed at all in mobile view and this problem focuses on the smaller view. The line progress can be used but you need to reserve more space and then it's still not clear to what update the line progress belongs. A circular progress isn't clear enough for the when the progress is determinate.