Show loading button while Ajax request is in progress.

app/assets/javascripts/merge_conflict_data_provider.js.es6

@@ -11,6 +11,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
       hasError       : false,
       isParallel     : diffViewType === 'parallel',
       diffViewType   : diffViewType,
+      isSubmitting   : false,
       conflictsData  : {},
       resolutionData : {}
     }
@@ -18,7 +19,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
 
   decorateData(vueInstance, data) {
-    this.vueInstance    = vueInstance;
+    this.vueInstance = vueInstance;
 
     if (data.type === 'error') {
       vueInstance.hasError = true;
@@ -34,6 +35,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
     }
 
     vueInstance.conflictsData = data;
+    vueInstance.isSubmitting = false;
   }
 
 
@@ -233,7 +235,7 @@ window.MergeConflictDataProvider = class MergeConflictDataProvider {
 
 
   isAllResolved() {
-    return this.getConflictsCount() === this.getResolvedCount();
+    return !this.vueInstance.isSubmitting && this.getConflictsCount() === this.getResolvedCount();
   }
 
 

app/assets/javascripts/merge_conflict_resolver.js.es6

@@ -31,6 +31,17 @@ window.MergeConflictResolver = class MergeConflictResolver {
   }
 
 
+  setComputedProperties() {
+    const dp = this.dataProvider;
+
+    return {
+      conflictsCount() { return dp.getConflictsCount() },
+      resolvedCount()  { return dp.getResolvedCount() },
+      allResolved()    { return dp.isAllResolved() }
+    }
+  }
+
+
   fetchData() {
     const dp = this.dataProvider;
 
@@ -47,21 +58,19 @@ window.MergeConflictResolver = class MergeConflictResolver {
   }
 
 
-  setComputedProperties() {
-    const dp = this.dataProvider;
-
-    return {
-      conflictsCount() { return dp.getConflictsCount() },
-      resolvedCount()  { return dp.getResolvedCount() },
-      allResolved()    { return dp.isAllResolved() }
-    }
-  }
-
   commit() {
+    this.vue.isSubmitting = true;
+
     $.post('./resolve_conflicts', this.dataProvider.getCommitData())
-      .then( (data) => {
-        window.location.href = data.redirect_to
+      .done( (data) => {
+        window.location.href = data.redirect_to;
+      })
+      .error(() => {
+        new Flash('Something went wrong!');
       })
+      .always(() => {
+        this.vue.isSubmitting = false;
+      });
   }
 
 }

app/assets/stylesheets/pages/merge_conflicts.scss

@@ -137,4 +137,8 @@ $unselected_line:         #f8f8f8;
       outline: none;
     }
   }
+
+  .btn-success .fa-spinner {
+    color: #FFF;
+  }
 }

app/views/projects/merge_requests/conflicts.html.haml

@@ -126,8 +126,10 @@
         %textarea.form-control.js-commit-message{":disabled" => "!allResolved", "v-model" => "conflictsData.commitMessage"}
           {{{conflictsData.commitMessage}}}
 
-      %button{type: 'button', class: 'btn btn-success js-submit-button', ":disabled" => "!allResolved", "@click" => "commit()"}
-        Commit conflict resolution
+      %button{type: "button", class: "btn btn-success js-submit-button", ":disabled" => "!allResolved", "@click" => "commit()"}
+        %span Commit conflict resolution
+        %a.fa.fa-spin.fa-spinner{":class" => "{'hidden': !isSubmitting}"}
 
-      / %button{type: 'button', class: 'btn btn-cancel'}
-      /   Cancel
+      / FIXME: Hardcoded path
+      %a.btn.btn-cancel{"href" => "diffs"}
+        Cancel