improve loading UI in Discover mobile (#197939)

## Summary Closes #151503 In this PR, use the EuiEmptyPrompt component to update the loading UI --------- Co-authored-by: Davis McPhee <[email protected]> (cherry picked from commit 7d0f15b)
elastic · Oct 30, 2024 · df91e15 · df91e15
1 parent 12eaa43
commit df91e15
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 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
diff --git 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" />}
+    />
   );
 };