Use consistent styles in transition from loading state.

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

@@ -76,7 +76,7 @@
       gl.ApprovalsStore.initStoreOnce();
     },
     template: `
-      <div class='approvals-body mr-widget-body'>
+      <div class='approvals-body mr-widget-footer'>
         <h4> Requires {{ approvalsRequiredStringified }}
           <span v-if='showSuggestedApprovers'> (from {{ approverNamesStringified }}) </span>
         </h4>

app/views/projects/merge_requests/widget/_open.html.haml

@@ -51,11 +51,10 @@
         = mr_assign_issues_link
 
   - if @merge_request.requires_approve?
-    .mr-widget-heading{ 'v-show' => '!showApprovals' }
-      .ci_widget
-        = icon("spinner spin")
-        Checking approval status for this merge request.
-    .approvals-components{ 'v-show' => 'showApprovals' }
+    .mr-widget-footer{ 'v-show' => '!showApprovals' }
+      = icon("spinner spin")
+      Checking approval status for this merge request.
+    .approvals-component{ 'v-show' => 'showApprovals' }
       = render 'projects/merge_requests/widget/open/approvals_body'
       = render 'projects/merge_requests/widget/open/approvals_footer'