[SharedUX] Add loading indicator to NoDataPage (#132272)

* [SharedUX] Add loading indicator to NoDataPage

* Rename hasFinishedLoading > isLoading

* Change EuiLoadingSpinner > EuiLoadingElastic

* Update packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx

@@ -39,8 +39,9 @@ type Params = Pick<NoDataPageProps, 'solution' | 'logo'> & DataServiceFactoryCon
 
 export const PureComponent = (params: Params) => {
   const { solution, logo, hasESData, hasUserDataView } = params;
+
   const serviceParams = { hasESData, hasUserDataView, hasDataViews: false };
-  const services = servicesFactory(serviceParams);
+  const services = servicesFactory({ ...serviceParams, hasESData, hasUserDataView });
   return (
     <SharedUxServicesProvider {...services}>
       <KibanaNoDataPage
@@ -51,6 +52,26 @@ export const PureComponent = (params: Params) => {
   );
 };
 
+export const PureComponentLoadingState = () => {
+  const dataCheck = () => new Promise<boolean>((resolve, reject) => {});
+  const services = {
+    ...servicesFactory({ hasESData: false, hasUserDataView: false, hasDataViews: false }),
+    data: {
+      hasESData: dataCheck,
+      hasUserDataView: dataCheck,
+      hasDataView: dataCheck,
+    },
+  };
+  return (
+    <SharedUxServicesProvider {...services}>
+      <KibanaNoDataPage
+        onDataViewCreated={action('onDataViewCreated')}
+        noDataConfig={noDataConfig}
+      />
+    </SharedUxServicesProvider>
+  );
+};
+
 PureComponent.argTypes = {
   solution: {
     control: 'text',

packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx

@@ -9,6 +9,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
+import { EuiLoadingElastic } from '@elastic/eui';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
 import { SharedUxServicesProvider, mockServicesFactory } from '@kbn/shared-ux-services';
 
@@ -68,4 +69,28 @@ describe('Kibana No Data Page', () => {
     expect(component.find(NoDataViews).length).toBe(1);
     expect(component.find(NoDataConfigPage).length).toBe(0);
   });
+
+  test('renders loading indicator', async () => {
+    const dataCheck = () => new Promise<boolean>((resolve, reject) => {});
+    const services = {
+      ...mockServicesFactory(),
+      data: {
+        hasESData: dataCheck,
+        hasUserDataView: dataCheck,
+        hasDataView: dataCheck,
+      },
+    };
+    const component = mountWithIntl(
+      <SharedUxServicesProvider {...services}>
+        <KibanaNoDataPage noDataConfig={noDataConfig} onDataViewCreated={onDataViewCreated} />
+      </SharedUxServicesProvider>
+    );
+
+    await act(() => new Promise(setImmediate));
+    component.update();
+
+    expect(component.find(EuiLoadingElastic).length).toBe(1);
+    expect(component.find(NoDataViews).length).toBe(0);
+    expect(component.find(NoDataConfigPage).length).toBe(0);
+  });
 });

packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 import React, { useEffect, useState } from 'react';
+import { EuiLoadingElastic } from '@elastic/eui';
 import { useData } from '@kbn/shared-ux-services';
 import { NoDataConfigPage, NoDataPageProps } from '../page_template';
 import { NoDataViews } from './no_data_views';
@@ -17,6 +18,7 @@ export interface Props {
 
 export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) => {
   const { hasESData, hasUserDataView } = useData();
+  const [isLoading, setIsLoading] = useState(true);
   const [dataExists, setDataExists] = useState(false);
   const [hasUserDataViews, setHasUserDataViews] = useState(false);
 
@@ -24,12 +26,19 @@ export const KibanaNoDataPage = ({ onDataViewCreated, noDataConfig }: Props) =>
     const checkData = async () => {
       setDataExists(await hasESData());
       setHasUserDataViews(await hasUserDataView());
+      setIsLoading(false);
     };
     // TODO: add error handling
     // https://github.com/elastic/kibana/issues/130913
-    checkData().catch(() => {});
+    checkData().catch(() => {
+      setIsLoading(false);
+    });
   }, [hasESData, hasUserDataView]);
 
+  if (isLoading) {
+    return <EuiLoadingElastic css={{ margin: 'auto' }} size="xxl" />;
+  }
+
   if (!dataExists) {
     return <NoDataConfigPage noDataConfig={noDataConfig} />;
   }