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.
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.