Properly show and hide loading state.

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

@@ -4,12 +4,7 @@
 (() => {
   Vue.component('approvals-body', {
     name: 'approvals-body',
-    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved', 'suggestedApprovers'],
-    data() {
-      return {
-        loaded: false,
-      };
-    },
+    props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved', 'suggestedApprovers', 'widgetLoading'],
     computed: {
       approvalsRequiredStringified() {
         return this.approvalsLeft === 1 ? 'one more approval' :
@@ -31,6 +26,9 @@
       showApproveButton() {
         return this.userCanApprove && !this.userHasApproved;
       },
+      showApprovalsBody() {
+        return !this.widgetLoading && this.approvalsLeft;
+      }
     },
     methods: {
       approveMergeRequest() {
@@ -38,12 +36,10 @@
       },
     },
     beforeCreate() {
-      gl.ApprovalsStore.initStoreOnce().then(() => {
-        this.loaded = true;
-      });
+      gl.ApprovalsStore.initStoreOnce();
     },
     template: `
-      <div v-if='loaded && approvalsLeft'>
+      <div v-if='showApprovalsBody'>
         <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
         <div v-if='showApproveButton' class='append-bottom-10'>
           <button

app/assets/javascripts/merge_request_widget/approvals/stores/approvals_store.js.es6

@@ -20,8 +20,8 @@
       };
     }
 
-    assignToRootStore(data) {
-      return this.rootStore.assignToData('approvals', data);
+    assignToRootStore(data, key = 'approvals') {
+      return this.rootStore.assignToData(key, data);
     }
 
     initStoreOnce() {
@@ -31,6 +31,7 @@
         return this.fetch()
           .then(() => {
             state.loading = false;
+            this.assignToRootStore(false, 'loading');
           })
           .catch((err) => {
             console.error(`Failed to initialize approvals store: ${err}`);

app/assets/javascripts/merge_request_widget/widget_store.js.es6

@@ -18,9 +18,14 @@
       this.data = {};
 
       // init other widget stores here
+      this.initState();
       this.initApprovals();
     }
 
+    initState() {
+      this.assignToData('loading', true);
+    }
+
     initApprovals() {
       gl.ApprovalsStore = new gl.ApprovalsStore(this);
       this.assignToData('approvals', {});

app/views/projects/merge_requests/widget/open/_approvals_body.html.haml

-%approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers'}
-
+.loading{ 'v-show' => 'loading' }
+  = icon('spinner spin')
+%approvals-body{':user-can-approve' => 'approvals.user_can_approve', ':user-has-approved' => 'approvals.user_has_approved', ':approved-by' => 'approvals.approved_by', ':approvals-left':'approvals.approvals_left', ':suggested-approvers' => 'approvals.suggested_approvers', ':widget-loading' => 'loading'}