1 files changed, 23 insertions, 11 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 36a883869f1..43ce748b41d 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 stateMaps from 'ee_else_ce/vue_merge_request_widget/stores/state_maps';
 import { sprintf, s__, __ } from '~/locale';
 import Project from '~/pages/projects/project';
 import SmartInterval from '~/smart_interval';
+import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import { deprecatedCreateFlash as createFlash } from '../flash';
 import mergeRequestQueryVariablesMixin from './mixins/merge_request_query_variables';
 import Loading from './components/loading.vue';
@@ -96,12 +97,11 @@ export default {
       variables() {
         return this.mergeRequestQueryVariables;
       },
-      result({
-        data: {
-          project: { mergeRequest },
-        },
-      }) {
-        this.mr.setGraphqlData(mergeRequest);
+      result({ data: { project } }) {
+        if (project) {
+          this.mr.setGraphqlData(project);
+          this.loading = false;
+        }
       },
     },
   },
@@ -120,9 +120,17 @@ export default {
       mr: store,
       state: store && store.state,
       service: store && this.createService(store),
+      loading: true,
     };
   },
   computed: {
+    isLoaded() {
+      if (window.gon?.features?.mergeRequestWidgetGraphql) {
+        return !this.loading;
+      }
+
+      return this.mr;
+    },
     shouldRenderApprovals() {
       return this.mr.state !== 'nothingToMerge';
     },
@@ -195,7 +203,10 @@ export default {
   },
   mounted() {
     MRWidgetService.fetchInitialData()
-      .then(({ data }) => this.initWidget(data))
+      .then(({ data, headers }) => {
+        this.startingPollInterval = Number(headers['POLL-INTERVAL']);
+        this.initWidget(data);
+      })
       .catch(() =>
         createFlash(__('Unable to load the merge request widget. Try reloading the page.')),
       );
@@ -285,9 +296,10 @@ export default {
     initPolling() {
       this.pollingInterval = new SmartInterval({
         callback: this.checkStatus,
-        startingInterval: 10 * 1000,
-        maxInterval: 240 * 1000,
-        hiddenInterval: window.gon?.features?.widgetVisibilityPolling && 360 * 1000,
+        startingInterval: this.startingPollInterval,
+        maxInterval: this.startingPollInterval + secondsToMilliseconds(4 * 60),
+        hiddenInterval:
+          window.gon?.features?.widgetVisibilityPolling && secondsToMilliseconds(6 * 60),
         incrementByFactorOf: 2,
       });
     },
@@ -409,7 +421,7 @@ export default {
 };
 </script>
 <template>
-  <div v-if="mr" class="mr-state-widget gl-mt-3">
+  <div v-if="isLoaded" class="mr-state-widget gl-mt-3">
     <mr-widget-header :mr="mr" />
     <mr-widget-suggest-pipeline
       v-if="shouldSuggestPipelines"