Table actions alerts and confirmations: Indicate that an action is ongoing and the result
Scope
I am not sure this issue could be part of the table component guidelines, however, since the need came up in the designs I am currently working on I thought it might be useful to raise in case other designers come across the need for table actions status and successful completion verification.
Problem
As we are introducing row actions in tables, some actions may not have instantaneous results so we need to indicate to the users that the action is ongoing so that they have confidence in the system. In addition, it is a good practice to confirm the completion and success of the action. If the action fails then we should provide appropriate errors but this is outside the scope of this proposal.
Proposal
Row actions
I have worked on two designs to solve this problem based on two use cases.
Use case 1: The action affects the value of one of the columns of the row
- Ongoing action: In this case the ongoing action can be indicated by a spinner in the column replacing the previous value with a text that indicates the ongoing action.
- Confirmation: Once the action is completed successfully the value in the column is updated to the new State. To enhance the visibility of the success of the action we can also introduce a toaster.
Example from the Configure team Agent details page design (see Status column)
| Action initiation | Action in progress | Action confirmation |
|---|---|---|
 |
 |
 |
Use case 2: The action affects the complete row
- Ongoing action: An alert can be used to indicate there is an ongoing action related to a row and not the value of a column. The alert can be placed on the top of the row where the action was initiated. The alert type will be defined by whether the action is distractive or not.
- Confirmation: Once the action has been completed successfully, we can indicate the success of the action with an alert or a toaster confirming the success of the action. If an alert is used its type of alert should be determined by the nature of the action.
Example from the Configure team Terraform State listing designs.
| Action initiation | Action in progress | Action confirmation |
|---|---|---|
 |
 |
 |
Table actions
If table actions are available, eg. Create entity Then we can use an Alert to indicate both an ongoing action and the result of the action. The alert in this case should be placed above the table as it affects the table as a whole.
Example from the Configure team Agent details page design
| Action initiation | Action in progress | Action confirmation |
|---|---|---|
 |
 |
 |