From 319a35e20b2418d4dc53305d72f20270cf72a758 Mon Sep 17 00:00:00 2001
From: "honglian.you" <honglian.you@daocloud.io>
Date: Mon, 28 Oct 2024 11:38:59 +0800
Subject: [PATCH 1/2] improve loading UI in Discover mobile

---
 .../public/components/common/loading_indicator.tsx     | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

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" />}
+    />
   );
 };

From beaf63e7462e8d527f71c9f0aed0c6db7fd6f644 Mon Sep 17 00:00:00 2001
From: "honglian.you" <honglian.you@daocloud.io>
Date: Wed, 30 Oct 2024 10:58:14 +0800
Subject: [PATCH 2/2] update the snapshot of loading indecator

---
 .../loading_indicator.test.tsx.snap           | 44 ++++++++++++-------
 1 file changed, 29 insertions(+), 15 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>
 `;