Improve feedback when taking action on a runner in the project view

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

This issue is blocked by Improve the discoverability of Runners for a pr... (#33803 - closed)

Proposal

In order to abide by:

Instant feedback, also known as optimistic UI or eager execution, simply means that we show the expected result of a successfully saved change even before that change has actually been saved—we anticipate that the change will be saved successfully so we show it in the UI immediately. This has a positive impact on the perceived speed of the application. An example of a case when a successful result is expected is changing the assignee on an issue. Learn more

And be consistent with the ways we are providing instant feedback upon deleting a runner in the Admin (Instance) view, we should add an indication that deleting/removing/disabling a runner is in progress.

Screen_Shot_2021-09-29_at_8.49.19_AM

Screen_Shot_2021-09-30_at_11.15.04_AM

Screen_Shot_2021-09-30_at_11.16.20_AM

Following the standard written here, we should:

  1. Add a spinner to the left of the words Remove runner as well as Disable for this project in the button when the action is selected - see button-loading example for implementation https://design.gitlab.com/components/button

  2. Replace the "x" by a spinner (as we do in the instance view today)

Edited by 🤖 GitLab Bot 🤖