[Enterprise Search] Share Loading component (#83246) (#83366)

* Add basic Loading component

- for pages with shifting layouts or where skeletal loading doesn't make sense

* Move Loading to shared components

* Update WS to use new shared Loading component

* Fix for non-Layout WS Overview page

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

Co-authored-by: Scotty Bollinger <[email protected]>

Co-authored-by: Scotty Bollinger <[email protected]>

Co-authored-by: Scotty Bollinger <[email protected]>

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 '../../../shared/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 '../../../shared/loading';
+
 import { EngineLogic } from './';
 
 export const EngineRouter: React.FC = () => {
@@ -86,7 +88,7 @@ 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/shared/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/workplace_search/components/shared/loading/loading.test.tsx → x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx

@@ -6,14 +6,14 @@
 
 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/workplace_search/components/shared/loading/loading.tsx → x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx

@@ -5,13 +5,12 @@
  */
 
 import React from 'react';
-
 import { EuiLoadingSpinner } from '@elastic/eui';
 
 import './loading.scss';
 
 export const Loading: React.FC = () => (
-  <div className="loadingSpinnerWrapper">
-    <EuiLoadingSpinner size="xl" className="loadingSpinner" />
+  <div className="enterpriseSearchLoading">
+    <EuiLoadingSpinner size="xl" />
   </div>
 );

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.test.tsx

@@ -21,7 +21,7 @@ import {
 import { ContentSection } from '../../../components/shared/content_section';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import { SourcesTable } from '../../../components/shared/sources_table';
-import { Loading } from '../../../components/shared/loading';
+import { Loading } from '../../../../shared/loading';
 
 import { EuiFieldText } from '@elastic/eui';
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_overview.tsx

@@ -26,7 +26,7 @@ import { AppLogic } from '../../../app_logic';
 import { TruncatedContent } from '../../../../shared/truncate';
 import { ContentSection } from '../../../components/shared/content_section';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
-import { Loading } from '../../../components/shared/loading';
+import { Loading } from '../../../../shared/loading';
 import { SourcesTable } from '../../../components/shared/sources_table';
 
 import { GroupUsersTable } from './group_users_table';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx

@@ -12,7 +12,7 @@ import { groups } from '../../../__mocks__/groups.mock';
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Loading } from '../../../components/shared/loading';
+import { Loading } from '../../../../shared/loading';
 
 import { GroupSourcePrioritization } from './group_source_prioritization';
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx

@@ -26,7 +26,7 @@ import {
   EuiTableRowCell,
 } from '@elastic/eui';
 
-import { Loading } from '../../../components/shared/loading';
+import { Loading } from '../../../../shared/loading';
 import { ViewContentHeader } from '../../../components/shared/view_content_header';
 import { SourceIcon } from '../../../components/shared/source_icon';
 

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.test.tsx

@@ -16,7 +16,7 @@ import { shallow } from 'enzyme';
 import { Groups } from './groups';
 
 import { ViewContentHeader } from '../../components/shared/view_content_header';
-import { Loading } from '../../components/shared/loading';
+import { Loading } from '../../../shared/loading';
 import { FlashMessages } from '../../../shared/flash_messages';
 
 import { AddGroupModal } from './components/add_group_modal';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/groups.tsx

@@ -14,7 +14,7 @@ import { EuiButton as EuiLinkButton } from '../../../shared/react_router_helpers
 
 import { AppLogic } from '../../app_logic';
 
-import { Loading } from '../../components/shared/loading';
+import { Loading } from '../../../shared/loading';
 import { ViewContentHeader } from '../../components/shared/view_content_header';
 
 import { getGroupPath, USERS_PATH } from '../../routes';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.test.tsx

@@ -11,7 +11,7 @@ import { mockActions, setMockValues } from './__mocks__';
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import { Loading } from '../../components/shared/loading';
+import { Loading } from '../../../shared/loading';
 import { ViewContentHeader } from '../../components/shared/view_content_header';
 
 import { OnboardingSteps } from './onboarding_steps';

x-pack/plugins/enterprise_search/public/applications/workplace_search/views/overview/overview.tsx

@@ -17,7 +17,7 @@ import { SendWorkplaceSearchTelemetry as SendTelemetry } from '../../../shared/t
 import { AppLogic } from '../../app_logic';
 import { OverviewLogic } from './overview_logic';
 
-import { Loading } from '../../components/shared/loading';
+import { Loading } from '../../../shared/loading';
 import { ProductButton } from '../../components/shared/product_button';
 import { ViewContentHeader } from '../../components/shared/view_content_header';
 
@@ -56,7 +56,14 @@ export const Overview: React.FC = () => {
     initializeOverview();
   }, [initializeOverview]);
 
-  if (dataLoading) return <Loading />;
+  // TODO: Remove div wrapper once the Overview page is using the full Layout
+  if (dataLoading) {
+    return (
+      <div style={{ height: '90vh' }}>
+        <Loading />
+      </div>
+    );
+  }
 
   const hideOnboarding = hasUsers && hasOrgSources && isOldAccount && orgName !== defaultOrgName;