1 files changed, 13 insertions, 10 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index e2d87d8d536..922075516f3 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -1,20 +1,23 @@
 <script>
-import statusIcon from '../mr_widget_status_icon.vue';
+import StateContainer from '../state_container.vue';
 
 export default {
   name: 'MRWidgetChecking',
   components: {
-    statusIcon,
+    StateContainer,
+  },
+  props: {
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <div class="mr-widget-body media">
-    <status-icon :show-disabled-button="true" status="loading" />
-    <div class="media-body space-children">
-      <span class="gl-ml-0! gl-text-body! bold">
-        {{ s__('mrWidget|Checking if merge request can be merged…') }}
-      </span>
-    </div>
-  </div>
+  <state-container :mr="mr" status="loading">
+    <span class="gl-font-weight-bold">
+      {{ s__('mrWidget|Checking if merge request can be merged…') }}
+    </span>
+  </state-container>
 </template>