From 8736404729f8893e3b118a381377e3b23d2c605c Mon Sep 17 00:00:00 2001
From: Dave Pisek <dpisek@gitlab.com>
Date: Tue, 6 Aug 2019 13:34:34 +1000
Subject: [PATCH] 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.
---
 .../components/mr_widget_status_icon.vue                     | 4 ++--
 app/assets/stylesheets/pages/merge_requests.scss             | 4 ++++
 .../62609-test-summary-loading-spinner-is-too-large.yml      | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 changelogs/unreleased/62609-test-summary-loading-spinner-is-too-large.yml

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