Adjust size and align MR-widget loading icon

A recent change within gitlab-ui introduced a new size (24x24)
and changed also some of the existing sizes.

This commit uses the loading-icon's new size (24x24) to bring it to the
same dimensions as the status-icon and applies some styling to
vertically align them.

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue

@@ -34,8 +34,8 @@ export default {
 <template>
   <div class="d-flex align-self-start">
     <div class="square s24 h-auto d-flex-center append-right-default">
-      <div v-if="isLoading" class="mr-widget-icon">
-        <gl-loading-icon size="sm" />
+      <div v-if="isLoading" class="mr-widget-icon d-inline-flex">
+        <gl-loading-icon size="md" class="mr-loading-icon d-inline-flex" />
       </div>
       <ci-icon v-else :status="statusObj" :size="24" />
     </div>

app/assets/stylesheets/pages/merge_requests.scss

@@ -208,6 +208,10 @@
     font-size: 22px;
   }
+  .mr-loading-icon {
+    margin: 3px 0;
+  }
+
   .ci-status-icon svg {
     margin: 3px 0;
     position: relative;

changelogs/unreleased/62609-test-summary-loading-spinner-is-too-large.yml

+---
+title: Adjust size and align MR-widget loading icon
+merge_request: 31503
+author:
+type: fixed