home-assistant
Move actions above release information
Proposed change
This component often suffers from CLS (Cumulative Layout Shift) after it is loaded. This makes an intended click to the install action result in a click on the release information, causing the release information to expand.
This changes the position of the action buttons to be above the release information, thus making the CLS less disruptive.
| before | after |
|---|---|
Type of change
- [ ] Dependency upgrade
- [x] 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
Checklist
- [x] The code change is tested and works locally.
- [x] 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
This looks kind of odd, but I am also annoyed by the behavior. 👍
I agree there is still something missing here, but it solves the problem. Another solution would be to size the temp loading container at the same height as the preview container so then there is no shift once the preview is loaded.
This looks kind of odd, but I am also annoyed by the behavior. 👍
Same. I think it looks odd because of the line at the bottom. Perhaps that line should be above the changelog instead of below.
I'll provide a design preview with some proposed solutions in a hour or two. Stay tuned.
Proposed design: https://www.figma.com/design/I6rbb7syrmsw7G62JoHgsr/HA-08?node-id=0-1&t=9KD35jfFdzvI7F49-1
Let's discuss this with UX & Frontend teams in an actual meeting.
The problem is that these notes also contain alerts and warnings people should read before upgrading, so from that standpoint, the change proposed is a bit dangerous.
@marcinbauer85 I'm not sure what I'm looking at in that design. It looks like what we already have?
Proposed design: https://www.figma.com/design/I6rbb7syrmsw7G62JoHgsr/HA-08?node-id=0-1&t=9KD35jfFdzvI7F49-1
@marcinbauer85 Figma looks great 😍 nice work! I'm guessing that the content area is statically sized so that the CTAs are in a fixed position, which will solve the CLS issue?
The problem is that these notes also contain alerts and warnings people should read before upgrading, so from that standpoint, the change proposed is a bit dangerous.
💯 % agree, I had forgotten about the warnings, etc
@frenck, et al, happy to help implement this, or happy to hand this off to you all internally, whatever works for you.
@kenyonj could you post a screen of which warnings we are talking about? I'm been using HA for 6years and I don't recall any warnings in this dialog 🤔
@kenyonj could you post a screen of which warnings we are talking about? I'm been using HA for 6years and I don't recall any warnings in this dialog 🤔
this comment for the backup selection box: https://github.com/home-assistant/frontend/pull/22430#discussion_r1808167799
and then the warnings I've seen are like this:
@kenyonj I've talked with @MindFreeze and updated the design. Please see notes for solutions. The main topic of this pr is the CLS, but there are additional changes in the design file that are outside your initial scope. Please decide what will be done here and what can be moved to another PR.
CC: @frenck
After discussing with @marcinbauer85 and according to the design, I open another PR to improve the rendering when loading and by removing the expandable component (it's now always expanded) Feel free to test and comment the PR : https://github.com/home-assistant/frontend/pull/22502
closing in favor of https://github.com/home-assistant/frontend/pull/22502 nice work @piitaya!