Add shoelace loading spinner component

[wendevlin]

Proposed change

• add new components based on shoelace:
  • ha-spinnner
  • ha-spinner-delayed
  • ha-progress-ring
• delete ha-circular-progress and migrate to new components

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:
• 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

[silamon]

So, are we moving from material to shoelace or is it still experimental phase?

[wendevlin]

So, are we moving from material to shoelace or is it still experimental phase?

I am not sure if we can say 100% yes, but there are not so many lit component libs out there that are active maintained. Shoelace will become web awesome in the near future (hopefully) and we aim to use this and migrate everything to this.

I start now with smaller stuff that doesn't change the look and feel and should be easy to migrate to webawesome.

[silamon]

By replacing or removing components, we will push custom cards, that use unsupported components from the frontend, to be broken. I think we should keep the components a little bit longer around, so they have time to move over cleanly.

It will also take a few months to move over the look and feel. I've used the ha-md-component-name to indicate that the components uses material design 3 to keep them distantiated from previous components. We would be able to convert parts of the frontend on each iteration, so it doesn't feel like a bit of material and a bit of shoelace at any time. Or use a experimental flip switch that toggles between material and shoelace, but the ha-components should be supporting both material and shoelace then.

I'm happy to help, but want a straight path forward before starting. I would also love to build more on the customizations these libraries have. (Being able to change the font, increase of decrease the font size, in general use the css theming variables in a correct way)