Properly cloak loading states.

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

@@ -5,6 +5,11 @@
   Vue.component('approvals-body', {
     name: 'approvals-body',
     props: ['approvedBy', 'approvalsLeft', 'userCanApprove', 'userHasApproved', 'suggestedApprovers'],
+    data() {
+      return {
+        loaded: false,
+      };
+    },
     computed: {
       approvalsRequiredStringified() {
         return this.approvalsLeft === 1 ? 'one more approval' :
@@ -33,19 +38,19 @@
       },
     },
     beforeCreate() {
-      return gl.ApprovalsStore.initStoreOnce();
+      gl.ApprovalsStore.initStoreOnce().then(() => {
+        this.loaded = true;
+      });
     },
     template: `
-      <div>
-        <div>
-          <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
-          <div v-if='showApproveButton' class='append-bottom-10'>
-            <button
-              @click='approveMergeRequest'
-              class='btn btn-primary approve-btn'>
-              Approve Merge Request
-            </button>
-          </div>
+      <div v-if='loaded'>
+        <h4> Requires {{ approvalsRequiredStringified }} (from {{ approverNamesStringified }})</h4>
+        <div v-if='showApproveButton' class='append-bottom-10'>
+          <button
+            @click='approveMergeRequest'
+            class='btn btn-primary approve-btn'>
+            Approve Merge Request
+          </button>
         </div>
       </div>
     `,

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

@@ -2,10 +2,14 @@
 //= require vue_common_component/link_to_member_avatar
 
 (() => {
-
   Vue.component('approvals-footer', {
     name: 'approvals-footer',
     props: ['userCanApprove', 'userHasApproved', 'approvedBy', 'approvalsLeft', 'pendingAvatarSvg', 'checkmarkSvg'],
+    data() {
+      return {
+        loaded: false,
+      };
+    },
     computed: {
       hasApprovers() {
         return this.approvedBy && this.approvedBy.length;
@@ -20,10 +24,12 @@
       },
     },
     beforeCreate() {
-      return gl.ApprovalsStore.initStoreOnce();
+      gl.ApprovalsStore.initStoreOnce().then(() => {
+        this.loaded = true;
+      });
     },
     template: `
-      <div v-if='hasApprovers' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
+      <div v-if='hasApprovers && loaded' class='mr-widget-footer approved-by-users approvals-footer clearfix'>
         <span class='approvers-prefix'> Approved by </span>
         <span v-for='approver in approvedBy'>
           <link-to-member-avatar

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

@@ -17,7 +17,6 @@
       this.api = new gl.ApprovalsApi(rootStore.dataset.endpoint);
       this.state = {
         loading: false,
-        loaded: false,
       };
     }
 
@@ -27,18 +26,17 @@
 
     initStoreOnce() {
       const state = this.state;
-      if (state.loading || state.loaded) {
+      if (!state.loading) {
         state.loading = true;
-        this.fetch()
+        return this.fetch()
           .then(() => {
             state.loading = false;
-            state.loaded = true;
           })
           .catch((err) => {
             console.error(`Failed to initialize approvals store: ${err}`);
           });
       }
-      return this.fetch();
+      return Promise.resolve();
     }
 
     fetch() {