Change spaces button loading design (#197922)

Closes #197916 

## Summary

One less loading spinner. Instead, uses a skeleton loader for a
load-in-place effect that is visually less busy and jumpy.

*Before*
<img width="420"
src="https://github.com/user-attachments/assets/33ae37bf-c196-4bbf-a26e-ad469d7f3134"
/>

*After*


https://github.com/user-attachments/assets/33cc2d39-2895-4c53-8903-9c3b18d586f9

packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss

@@ -2,3 +2,8 @@
   visibility: hidden;
   animation-play-state: paused;
 }
+
+.euiHeaderSectionItem .euiButtonEmpty__text {
+  // stop global header buttons from jumping during loading state
+  display: flex;
+}

x-pack/plugins/spaces/public/nav_control/nav_control.tsx

@@ -5,12 +5,14 @@
  * 2.0.
  */
 
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiSkeletonRectangle } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 
 import type { CoreStart } from '@kbn/core/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 import { initTour } from './solution_view_tour';
 import type { EventTracker } from '../analytics';
@@ -40,7 +42,17 @@ export function initSpacesNavControl(
 
       ReactDOM.render(
         <KibanaRenderContextProvider {...core}>
-          <Suspense fallback={<EuiLoadingSpinner />}>
+          <Suspense
+            fallback={
+              <EuiSkeletonRectangle
+                css={css`
+                  margin-inline: ${euiThemeVars.euiSizeS};
+                `}
+                borderRadius="m"
+                contentAriaLabel="Loading navigation"
+              />
+            }
+          >
             <LazyNavControlPopover
               spacesManager={spacesManager}
               serverBasePath={core.http.basePath.serverBasePath}

x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx

@@ -8,8 +8,8 @@
 import type { PopoverAnchorPosition, WithEuiThemeProps } from '@elastic/eui';
 import {
   EuiHeaderSectionItemButton,
-  EuiLoadingSpinner,
   EuiPopover,
+  EuiSkeletonRectangle,
   withEuiTheme,
 } from '@elastic/eui';
 import React, { Component, lazy, Suspense } from 'react';
@@ -179,7 +179,14 @@ class NavControlPopoverUI extends Component<Props, State> {
   }
 
   private getAlignedLoadingSpinner() {
-    return <EuiLoadingSpinner size="m" className="eui-alignMiddle" />;
+    return (
+      <EuiSkeletonRectangle
+        borderRadius="m"
+        contentAriaLabel={i18n.translate('xpack.spaces.navControl.popover.loadingSpacesLabel', {
+          defaultMessage: 'Loading spaces navigation',
+        })}
+      />
+    );
   }
 
   private getActiveSpaceButton = () => {

x-pack/plugins/spaces/tsconfig.json

@@ -51,7 +51,8 @@
     "@kbn/logging",
     "@kbn/core-logging-browser-mocks",
     "@kbn/core-http-router-server-mocks",
-    "@kbn/core-application-browser-mocks"
+    "@kbn/core-application-browser-mocks",
+    "@kbn/ui-theme"
   ],
   "exclude": [
     "target/**/*",