1 files changed, 49 insertions, 17 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 363fe226f15..31dbddbd21a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -7,6 +7,7 @@ import MRWidgetStore from 'ee_else_ce/vue_merge_request_widget/stores/mr_widget_
 import MRWidgetService from 'ee_else_ce/vue_merge_request_widget/services/mr_widget_service';
 import stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
 import createFlash from '../flash';
+import Loading from './components/loading.vue';
 import WidgetHeader from './components/mr_widget_header.vue';
 import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
@@ -44,6 +45,7 @@ export default {
   // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
   name: 'MRWidget',
   components: {
+    Loading,
     'mr-widget-header': WidgetHeader,
     'mr-widget-merge-help': WidgetMergeHelp,
     MrWidgetPipelineContainer,
@@ -80,12 +82,12 @@ export default {
     },
   },
   data() {
-    const store = new MRWidgetStore(this.mrData || window.gl.mrWidgetData);
-    const service = this.createService(store);
+    const store = this.mrData && new MRWidgetStore(this.mrData);
+
     return {
       mr: store,
-      state: store.state,
-      service,
+      state: store && store.state,
+      service: store && this.createService(store),
     };
   },
   computed: {
@@ -133,29 +135,58 @@ export default {
       }
     },
   },
-  created() {
-    this.initPolling();
-    this.bindEventHubListeners();
-    eventHub.$on('mr.discussion.updated', this.checkStatus);
-  },
   mounted() {
-    this.setFaviconHelper();
-    this.initDeploymentsPolling();
-
-    if (this.shouldRenderMergedPipeline) {
-      this.initPostMergeDeploymentsPolling();
+    if (gon && gon.features && gon.features.asyncMrWidget) {
+      MRWidgetService.fetchInitialData()
+        .then(({ data }) => this.initWidget(data))
+        .catch(() =>
+          createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
+        );
+    } else {
+      this.initWidget();
     }
   },
   beforeDestroy() {
     eventHub.$off('mr.discussion.updated', this.checkStatus);
-    this.pollingInterval.destroy();
-    this.deploymentsInterval.destroy();
+    if (this.pollingInterval) {
+      this.pollingInterval.destroy();
+    }
+
+    if (this.deploymentsInterval) {
+      this.deploymentsInterval.destroy();
+    }
 
     if (this.postMergeDeploymentsInterval) {
       this.postMergeDeploymentsInterval.destroy();
     }
   },
   methods: {
+    initWidget(data = {}) {
+      if (this.mr) {
+        this.mr.setData({ ...window.gl.mrWidgetData, ...data });
+      } else {
+        this.mr = new MRWidgetStore({ ...window.gl.mrWidgetData, ...data });
+      }
+
+      if (!this.state) {
+        this.state = this.mr.state;
+      }
+
+      if (!this.service) {
+        this.service = this.createService(this.mr);
+      }
+
+      this.setFaviconHelper();
+      this.initDeploymentsPolling();
+
+      if (this.shouldRenderMergedPipeline) {
+        this.initPostMergeDeploymentsPolling();
+      }
+
+      this.initPolling();
+      this.bindEventHubListeners();
+      eventHub.$on('mr.discussion.updated', this.checkStatus);
+    },
     getServiceEndpoints(store) {
       return {
         mergePath: store.mergePath,
@@ -319,7 +350,7 @@ export default {
 };
 </script>
 <template>
-  <div class="mr-state-widget prepend-top-default">
+  <div v-if="mr" class="mr-state-widget prepend-top-default">
     <mr-widget-header :mr="mr" />
     <mr-widget-pipeline-container
       v-if="shouldRenderPipelines"
@@ -377,4 +408,5 @@ export default {
       :is-post-merge="true"
     />
   </div>
+  <loading v-else />
 </template>