From 2a7ebcfc651fb552f502f0c7a0395799d7023397 Mon Sep 17 00:00:00 2001
From: Jeramy Soucy <jeramy.soucy@elastic.co>
Date: Thu, 5 Jan 2023 13:29:08 -0500
Subject: [PATCH] Fixes Spaces loading spinner alignment (#148424)

Resolves #147993

Adds vertical alignment to the EuiLoadingSpinner in the Spaces
navigation popover button.

Previous render:
<img width="178" alt="Screen Shot 2023-01-04 at 6 23 27 PM"
src="https://user-images.githubusercontent.com/103939324/210668671-6b0224c1-a43f-4b72-818c-0cb813b7c6ac.png">

New render:
<img width="174" alt="Screen Shot 2023-01-04 at 6 25 04 PM"
src="https://user-images.githubusercontent.com/103939324/210668809-a620b4f6-cd1b-4db5-b2d7-3792a91bb319.png">

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../__snapshots__/nav_control_popover.test.tsx.snap       | 1 +
 .../spaces/public/nav_control/nav_control_popover.tsx     | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap b/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
index 38a36d5b3657b..ea194bafa3d3c 100644
--- a/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
@@ -15,6 +15,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
       title="loading spaces navigation"
     >
       <EuiLoadingSpinner
+        className="eui-alignMiddle"
         size="m"
       />
       <p
diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
index de2c6a062f21c..1e75bd0ae0f65 100644
--- a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
+++ b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
@@ -135,15 +135,19 @@ export class NavControlPopover extends Component<Props, State> {
     });
   }
 
+  private getAlignedLoadingSpinner() {
+    return <EuiLoadingSpinner size="m" className="eui-alignMiddle" />;
+  }
+
   private getActiveSpaceButton = () => {
     const { activeSpace } = this.state;
 
     if (!activeSpace) {
-      return this.getButton(<EuiLoadingSpinner size="m" />, 'loading spaces navigation');
+      return this.getButton(this.getAlignedLoadingSpinner(), 'loading spaces navigation');
     }
 
     return this.getButton(
-      <Suspense fallback={<EuiLoadingSpinner size="m" />}>
+      <Suspense fallback={this.getAlignedLoadingSpinner()}>
         <LazySpaceAvatar space={activeSpace} size={'s'} />
       </Suspense>,
       (activeSpace as Space).name