Merge branch 'fl-loading-icon' into 'master'

Show loading icon only when making the request

See merge request gitlab-org/gitlab-ce!19116

2 files changed, 12 insertions, 3 deletions

diff --git a/app/assets/javascripts/pipelines/components/pipelines_table.vue b/app/assets/javascripts/pipelines/components/pipelines_table.vue
index 41986b827cd..4318abe97e0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table.vue
@@ -37,6 +37,7 @@
       return {
         pipelineId: '',
         endpoint: '',
+        cancelingPipeline: null,
       };
     },
     computed: {
@@ -64,6 +65,7 @@
       },
       onSubmit() {
         eventHub.$emit('postAction', this.endpoint);
+        this.cancelingPipeline = this.pipelineId;
       },
     },
   };
@@ -106,6 +108,7 @@
       :update-graph-dropdown="updateGraphDropdown"
       :auto-devops-help-path="autoDevopsHelpPath"
       :view-type="viewType"
+      :canceling-pipeline="cancelingPipeline"
     />
 
     <modal
diff --git a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
index 0f671ceea21..b99246a92d0 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_table_row.vue
@@ -46,12 +46,16 @@
         type: String,
         required: true,
       },
+      cancelingPipeline: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     pipelinesTable: PIPELINES_TABLE,
     data() {
       return {
         isRetrying: false,
-        isCancelling: false,
       };
     },
     computed: {
@@ -227,12 +231,14 @@
       isChildView() {
         return this.viewType === 'child';
       },
+
+      isCancelling() {
+        return this.cancelingPipeline === this.pipeline.id;
+      },
     },
 
     methods: {
       handleCancelClick() {
-        this.isCancelling = true;
-
         eventHub.$emit('openConfirmationModal', {
           pipelineId: this.pipeline.id,
           endpoint: this.pipeline.cancel_path,