Show loading icon in StatusBadge on vulnerability details page
The following discussion from !135240 (merged) should be addressed:
-
@lorenzvanherwaarden started a discussion: (+2 comments) thought: I was testing out having a loading icon within the status badge to have even less layout shift. But I'm not sure if this follows Pajamas guidelines. Just wanted to share in case it caught on.
@beckalippert: @lorenzvanherwaarden Pajamas recommends using only one loading spinner at a time, but I like how in your demo in the comment above it shows the color of the previous badge while loading so you can see it change color after it's finished loading (e.g. rather than going from green -> loading with only gray tones -> to red). So let's go with the loading-in-status-badge! I think it's ok to break from the recommendation of only using one loading spinner in this context; I think the rule is there to prevent an overwhelming number of spinners across the page all at once. This case feels different, and is making the connection between the status change on the right with the status badge on the left.
Design
Verification steps
- Go to a vulnerability details page, like https://gitlab.com/gitlab-examples/security/security-reports/-/security/vulnerabilities/94589263
- Use status dropdown in top-right to change status
- Verify status badge has a loading icon and then changes to the correct status