From b5d4601e01e3109763c8f8c05fe8ce78045c589e Mon Sep 17 00:00:00 2001
From: Ryan Keairns <contactryank@gmail.com>
Date: Tue, 29 Oct 2024 19:13:41 -0700
Subject: [PATCH] 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
---
 .../src/ui/loading_indicator.scss                |  5 +++++
 .../nav_control_popover.test.tsx.snap            | 16 +++++++++++-----
 .../spaces/public/nav_control/nav_control.tsx    | 16 ++++++++++++++--
 .../public/nav_control/nav_control_popover.tsx   | 11 +++++++++--
 x-pack/plugins/spaces/tsconfig.json              |  3 ++-
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss b/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss
index ccf1ecc873fc5..d12331d9c042d 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/loading_indicator.scss
+++ b/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;
+}
\ No newline at end of file
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 af2221e460a32..854beab6dfc93 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
@@ -27,11 +27,17 @@ exports[`NavControlPopover renders without crashing 1`] = `
             <span
               class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
             >
-              <span
-                aria-label="Loading"
-                class="euiLoadingSpinner eui-alignMiddle emotion-euiLoadingSpinner-m"
-                role="progressbar"
-              />
+              <div
+                aria-busy="true"
+                data-test-subj="euiSkeletonLoadingAriaWrapper"
+              >
+                <div
+                  aria-label="Loading Loading spaces navigation"
+                  class="euiSkeletonRectangle emotion-euiSkeletonGradientAnimation-euiSkeletonRectangle-m"
+                  role="progressbar"
+                  style="inline-size: 24px; block-size: 24px;"
+                />
+              </div>
               <p
                 hidden=""
                 id="spacesNavDetails"
diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control.tsx
index 1dc888333fdf5..cc59ed89cf244 100644
--- a/x-pack/plugins/spaces/public/nav_control/nav_control.tsx
+++ b/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}
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 d84fac2fdced4..cd08ff87e1a55 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
@@ -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 = () => {
diff --git a/x-pack/plugins/spaces/tsconfig.json b/x-pack/plugins/spaces/tsconfig.json
index 97cd0d3d4fdc8..e3c8fdae06137 100644
--- a/x-pack/plugins/spaces/tsconfig.json
+++ b/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/**/*",