diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx index 552ffa555377d..f544f21c35387 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx +++ b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.stories.tsx @@ -39,8 +39,9 @@ type Params = Pick & 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 ( { ); }; +export const PureComponentLoadingState = () => { + const dataCheck = () => new Promise((resolve, reject) => {}); + const services = { + ...servicesFactory({ hasESData: false, hasUserDataView: false, hasDataViews: false }), + data: { + hasESData: dataCheck, + hasUserDataView: dataCheck, + hasDataView: dataCheck, + }, + }; + return ( + + + + ); +}; + PureComponent.argTypes = { solution: { control: 'text', diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx index 82fbd222b3640..4f565e55ef52c 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.test.tsx +++ b/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((resolve, reject) => {}); + const services = { + ...mockServicesFactory(), + data: { + hasESData: dataCheck, + hasUserDataView: dataCheck, + hasDataView: dataCheck, + }, + }; + const component = mountWithIntl( + + + + ); + + 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); + }); }); diff --git a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx b/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx index 2e54d0d9f6a67..89ba915c07cfd 100644 --- a/packages/kbn-shared-ux-components/src/empty_state/kibana_no_data_page.tsx +++ b/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 ; + } + if (!dataExists) { return ; }