Skip to content

Commit

Permalink
Convert examples using EuiSkeletonTexts isLoading API/wrapper
Browse files Browse the repository at this point in the history
- using this API has improved screen reader accessibility + announcements on load
  • Loading branch information
cee-chen committed May 11, 2023
1 parent 327626a commit e6ceb36
Show file tree
Hide file tree
Showing 13 changed files with 113 additions and 115 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React, { useMemo } from 'react';
import type { FC } from 'react';
import { css } from '@emotion/react';
import {
EuiLoadingContent,
EuiSkeletonText,
EuiImage,
EuiEmptyPrompt,
EuiButton,
Expand Down Expand Up @@ -116,13 +116,16 @@ const EmptyViewerStateComponent: FC<EmptyViewerStateProps> = ({
listType,
]);

if (viewerStatus === ViewerStatus.LOADING || viewerStatus === ViewerStatus.SEARCHING)
return <EuiLoadingContent lines={4} data-test-subj="loadingViewerState" />;

return (
<EuiPanel css={panelCss} color={viewerStatus === 'empty_search' ? 'subdued' : 'transparent'}>
<EuiEmptyPrompt {...euiEmptyPromptProps} />
</EuiPanel>
<EuiSkeletonText
lines={4}
data-test-subj="loadingViewerState"
isLoading={viewerStatus === ViewerStatus.LOADING || viewerStatus === ViewerStatus.SEARCHING}
>
<EuiPanel css={panelCss} color={viewerStatus === 'empty_search' ? 'subdued' : 'transparent'}>
<EuiEmptyPrompt {...euiEmptyPromptProps} />
</EuiPanel>
</EuiSkeletonText>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
EuiFlyoutBody,
EuiFlyoutHeader,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiPortal,
EuiSpacer,
EuiTabbedContent,
Expand Down Expand Up @@ -166,16 +166,17 @@ export function SpanFlyout({
)}
</EuiFlyoutHeader>
<EuiFlyoutBody>
{isLoading && <EuiLoadingContent />}
{span && (
<SpanFlyoutBody
span={span}
parentTransaction={parentTransaction}
totalDuration={totalDuration}
spanLinksCount={spanLinksCount}
flyoutDetailTab={flyoutDetailTab}
/>
)}
<EuiSkeletonText isLoading={isLoading}>
{span && (
<SpanFlyoutBody
span={span}
parentTransaction={parentTransaction}
totalDuration={totalDuration}
spanLinksCount={spanLinksCount}
flyoutDetailTab={flyoutDetailTab}
/>
)}
</EuiSkeletonText>
</EuiFlyoutBody>
</ResponsiveFlyout>
</EuiPortal>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
EuiFlyoutBody,
EuiFlyoutHeader,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiPortal,
EuiSpacer,
EuiTabbedContent,
Expand Down Expand Up @@ -91,16 +91,17 @@ export function TransactionFlyout({
</EuiFlexGroup>
</EuiFlyoutHeader>
<EuiFlyoutBody>
{isLoading && <EuiLoadingContent />}
{transaction && (
<TransactionFlyoutBody
transaction={transaction!}
errorCount={errorCount}
rootTransactionDuration={rootTransactionDuration}
spanLinksCount={spanLinksCount}
flyoutDetailTab={flyoutDetailTab}
/>
)}
<EuiSkeletonText isLoading={isLoading}>
{transaction && (
<TransactionFlyoutBody
transaction={transaction!}
errorCount={errorCount}
rootTransactionDuration={rootTransactionDuration}
spanLinksCount={spanLinksCount}
flyoutDetailTab={flyoutDetailTab}
/>
)}
</EuiSkeletonText>
</EuiFlyoutBody>
</ResponsiveFlyout>
</EuiPortal>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import React from 'react';

import { shallow } from 'enzyme';

import { EuiCopy, EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText, EuiCopy } from '@elastic/eui';

import { DEFAULT_META } from '../../../shared/constants';
import { externalUrl } from '../../../shared/enterprise_search_url';
Expand Down Expand Up @@ -62,7 +62,7 @@ describe('Credentials', () => {
setMockValues({ ...values, dataLoading: true });
const wrapper = shallow(<Credentials />);
expect(wrapper.find('[data-test-subj="CreateAPIKeyButton"]')).toHaveLength(0);
expect(wrapper.find(EuiLoadingContent)).toHaveLength(1);
expect(wrapper.find(EuiSkeletonText).prop('isLoading')).toEqual(true);
});

it('renders the API endpoint and a button to copy it', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
EuiButton,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';

Expand Down Expand Up @@ -112,7 +112,9 @@ export const Credentials: React.FC = () => {
</EuiPageContentHeader>
<EuiSpacer size="m" />
<EuiPanel hasBorder>
{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}
<EuiSkeletonText lines={3} isLoading={!!dataLoading}>
<CredentialsList />
</EuiSkeletonText>
</EuiPanel>
</AppSearchPageTemplate>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React from 'react';

import { shallow } from 'enzyme';

import { EuiLoadingContent, EuiEmptyPrompt } from '@elastic/eui';
import { EuiSkeletonText, EuiEmptyPrompt } from '@elastic/eui';

import { mountWithIntl } from '../../../../../test_helpers';

Expand Down Expand Up @@ -63,7 +63,7 @@ describe('OrganicDocuments', () => {
setMockValues({ ...values, organicDocumentsLoading: true });
const wrapper = shallow(<OrganicDocuments />);

expect(wrapper.find(EuiLoadingContent)).toHaveLength(1);
expect(wrapper.find(EuiSkeletonText).prop('isLoading')).toEqual(true);
});

describe('empty state', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';

import { useValues, useActions } from 'kea';

import { EuiLoadingContent, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiSkeletonText, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import type { SearchResult } from '@elastic/search-ui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
Expand Down Expand Up @@ -45,54 +45,54 @@ export const OrganicDocuments: React.FC = () => {
</h2>
}
>
{hasDocuments ? (
<EuiFlexGroup direction="column" gutterSize="s">
{documents.map((document: SearchResult, index) => (
<EuiFlexItem key={index}>
<CurationResult
result={document}
index={index}
actions={
isAutomated
? []
: [
{
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(document.id.raw),
},
{
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(document.id.raw),
},
]
}
<EuiSkeletonText lines={5} isLoading={organicDocumentsLoading}>
{hasDocuments ? (
<EuiFlexGroup direction="column" gutterSize="s">
{documents.map((document: SearchResult, index) => (
<EuiFlexItem key={index}>
<CurationResult
result={document}
index={index}
actions={
isAutomated
? []
: [
{
...HIDE_DOCUMENT_ACTION,
onClick: () => addHiddenId(document.id.raw),
},
{
...PROMOTE_DOCUMENT_ACTION,
onClick: () => addPromotedId(document.id.raw),
},
]
}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
) : (
<EuiEmptyPrompt
body={
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.curations.organicDocuments.description"
defaultMessage="No organic results to display.{manualDescription}"
values={{
manualDescription: !isAutomated && (
<>
{' '}
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.curations.organicDocuments.manualDescription"
defaultMessage="Add or change the active query above."
/>
</>
),
}}
/>
</EuiFlexItem>
))}
</EuiFlexGroup>
) : organicDocumentsLoading ? (
<EuiLoadingContent lines={5} />
) : (
<EuiEmptyPrompt
body={
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.curations.organicDocuments.description"
defaultMessage="No organic results to display.{manualDescription}"
values={{
manualDescription: !isAutomated && (
<>
{' '}
<FormattedMessage
id="xpack.enterpriseSearch.appSearch.engine.curations.organicDocuments.manualDescription"
defaultMessage="Add or change the active query above."
/>
</>
),
}}
/>
}
/>
)}
}
/>
)}
</EuiSkeletonText>
</DataPanel>
);
};
8 changes: 3 additions & 5 deletions x-pack/plugins/ml/public/application/explorer/explorer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
EuiPageHeaderSection,
EuiSpacer,
EuiTitle,
EuiLoadingContent,
EuiSkeletonText,
EuiPanel,
EuiAccordion,
EuiBadge,
Expand Down Expand Up @@ -713,11 +713,9 @@ export const Explorer: FC<ExplorerUIProps> = ({

<EuiSpacer size={'m'} />

{loading ? (
<EuiLoadingContent lines={10} />
) : (
<EuiSkeletonText lines={10} isLoading={loading}>
<InfluencersList influencers={influencers} influencerFilter={applyFilter} />
)}
</EuiSkeletonText>
</div>
</EuiResizablePanel>

Expand Down
10 changes: 5 additions & 5 deletions x-pack/plugins/ml/public/application/routing/router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import type {
} from '@kbn/core/public';
import type { DataViewsContract } from '@kbn/data-views-plugin/public';

import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { UrlStateProvider } from '@kbn/ml-url-state';
import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
import { SavedObjectsClientContract } from '@kbn/core/public';
Expand Down Expand Up @@ -74,10 +74,10 @@ export interface PageDependencies {
}

export const PageLoader: FC<{ context: MlContextValue }> = ({ context, children }) => {
return context === null ? (
<EuiLoadingContent lines={10} />
) : (
<MlContext.Provider value={context}>{children}</MlContext.Provider>
return (
<EuiSkeletonText lines={10} isLoading={context === null}>
<MlContext.Provider value={context}>{children}</MlContext.Provider>
</EuiSkeletonText>
);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
EuiFormRow,
EuiHealth,
EuiIcon,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
EuiSwitch,
EuiText,
Expand Down Expand Up @@ -207,9 +207,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
</>
)}

{isLoading ? (
<EuiLoadingContent />
) : (
<EuiSkeletonText isLoading={isLoading}>
<EuiForm
component="form"
isInvalid={form.isInvalid}
Expand Down Expand Up @@ -424,7 +422,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
{/* Hidden submit button is required for enter key to trigger form submission */}
<input type="submit" hidden />
</EuiForm>
)}
</EuiSkeletonText>
</FormFlyout>
);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ import {
EuiForm,
EuiFormRow,
EuiIcon,
EuiLoadingContent,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiSkeletonText,
EuiSpacer,
EuiText,
useGeneratedHtmlId,
Expand Down Expand Up @@ -162,9 +162,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
{isLoading ? (
<EuiLoadingContent />
) : (
<EuiSkeletonText isLoading={isLoading}>
<EuiForm
id={modalFormId}
component="form"
Expand Down Expand Up @@ -282,7 +280,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
/>
</EuiFormRow>
</EuiForm>
)}
</EuiSkeletonText>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty
Expand Down
Loading

0 comments on commit e6ceb36

Please sign in to comment.