Skip to content

Improve skeleton for loading status description

Lorenz van Herwaarden requested to merge improve-skeleton-status-description into master

What does this MR do and why?

  1. Change skeleton to be 1 line instead of 2 in the vulnerability details status description. This prevents a layout shift and makes more sense because the status is in most cases only 1 line.
  2. Update spacing slightly between loading icon, status badge, and status description
  3. Update a couple old utility classes to gitlab-ui utility classes

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
before-status-skeleton after-status-skeleton

How to set up and validate locally

Prerequisites

  1. You need an EE license
  2. You need to have runners enabled (See $2408961 for setting up a runner)
  3. Import https://gitlab.com/gitlab-examples/security/security-reports
  4. Run a pipeline on master

Validate

  1. Go to security reports vulnerability report
  2. Select one of the vulnerabilities
  3. Change its state and watch the skeleton loader in the status description (make it easier to see by throttling network traffic)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports