Skip to content

Improve loading UX in the License Management list

Problem

Today, when user adds a policy, or changes an existing policy's approval state in the License Management list, the whole list is being replaced by a loading spinner while the changes are processed by the backend. This is not a desirable experience since we want to give the proper feedback to the user inline and prevent the list from shifting places when a change is in process.

Adding a policy Updating a policy Removing a policy
before_adding_licenses before_updating_licenses before_removing_licenses

Solution

  • When a policy is being added, show a loading spinner in the submit button until the list has been refreshed to display the newly added item
  • When a policy is being updated or removed, show a loading spinner to the left of the dropdown until the list has been refreshed to reflect the changes
  • Additionally, the submit button for adding a policy should use the green success variant to comply with Pajamas specifications: https://design.gitlab.com/components/button#success
Adding a policy Updating a policy Removing a policy
after_adding_licenses after_updating_licenses after_removing_licenses
Original description

Problem

Today, when the user changes a selection in the License Management drop-down, the loading spinner populates at the top of the list, shifting the list down momentarily. This is not a desirable experience since we want to give the proper feedback to the user inline and prevent the list from shifting places when a change is in process.

2018-08-01_12.15.39

Solution

Move the loading spinner to the left of the drop-down when the change is being processed by the system.

For now, ignore the spinner design since it is not implemented within the application ATM.

4-project-settings--expanded--loading-spinner_copy

Edited by Paul Gascou-Vaillancourt