Show loading icon only when making the requestfl-loading-icon

3 files changed, 22 insertions, 4 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,
diff --git a/spec/javascripts/pipelines/pipelines_table_row_spec.js b/spec/javascripts/pipelines/pipelines_table_row_spec.js
index 05ca4cb9044..68043b91bd0 100644
--- a/spec/javascripts/pipelines/pipelines_table_row_spec.js
+++ b/spec/javascripts/pipelines/pipelines_table_row_spec.js
@@ -182,7 +182,16 @@ describe('Pipelines Table Row', () => {
       });
 
       component.$el.querySelector('.js-pipelines-cancel-button').click();
-      expect(component.isCancelling).toEqual(true);
+    });
+
+    it('renders a loading icon when `cancelingPipeline` matches pipeline id', done => {
+      component.cancelingPipeline = pipeline.id;
+      component.$nextTick()
+        .then(() => {
+          expect(component.isCancelling).toEqual(true);
+        })
+        .then(done)
+        .catch(done.fail);
     });
   });
 });