From df91e15777a94445828157bdce5f70368bcd2b8a Mon Sep 17 00:00:00 2001
From: youhonglian <honglian.you@foxmail.com>
Date: Thu, 31 Oct 2024 07:41:06 +0800
Subject: [PATCH] improve loading UI in Discover mobile (#197939)

## Summary

Closes https://github.com/elastic/kibana/issues/151503

In this PR, use the EuiEmptyPrompt component to update  the loading UI

---------

Co-authored-by: Davis McPhee <davis.mcphee@elastic.co>
(cherry picked from commit 7d0f15b160fd2c7bc1d80e62f3499827970fccc1)
---
 .../loading_indicator.test.tsx.snap           | 44 ++++++++++++-------
 .../components/common/loading_indicator.tsx   | 10 ++---
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/plugins/discover/public/components/common/__snapshots__/loading_indicator.test.tsx.snap b/src/plugins/discover/public/components/common/__snapshots__/loading_indicator.test.tsx.snap
index 9b8907dc9b4e3..cb9676b012225 100644
--- a/src/plugins/discover/public/components/common/__snapshots__/loading_indicator.test.tsx.snap
+++ b/src/plugins/discover/public/components/common/__snapshots__/loading_indicator.test.tsx.snap
@@ -2,15 +2,22 @@
 
 exports[`Loading indicator default renders correctly 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-none-spaceAround-center-row"
+  class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
 >
   <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
+    class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
   >
-    <span
-      aria-label="Loading"
-      class="euiLoadingSpinner emotion-euiLoadingSpinner-l"
-      role="progressbar"
+    <div
+      class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
+    >
+      <span
+        aria-label="Loading"
+        class="euiLoadingSpinner emotion-euiLoadingSpinner-l"
+        role="progressbar"
+      />
+    </div>
+    <div
+      class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
     />
   </div>
 </div>
@@ -18,20 +25,27 @@ exports[`Loading indicator default renders correctly 1`] = `
 
 exports[`Loading indicator elastic renders correctly 1`] = `
 <div
-  class="euiFlexGroup emotion-euiFlexGroup-responsive-none-spaceAround-center-row"
+  class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
 >
   <div
-    class="euiFlexItem emotion-euiFlexItem-growZero"
+    class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
   >
-    <span
-      aria-label="Loading"
-      class="euiLoadingElastic emotion-euiLoadingElastic"
-      role="progressbar"
+    <div
+      class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
     >
       <span
-        data-euiicon-type="logoElastic"
-      />
-    </span>
+        aria-label="Loading"
+        class="euiLoadingElastic emotion-euiLoadingElastic"
+        role="progressbar"
+      >
+        <span
+          data-euiicon-type="logoElastic"
+        />
+      </span>
+    </div>
+    <div
+      class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
+    />
   </div>
 </div>
 `;
diff --git a/src/plugins/discover/public/components/common/loading_indicator.tsx b/src/plugins/discover/public/components/common/loading_indicator.tsx
index f07b22198d4b0..ed6155c6916ab 100644
--- a/src/plugins/discover/public/components/common/loading_indicator.tsx
+++ b/src/plugins/discover/public/components/common/loading_indicator.tsx
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiLoadingElastic } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiLoadingSpinner, EuiLoadingElastic } from '@elastic/eui';
 import React from 'react';
 
 interface Props {
@@ -16,10 +16,8 @@ interface Props {
 
 export const LoadingIndicator = ({ type = 'spinner' }: Props) => {
   return (
-    <EuiFlexGroup justifyContent="spaceAround" alignItems="center" gutterSize="none">
-      <EuiFlexItem grow={false}>
-        {type === 'spinner' ? <EuiLoadingSpinner size="l" /> : <EuiLoadingElastic size="xxl" />}
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiEmptyPrompt
+      icon={type === 'spinner' ? <EuiLoadingSpinner size="l" /> : <EuiLoadingElastic size="xxl" />}
+    />
   );
 };