Fixes Spaces loading spinner alignment (elastic#148424)

Resolves elastic#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 <[email protected]>
jeramysoucy · Jan 5, 2023 · 2a7ebcf · 2a7ebcf
1 parent 81bb8ac
commit 2a7ebcf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
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
@@ -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