[Enterprise Search] Share Loading component

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.test.tsx

@@ -17,6 +17,8 @@ jest.mock('../../../shared/flash_messages', () => ({
 }));
 import { setQueuedErrorMessage } from '../../../shared/flash_messages';
 
+import { Loading } from '../loading';
+
 import { EngineRouter } from './';
 
 describe('EngineRouter', () => {
@@ -59,10 +61,10 @@ describe('EngineRouter', () => {
     );
   });
 
-  it('does not render if async data is still loading', () => {
+  it('renders a loading component if async data is still loading', () => {
     setMockValues({ ...values, dataLoading: true });
     const wrapper = shallow(<EngineRouter />);
-    expect(wrapper.isEmptyRender()).toBe(true);
+    expect(wrapper.find(Loading)).toHaveLength(1);
   });
 
   it('renders a default engine overview', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/engine/engine_router.tsx

@@ -45,6 +45,8 @@ import {
   // API_LOGS_TITLE,
 } from './constants';
 
+import { Loading } from '../loading';
+
 import { EngineLogic } from './';
 
 export const EngineRouter: React.FC = () => {
@@ -86,7 +88,9 @@ export const EngineRouter: React.FC = () => {
     return <Redirect to={ENGINES_PATH} />;
   }
 
-  if (dataLoading) return null;
+  if (dataLoading) {
+    return <Loading />;
+  }
 
   return (
     <Switch>

x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { Loading } from './loading';

x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.scss

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+.enterpriseSearchLoading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%);
+}

x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+import { Loading } from './';
+
+describe('Loading', () => {
+  it('renders', () => {
+    const wrapper = shallow(<Loading />);
+    expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
+  });
+});

x-pack/plugins/enterprise_search/public/applications/app_search/components/loading/loading.tsx

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
+
+import './loading.scss';
+
+export const Loading: React.FC = () => (
+  <div className="enterpriseSearchLoading">
+    <EuiLoadingSpinner size="xl" />
+  </div>
+);