diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
index 13e4b061fda..d0df8309dc7 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
+++ b/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>
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index cb7913ee54e..3c1e384d6ed 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/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;
diff --git a/changelogs/unreleased/62609-test-summary-loading-spinner-is-too-large.yml b/changelogs/unreleased/62609-test-summary-loading-spinner-is-too-large.yml
new file mode 100644
index 00000000000..f8e4a26dad8
--- /dev/null
+++ b/changelogs/unreleased/62609-test-summary-loading-spinner-is-too-large.yml
@@ -0,0 +1,5 @@
+---
+title: Adjust size and align MR-widget loading icon
+merge_request: 31503
+author:
+type: fixed