Skip to content

Commit

Permalink
[Enterprise Search] Share Loading component (#83246)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
Constance and scottybollinger authored Nov 13, 2020
1 parent aba2068 commit 35faf8c
Show file tree
Hide file tree
Showing 15 changed files with 38 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ import {
// API_LOGS_TITLE,
} from './constants';

import { Loading } from '../../../shared/loading';

import { EngineLogic } from './';

export const EngineRouter: React.FC = () => {
Expand Down Expand Up @@ -86,7 +88,7 @@ export const EngineRouter: React.FC = () => {
return <Redirect to={ENGINES_PATH} />;
}

if (dataLoading) return null;
if (dataLoading) return <Loading />;

return (
<Switch>
Expand Down
Original file line number Diff line number Diff line change
@@ -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%);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;

Expand Down

0 comments on commit 35faf8c

Please sign in to comment.