Disable approval buttons during API calls.

app/assets/javascripts/merge_request_widget/approvals/components/approvals_body.js.es6

@@ -27,6 +27,11 @@
         required: false,
       },
     },
+    data() {
+      return {
+        approving: false,
+      };
+    },
     computed: {
       approvalsRequiredStringified() {
         const baseString = `${this.approvalsLeft} more approval`;
@@ -61,7 +66,10 @@
     },
     methods: {
       approveMergeRequest() {
-        return gl.ApprovalsStore.approve();
+        this.approving = true;
+        return gl.ApprovalsStore.approve().then(() => {
+          this.approving = false;
+        });
       },
     },
     beforeCreate() {
@@ -74,6 +82,7 @@
         </h4>
         <div v-if='showApproveButton' class='append-bottom-10'>
           <button
+            :disabled='approving'
             @click='approveMergeRequest'
             class='btn btn-primary approve-btn'>
             Approve Merge Request

app/assets/javascripts/merge_request_widget/approvals/components/approvals_footer.js.es6

@@ -35,14 +35,22 @@
         required: true,
       },
     },
+    data() {
+      return {
+        unapproving: false,
+      };
+    },
     computed: {
       showUnapproveButton() {
         return this.userHasApproved && !this.userCanApprove;
       },
     },
     methods: {
-      removeApproval() {
-        gl.ApprovalsStore.unapprove();
+      unapproveMergeRequest() {
+        this.unapproving = true;
+        gl.ApprovalsStore.unapprove().then(() => {
+          this.unapproving = false;
+        });
       },
     },
     beforeCreate() {
@@ -70,9 +78,13 @@
           </link-to-member-avatar>
         </span>
         <span class='unapprove-btn-wrap' v-if='showUnapproveButton'>
-          <span class='unapprove-btn' @click='removeApproval()'>
+          <button
+            :disabled='unapproving'
+            @click='unapproveMergeRequest'
+            class='btn btn-link unapprove-btn'>
             <i class='fa fa-close'></i>
             Remove your approval</span>
+          </button>
         </span>
       </div>
     `,

app/assets/stylesheets/pages/merge_requests.scss

@@ -473,15 +473,22 @@
 
   .unapprove-btn-wrap {
     border-left: 1px solid $gl-gray-light;
-    padding-left: 15px;
+    padding-left: 5px;
     margin-left: 10px;
   }
 
   .unapprove-btn {
+    border: none;
+    background: transparent;
     cursor: pointer;
 
     &:hover {
       color: $gl-gray-light;
+      text-decoration: none;
+    }
+
+    &:focus {
+      outline: none;
     }
   }