github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

Upgrade EUI to v79.0.1 (#156925)

Browse source 
## Summary

`eui@77.2.2` ⏩ `eui@79.0.1`

🦴 The primary changes in this upgrade are around the deprecated
`EuiLoadingContent` being removed in favor of `EuiSkeletonText`.
- Most instances have been a [direct swap of
usage](327626a7be),
but [some replacements were a bit more
opinionated](e6ceb36a75)
as I saw them as potential to take advantage of `EuiSkeletonText`'s
syntactical sugar and screen reader announcements for when state
switches to loaded.

---

## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1)

**Bug fixes**

- Fixed broken push `EuiFlyout` behavior
([#6764](https://github.com/elastic/eui/pull/6764))


## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0)

- Updated all `EuiSkeleton` components with new props that allow for
more control over screen reader live announcements:
`announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps`
([#6752](https://github.com/elastic/eui/pull/6752))
- Improved keyboard accessibility in `EuiPageHeader` by ensuring the
right side menu items come into focus from left to right.
([#6753](https://github.com/elastic/eui/pull/6753))

**Breaking changes**

- Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton`
components instead. ([#6754](https://github.com/elastic/eui/pull/6754))


## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0)

- Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and
`EuiSwitch` in their unchecked states to meet WCAG AA guidelines.
([#6729](https://github.com/elastic/eui/pull/6729))
- Added React Testing Library `*ByTestSubject` custom commands to
`within()`. RTL utilities can be imported from
`@elastic/eui/lib/test/rtl`.
([#6737](https://github.com/elastic/eui/pull/6737))
- Updated `EuiAvatar` to support a new letter `casing` prop that allow
customizing text capitalization
([#6739](https://github.com/elastic/eui/pull/6739))
- Updated `EuiFocusTrap` to support the `gapMode` prop configuration
(now defaults to `padding`)
([#6744](https://github.com/elastic/eui/pull/6744))

**Bug fixes**

- Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL
and query string generation
([#6717](https://github.com/elastic/eui/pull/6717))
- Fixed `EuiFieldNumber`'s native browser validity detection causing
extra unnecessary rerenders
([#6741](https://github.com/elastic/eui/pull/6741))
- Fixed the `scrollLock` property on `EuiFocusTrap` (and other
components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to
no longer block scrolling on nested portalled content, such as combobox
dropdowns ([#6744](https://github.com/elastic/eui/pull/6744))

**Breaking changes**

- `EuiAvatar`s with the default `user` type will now default to
capitalizing all initials in uppercase
([#6739](https://github.com/elastic/eui/pull/6739))

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Cee Chen 2023-05-15 14:09:31 -07:00 • committed by GitHub
parent 49c77f22cf
commit b9ea4ce4f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
122 changed files with 398 additions and 430 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -97,7 +97,7 @@
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3",
"@elastic/ems-client": "8.4.0",
"@elastic/eui": "77.2.2",
"@elastic/eui": "79.0.1",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",

12
packages/kbn-cases-components/src/tooltip/skeleton.tsx
View file

@ -7,13 +7,19 @@
*/
import React from 'react';
import { EuiFlexItem, EuiLoadingContent, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
import {
EuiFlexItem,
EuiSkeletonTitle,
EuiSkeletonText,
EuiHorizontalRule,
EuiSpacer,
} from '@elastic/eui';
const SkeletonComponent: React.FC = () => {
return (
<EuiFlexItem css={{ width: 240 }} data-test-subj="tooltip-loading-content">
<EuiLoadingContent lines={1} css={{ width: 70, marginBottom: '12px' }} />
<EuiLoadingContent lines={3} />
<EuiSkeletonTitle size="xxxs" css={{ width: 70, marginBottom: '12px' }} />
<EuiSkeletonText lines={3} />
<EuiHorizontalRule margin="xs" />
<EuiSpacer size="s" />
</EuiFlexItem>

17
packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx
View file

@ -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,
@ -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>
);
};

16
packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap generated
View file

@ -127,7 +127,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -166,7 +166,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -265,7 +265,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -304,7 +304,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -460,7 +460,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -499,7 +499,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -598,7 +598,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>
@ -637,7 +637,7 @@ Object {
>
<div
aria-label=""
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-m-user-subdued"
class="euiAvatar euiAvatar--m euiAvatar--user euiCommentAvatar emotion-euiAvatar-user-m-uppercase-subdued"
role="img"
title=""
>

16
packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap generated
View file

@ -152,7 +152,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -539,7 +539,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -822,7 +822,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1048,7 +1048,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1303,7 +1303,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1502,7 +1502,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -1758,7 +1758,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -2039,7 +2039,7 @@ Object {
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"

2
packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap generated
View file

@ -35,7 +35,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"

2
src/dev/license_checker/config.ts
View file

@ -85,6 +85,6 @@ export const LICENSE_OVERRIDES = {
'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
'@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
'@elastic/ems-client@8.4.0': ['Elastic License 2.0'],
'@elastic/eui@77.2.2': ['SSPL-1.0 OR Elastic License 2.0'],
'@elastic/eui@79.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
};

4
src/plugins/console/public/application/components/editor_content_spinner.tsx
View file

@ -7,12 +7,12 @@
*/
import React, { FunctionComponent } from 'react';
import { EuiLoadingContent, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
import { EuiSkeletonText, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
export const EditorContentSpinner: FunctionComponent = () => {
return (
<EuiPageContent className="conApp__editor__spinner">
<EuiLoadingContent lines={10} />
<EuiSkeletonText lines={10} />
</EuiPageContent>
);
};

4
src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap generated
View file

@ -15,7 +15,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
<EuiDelayRender
delay={500}
>
<EuiLoadingContent
<EuiSkeletonText
lines={4}
/>
</EuiDelayRender>
@ -48,7 +48,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
<EuiDelayRender
delay={500}
>
<EuiLoadingContent
<EuiSkeletonText
lines={4}
/>
</EuiDelayRender>

6
src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
import type { FieldFormat, FieldFormatParams } from '@kbn/field-formats-plugin/common';
import { memoize } from 'lodash';
import React, { LazyExoticComponent, PureComponent } from 'react';
@ -62,10 +62,10 @@ export class FormatEditor extends PureComponent<FormatEditorProps, FormatEditorS
<React.Suspense
fallback={
// We specify minHeight to avoid too mitigate layout shifts while loading an editor
// ~430 corresponds to "4 lines" of EuiLoadingContent
// ~430 corresponds to "4 lines" of EuiSkeletonText
<div style={{ minHeight: 430, marginTop: 8 }}>
<EuiDelayRender>
<EuiLoadingContent lines={4} />
<EuiSkeletonText lines={4} />
</EuiDelayRender>
</div>
}

4
src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap generated
View file

@ -15,7 +15,7 @@ exports[`FieldFormatEditor should render normally 1`] = `
<EuiDelayRender
delay={500}
>
<EuiLoadingContent
<EuiSkeletonText
lines={4}
/>
</EuiDelayRender>
@ -48,7 +48,7 @@ exports[`FieldFormatEditor should render nothing if there is no editor for the f
<EuiDelayRender
delay={500}
>
<EuiLoadingContent
<EuiSkeletonText
lines={4}
/>
</EuiDelayRender>

6
src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
import type {
FieldFormatEditor as InnerFieldFormatEditor,
FieldFormatEditorFactory,
@ -67,10 +67,10 @@ export class FieldFormatEditor extends PureComponent<
<React.Suspense
fallback={
// We specify minHeight to avoid too mitigate layout shifts while loading an editor
// ~430 corresponds to "4 lines" of EuiLoadingContent
// ~430 corresponds to "4 lines" of EuiSkeletonText
<div style={{ minHeight: 430, marginTop: 8 }}>
<EuiDelayRender>
<EuiLoadingContent lines={4} />
<EuiSkeletonText lines={4} />
</EuiDelayRender>
</div>
}

6
src/plugins/discover/public/plugin.tsx
View file

@ -26,7 +26,7 @@ import { SharePluginStart, SharePluginSetup } from '@kbn/share-plugin/public';
import { UrlForwardingSetup, UrlForwardingStart } from '@kbn/url-forwarding-plugin/public';
import { HomePublicPluginSetup } from '@kbn/home-plugin/public';
import { Start as InspectorPublicPluginStart } from '@kbn/inspector-plugin/public';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
import { SavedObjectsStart } from '@kbn/saved-objects-plugin/public';
import { DEFAULT_APP_CATEGORIES } from '@kbn/core/public';
@ -248,7 +248,7 @@ export class DiscoverPlugin
<React.Suspense
fallback={
<DeferredSpinner>
<EuiLoadingContent />
<EuiSkeletonText />
</DeferredSpinner>
}
>
@ -266,7 +266,7 @@ export class DiscoverPlugin
<React.Suspense
fallback={
<DeferredSpinner>
<EuiLoadingContent />
<EuiSkeletonText />
</DeferredSpinner>
}
>

6
src/plugins/es_ui_shared/public/components/code_editor/index.tsx
View file

@ -7,18 +7,18 @@
*/
import React from 'react';
import { EuiLoadingContentProps, EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonTextProps, EuiSkeletonText } from '@elastic/eui';
import type { EuiCodeEditorProps } from './code_editor';
const Placeholder = ({ height }: { height?: string }) => {
const numericalHeight = height ? parseInt(height, 10) : 0;
// The height of one EuiLoadingContent line is 24px.
// The height of one EuiSkeletonText line is 24px.
const lineHeight = 24;
const calculatedLineCount =
numericalHeight < lineHeight ? 1 : Math.floor(numericalHeight / lineHeight);
const lines = Math.min(10, calculatedLineCount);
return <EuiLoadingContent lines={lines as EuiLoadingContentProps['lines']} />;
return <EuiSkeletonText lines={lines as EuiSkeletonTextProps['lines']} />;
};
const LazyEuiCodeEditor = React.lazy(() => import('./code_editor'));

6
src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap generated
View file

@ -34,7 +34,7 @@ exports[`KibanaPageTemplate render basic template 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
@ -205,7 +205,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
>
<div
aria-label="Solution"
class="euiAvatar euiAvatar--m euiAvatar--user kbnPageTemplateSolutionNavAvatar emotion-euiAvatar-m-user-plain"
class="euiAvatar euiAvatar--m euiAvatar--user kbnPageTemplateSolutionNavAvatar emotion-euiAvatar-user-m-uppercase-plain"
role="img"
title="Solution"
>
@ -414,7 +414,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"

4
src/plugins/saved_objects_finder/public/finder/index.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
import React from 'react';
import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
import { HttpStart } from '@kbn/core-http-browser';
@ -19,7 +19,7 @@ const SavedObjectFinder = (props: SavedObjectFinderProps) => (
<React.Suspense
fallback={
<EuiDelayRender delay={300}>
<EuiLoadingContent />
<EuiSkeletonText />
</EuiDelayRender>
}
>

40
src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap generated
View file

@ -23,8 +23,27 @@ exports[`Intro component renders correctly 1`] = `
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-wrap-l-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-danger"
data-test-subj="savedObjectEditDelete"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
color="inherit"
data-euiicon-type="trash"
/>
Delete
</span>
</button>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
@ -45,25 +64,6 @@ exports[`Intro component renders correctly 1`] = `
</span>
</a>
</div>
<div
class="euiFlexItem emotion-euiFlexItem-growZero"
>
<button
class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-danger"
data-test-subj="savedObjectEditDelete"
type="button"
>
<span
class="emotion-euiButtonDisplayContent"
>
<span
color="inherit"
data-euiicon-type="trash"
/>
Delete
</span>
</button>
</div>
</div>
</div>
</div>

4
test/functional/apps/kibana_overview/_page_header.ts
View file

@ -37,7 +37,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const items = await header.findAllByCssSelector('.kbnRedirectCrossAppLinks');
expect(items!.length).to.be(3);
const integrations = await items!.at(0);
const integrations = await items!.at(2);
await integrations!.click();
await PageObjects.common.waitUntilUrlIncludes('app/integrations/browse');
});
@ -61,7 +61,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
const header = await find.byCssSelector('.euiPageHeaderContent');
const items = await header.findAllByCssSelector('.kbnRedirectCrossAppLinks');
const devTools = await items!.at(2);
const devTools = await items!.at(0);
await devTools!.click();
await PageObjects.common.waitUntilUrlIncludes('app/dev_tools');
});

4
x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx
View file

@ -17,7 +17,7 @@ import {
EuiComboBox,
EuiComboBoxOptionOption,
EuiFormRow,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import { Filter, Query } from '@kbn/es-query';
@ -302,7 +302,7 @@ export const LogCategorizationPage: FC = () => {
</>
) : null}
{loading === true ? <EuiLoadingContent lines={10} /> : null}
{loading === true ? <EuiSkeletonText lines={10} /> : null}
<InformationText
loading={loading}

4
x-pack/plugins/aiops/public/shared_lazy_components.tsx
View file

@ -7,7 +7,7 @@
import React, { FC, Suspense } from 'react';
import { EuiErrorBoundary, EuiLoadingContent } from '@elastic/eui';
import { EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
import type { ExplainLogRateSpikesAppStateProps } from './components/explain_log_rate_spikes';
import type { LogCategorizationAppStateProps } from './components/log_categorization';
import type { ChangePointDetectionAppStateProps } from './components/change_point_detection';
@ -18,7 +18,7 @@ const ExplainLogRateSpikesAppStateLazy = React.lazy(
const LazyWrapper: FC = ({ children }) => (
<EuiErrorBoundary>
<Suspense fallback={<EuiLoadingContent lines={3} />}>{children}</Suspense>
<Suspense fallback={<EuiSkeletonText lines={3} />}>{children}</Suspense>
</EuiErrorBoundary>
);

8
x-pack/plugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
View file

@ -12,9 +12,9 @@ import {
EuiFlexItem,
EuiIcon,
EuiLink,
EuiLoadingContent,
EuiPagination,
EuiPanel,
EuiSkeletonText,
EuiSpacer,
EuiTab,
EuiTabs,
@ -252,7 +252,7 @@ export function ErrorSampleDetails({
{isLoading ? (
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
<EuiLoadingContent lines={2} data-test-sub="loading-content" />
<EuiSkeletonText lines={2} data-test-sub="loading-content" />
</EuiFlexItem>
) : (
<Summary
@ -334,7 +334,7 @@ export function ErrorSampleDetails({
{isLoading ? (
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
<EuiLoadingContent lines={3} data-test-sub="loading-content" />
<EuiSkeletonText lines={3} data-test-sub="loading-content" />
</EuiFlexItem>
) : (
<SampleSummary error={error} />
@ -363,7 +363,7 @@ export function ErrorSampleDetails({
</EuiTabs>
<EuiSpacer />
{isLoading || !error ? (
<EuiLoadingContent lines={3} data-test-sub="loading-content" />
<EuiSkeletonText lines={3} data-test-sub="loading-content" />
) : (
<TabContent error={error} currentTab={currentTab} />
)}

4
x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/metric_item.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { Chart, Metric, MetricDatum } from '@elastic/charts';
import { EuiLoadingContent, EuiPanel } from '@elastic/eui';
import { EuiSkeletonText, EuiPanel } from '@elastic/eui';
import { isEmpty } from 'lodash';
export function MetricItem({
@ -33,7 +33,7 @@ export function MetricItem({
>
{!hasData && isLoading ? (
<EuiPanel hasBorder={true}>
<EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} />
</EuiPanel>
) : (
<Chart>

4
x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_stat.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexItem, EuiLoadingContent } from '@elastic/eui';
import { EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import React, { PropsWithChildren } from 'react';
interface Props {
@ -21,7 +21,7 @@ export function ServiceStat({
return (
<EuiFlexItem grow={grow}>
{loading ? (
<EuiLoadingContent lines={1} style={{ marginTop: '4px' }} />
<EuiSkeletonText lines={1} style={{ marginTop: '4px' }} />
) : (
<>{children}</>
)}

4
x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiLoadingContent } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { get } from 'lodash';
import React from 'react';
@ -109,7 +109,7 @@ export function InstanceDetails({
if (isPending(status)) {
return (
<div style={{ width: '50%' }}>
<EuiLoadingContent data-test-subj="loadingSpinner" />
<EuiSkeletonText data-test-subj="loadingSpinner" />
</div>
);
}

4
x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import {
EuiLoadingContent,
EuiSkeletonText,
EuiTitle,
EuiFlexGroup,
EuiFlexItem,
@ -134,7 +134,7 @@ export function StorageDetailsPerService({
if (isPending(status)) {
return (
<div style={{ width: '50%' }}>
<EuiLoadingContent data-test-subj="loadingSpinner" />
<EuiSkeletonText data-test-subj="loadingSpinner" />
</div>
);
}

4
x-pack/plugins/apm/public/components/app/storage_explorer/summary_stats.tsx
View file

@ -17,7 +17,7 @@ import {
EuiToolTip,
EuiIcon,
EuiProgress,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
} from '@elastic/eui';
import { useEuiTheme } from '@elastic/eui';
@ -256,7 +256,7 @@ function SummaryMetric({
{loading && !hasData && (
<>
<EuiSpacer size="s" />
<EuiLoadingContent lines={2} />
<EuiSkeletonText lines={2} />
</>
)}
{hasData && (

4
x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
View file

@ -12,7 +12,7 @@ import {
EuiPagination,
EuiSpacer,
EuiTitle,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useEffect, useState } from 'react';
@ -151,7 +151,7 @@ export function WaterfallWithSummary<TSample extends {}>({
{isLoading || !entryTransaction ? (
<EuiFlexItem grow={false}>
<EuiSpacer size="s" />
<EuiLoadingContent lines={1} data-test-sub="loading-content" />
<EuiSkeletonText lines={1} data-test-sub="loading-content" />
</EuiFlexItem>
) : (
<EuiFlexItem grow={false}>

4
x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiSpacer, EuiTab, EuiTabs, EuiLoadingContent } from '@elastic/eui';
import { EuiSpacer, EuiTab, EuiTabs, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { LogStream } from '@kbn/infra-plugin/public';
import React, { useMemo } from 'react';
@ -121,7 +121,7 @@ export function TransactionTabs({
<EuiSpacer />
{isLoading || !transaction ? (
<EuiLoadingContent lines={3} data-test-sub="loading-content" />
<EuiSkeletonText lines={3} data-test-sub="loading-content" />
) : (
<> {TabContent}</>
)}

23
x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx
View file

@ -13,7 +13,7 @@ import {
EuiFlyoutBody,
EuiFlyoutHeader,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiPortal,
EuiSpacer,
EuiTabbedContent,
@ -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>

23
x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx
View file

@ -11,7 +11,7 @@ import {
EuiFlyoutBody,
EuiFlyoutHeader,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiPortal,
EuiSpacer,
EuiTabbedContent,
@ -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>

4
x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
View file

@ -16,7 +16,7 @@ import {
EuiFlyoutHeader,
EuiHorizontalRule,
EuiIcon,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
EuiText,
EuiTitle,
@ -108,7 +108,7 @@ export function LabsFlyout({ onClose }: Props) {
</EuiFlyoutHeader>
{isLoading ? (
<EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} />
) : (
<>
<EuiFlyoutBody>

20
x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
View file

@ -9,7 +9,7 @@ import {
EuiPageHeaderProps,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonTitle,
EuiIcon,
} from '@elastic/eui';
import React from 'react';
@ -68,14 +68,16 @@ export function ServiceGroupTemplate({
responsive={false}
>
<EuiFlexItem grow={false}>
{loadingServiceGroupName ? (
<EuiLoadingContent lines={2} style={{ width: 180, height: 40 }} />
) : (
serviceGroupName ||
i18n.translate('xpack.apm.serviceGroup.allServices.title', {
defaultMessage: 'Services',
})
)}
<EuiSkeletonTitle
size="l"
style={{ width: 180 }}
isLoading={loadingServiceGroupName}
>
{serviceGroupName ||
i18n.translate('xpack.apm.serviceGroup.allServices.title', {
defaultMessage: 'Services',
})}
</EuiSkeletonTitle>
</EuiFlexItem>
</EuiFlexGroup>
);

4
x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx
View file

@ -7,7 +7,7 @@
import {
EuiButtonIcon,
EuiLoadingContent,
EuiSkeletonText,
EuiPopover,
EuiPopoverTitle,
} from '@elastic/eui';
@ -60,7 +60,7 @@ export function IconPopover({
<EuiPopoverTitle>{title}</EuiPopoverTitle>
<div style={{ minWidth: 300 }}>
{isLoading ? (
<EuiLoadingContent data-test-subj="loading-content" />
<EuiSkeletonText data-test-subj="loading-content" />
) : (
children
)}

4
x-pack/plugins/cases/public/components/all_cases/table.tsx
View file

@ -8,7 +8,7 @@
import type { FunctionComponent, MutableRefObject } from 'react';
import React, { useCallback } from 'react';
import type { EuiTableSelectionType, EuiBasicTableProps, Pagination } from '@elastic/eui';
import { EuiEmptyPrompt, EuiLoadingContent, EuiBasicTable } from '@elastic/eui';
import { EuiEmptyPrompt, EuiSkeletonText, EuiBasicTable } from '@elastic/eui';
import classnames from 'classnames';
import styled from 'styled-components';
@ -74,7 +74,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
return isCasesLoading && isDataEmpty ? (
<Div>
<EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
<EuiSkeletonText data-test-subj="initialLoadingPanelAllCases" lines={10} />
</Div>
) : (
<>

4
x-pack/plugins/cases/public/components/files/files_table.tsx
View file

@ -9,7 +9,7 @@ import React, { useCallback, useState } from 'react';
import type { Pagination, EuiBasicTableProps } from '@elastic/eui';
import type { FileJSON } from '@kbn/shared-ux-file-types';
import { EuiBasicTable, EuiLoadingContent, EuiSpacer, EuiText, EuiEmptyPrompt } from '@elastic/eui';
import { EuiBasicTable, EuiSkeletonText, EuiSpacer, EuiText, EuiEmptyPrompt } from '@elastic/eui';
import * as i18n from './translations';
import { useFilesTableColumns } from './use_files_table_columns';
@ -58,7 +58,7 @@ export const FilesTable = ({ caseId, items, pagination, onChange, isLoading }: F
return isLoading ? (
<>
<EuiSpacer size="l" />
<EuiLoadingContent data-test-subj="cases-files-table-loading" lines={10} />
<EuiSkeletonText data-test-subj="cases-files-table-loading" lines={10} />
</>
) : (
<>

4
x-pack/plugins/cases/public/components/recent_cases/loading_placeholders.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent, EuiSpacer } from '@elastic/eui';
import { EuiSkeletonText, EuiSpacer } from '@elastic/eui';
import React from 'react';
const LoadingPlaceholdersComponent: React.FC<{
@ -15,7 +15,7 @@ const LoadingPlaceholdersComponent: React.FC<{
<>
{[...Array(placeholders).keys()].map((_, i) => (
<React.Fragment key={i}>
<EuiLoadingContent lines={lines} data-test-subj={'loadingPlaceholders'} />
<EuiSkeletonText lines={lines} data-test-subj={'loadingPlaceholders'} />
{i !== placeholders - 1 && <EuiSpacer size="l" />}
</React.Fragment>
))}

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
View file

@ -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';
@ -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', () => {

6
x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
View file

@ -18,7 +18,7 @@ import {
EuiButton,
EuiPageContentHeader_Deprecated as EuiPageContentHeader,
EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -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>
);

4
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.test.tsx
View file

@ -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';
@ -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', () => {

96
x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.tsx
View file

@ -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';
@ -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>
);
};

4
x-pack/plugins/file_upload/public/api/geo_upload_wizard_async_wrapper.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { FileUploadComponentProps, lazyLoadModules } from '../lazy_load_bundle';
interface State {
@ -36,6 +36,6 @@ export class GeoUploadWizardAsyncWrapper extends React.Component<FileUploadCompo
render() {
const { GeoUploadWizard } = this.state;
return GeoUploadWizard ? <GeoUploadWizard {...this.props} /> : <EuiLoadingContent lines={3} />;
return GeoUploadWizard ? <GeoUploadWizard {...this.props} /> : <EuiSkeletonText lines={3} />;
}
}

4
x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { lazyLoadModules } from '../lazy_load_bundle';
import { IndexNameFormProps } from '..';
@ -38,6 +38,6 @@ export class IndexNameFormAsyncWrapper extends React.Component<IndexNameFormProp
render() {
const { IndexNameForm } = this.state;
return IndexNameForm ? <IndexNameForm {...this.props} /> : <EuiLoadingContent lines={3} />;
return IndexNameForm ? <IndexNameForm {...this.props} /> : <EuiSkeletonText lines={3} />;
}
}

4
x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_attrs_details.tsx
View file

@ -16,7 +16,7 @@ import {
EuiInMemoryTable,
EuiSpacer,
EuiPortal,
EuiLoadingContent,
EuiSkeletonText,
EuiCallOut,
EuiButton,
} from '@elastic/eui';
@ -32,7 +32,7 @@ export const NodeAttrsDetails: React.FunctionComponent<Props> = ({ close, select
const { data, isLoading, error, resendRequest } = useLoadNodeDetails(selectedNodeAttrs);
let content;
if (isLoading) {
content = <EuiLoadingContent lines={3} />;
content = <EuiSkeletonText lines={3} />;
} else if (error) {
const { statusCode, message } = error;
content = (

4
x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiLoadingContent, EuiSpacer, EuiText } from '@elastic/eui';
import { EuiFlexGroup, EuiSkeletonText, EuiSpacer, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
@ -161,7 +161,7 @@ export const Expression: React.FC<Props> = (props) => {
}
}, [metadata, derivedIndexPattern, defaultExpression, source, space]); // eslint-disable-line react-hooks/exhaustive-deps
if (isLoadingMLCapabilities) return <EuiLoadingContent lines={10} />;
if (isLoadingMLCapabilities) return <EuiSkeletonText lines={10} />;
if (!hasInfraMLCapabilities) return <SubscriptionSplashPrompt />;
return (

4
x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import React from 'react';
export const LogEntryExampleMessagesLoadingIndicator: React.FunctionComponent<{
@ -13,7 +13,7 @@ export const LogEntryExampleMessagesLoadingIndicator: React.FunctionComponent<{
}> = ({ exampleCount }) => (
<>
{Array.from(new Array(exampleCount), (_value, index) => (
<EuiLoadingContent key={index} lines={1} />
<EuiSkeletonText key={index} lines={1} />
))}
</>
);

4
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/osquery/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import { useKibanaContextForPlugin } from '../../../../../../../hooks/use_kibana';
@ -41,7 +41,7 @@ const TabComponent = (props: TabProps) => {
if (loading || !OsqueryAction) {
return (
<TabContent>
<EuiLoadingContent lines={10} />
<EuiSkeletonText lines={10} />
</TabContent>
);
}

2
x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap generated
View file

@ -88,7 +88,7 @@ exports[`LayerWizardSelect Should render layer select after layer wizards are lo
exports[`LayerWizardSelect Should render loading screen before layer wizards are loaded 1`] = `
<EuiPanel>
<EuiLoadingContent
<EuiSkeletonText
lines={2}
/>
</EuiPanel>

4
x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
View file

@ -12,7 +12,7 @@ import {
EuiIcon,
EuiFlexGrid,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonText,
EuiFacetGroup,
EuiFacetButton,
EuiPanel,
@ -138,7 +138,7 @@ export class LayerWizardSelect extends Component<Props, State> {
if (!this.state.hasLoadedWizards) {
return (
<EuiPanel>
<EuiLoadingContent lines={2} />
<EuiSkeletonText lines={2} />
</EuiPanel>
);
}

4
x-pack/plugins/maps/public/lazy_wrapper.tsx
View file

@ -6,11 +6,11 @@
*/
import React, { FC, Suspense } from 'react';
import { EuiDelayRender, EuiErrorBoundary, EuiLoadingContent } from '@elastic/eui';
import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
const Fallback = () => (
<EuiDelayRender>
<EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} />
</EuiDelayRender>
);

4
x-pack/plugins/ml/public/application/components/page_header/page_header.tsx
View file

@ -7,7 +7,7 @@
import React, { FC, useContext, useEffect } from 'react';
import { InPortal, OutPortal } from 'react-reverse-portal';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { MlPageControlsContext } from '../ml_page/ml_page';
/**
@ -33,5 +33,5 @@ export const MlPageHeader: FC = ({ children }) => {
export const MlPageHeaderRenderer: FC = () => {
const { headerPortal, isHeaderMounted } = useContext(MlPageControlsContext);
return isHeaderMounted ? <OutPortal node={headerPortal} /> : <EuiLoadingContent lines={1} />;
return isHeaderMounted ? <OutPortal node={headerPortal} /> : <EuiSkeletonText lines={1} />;
};

4
x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
View file

@ -14,7 +14,7 @@ import {
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonText,
EuiPanel,
EuiText,
} from '@elastic/eui';
@ -98,7 +98,7 @@ export const ExpandableSection: FC<ExpandableSectionProps> = ({
</EuiText>
</EuiButtonEmpty>
</EuiFlexItem>
{headerItems === HEADER_ITEMS_LOADING && <EuiLoadingContent lines={1} />}
{headerItems === HEADER_ITEMS_LOADING && <EuiSkeletonText lines={1} />}
{isHeaderItems(headerItems)
? headerItems.map(({ label, value, id }) => (
<EuiFlexItem

8
x-pack/plugins/ml/public/application/explorer/explorer.tsx
View file

@ -19,7 +19,7 @@ import {
EuiPageHeaderSection,
EuiSpacer,
EuiTitle,
EuiLoadingContent,
EuiSkeletonText,
EuiPanel,
EuiAccordion,
EuiBadge,
@ -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>

6
x-pack/plugins/ml/public/application/model_management/test_models/output_loading.tsx
View file

@ -6,16 +6,16 @@
*/
import React, { FC } from 'react';
import { EuiLoadingContent, EuiLoadingContentProps } from '@elastic/eui';
import { EuiSkeletonText, EuiSkeletonTextProps } from '@elastic/eui';
export const OutputLoadingContent: FC<{ text: string }> = ({ text }) => {
const actualLines = text.split(/\r\n|\r|\n/).length + 1;
const lines = actualLines > 4 && actualLines <= 10 ? actualLines : 4;
return (
<EuiLoadingContent
<EuiSkeletonText
data-test-subj={'mlTestModelLoadingContent'}
lines={lines as EuiLoadingContentProps['lines']}
lines={lines as EuiSkeletonTextProps['lines']}
/>
);
};

10
x-pack/plugins/ml/public/application/routing/router.tsx
View file

@ -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';
@ -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>
);
};

4
x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useEffect, useState } from 'react';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import useIntersection from 'react-use/lib/useIntersection';
export interface LoadWhenInViewProps {
@ -46,7 +46,7 @@ export default function LoadWhenInView({
aria-label={placeholderTitle}
style={{ height: initialHeight }}
>
<EuiLoadingContent />
<EuiSkeletonText />
</div>
);
}

4
x-pack/plugins/osquery/public/fleet_integration/osquery_managed_custom_button_extension.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import React from 'react';
import type { PackageCustomExtensionComponentProps } from '@kbn/fleet-plugin/public';
@ -23,7 +23,7 @@ export const OsqueryManagedCustomButtonExtension = React.memo<PackageCustomExten
const { loading, disabled, permissionDenied } = useFetchStatus();
if (loading) {
return <EuiLoadingContent lines={5} />;
return <EuiSkeletonText lines={5} />;
}
if (permissionDenied) {

4
x-pack/plugins/osquery/public/live_queries/index.tsx
View file

@ -6,7 +6,7 @@
*/
import { castArray, isEmpty, pickBy } from 'lodash';
import { EuiCode, EuiLoadingContent, EuiEmptyPrompt } from '@elastic/eui';
import { EuiCode, EuiSkeletonText, EuiEmptyPrompt } from '@elastic/eui';
import React, { useContext, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
@ -100,7 +100,7 @@ const LiveQueryComponent: React.FC<LiveQueryProps> = ({
}, [alertIds, ecs_mapping, initialAgentSelection, initialQuery, packId, savedQueryId]);
if (isLoading) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
if (!hasActionResultsPrivileges) {

4
x-pack/plugins/osquery/public/packs/packs_table.tsx
View file

@ -14,7 +14,7 @@ import {
EuiInMemoryTable,
EuiLink,
EuiToolTip,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import moment from 'moment-timezone';
import React, { useCallback, useMemo, useState } from 'react';
@ -229,7 +229,7 @@ const PacksTableComponent = () => {
);
if (isLoading) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
return (

4
x-pack/plugins/osquery/public/results/results_table.tsx
View file

@ -20,7 +20,7 @@ import {
EuiDataGrid,
EuiPanel,
EuiLink,
EuiLoadingContent,
EuiSkeletonText,
EuiProgress,
EuiIconTip,
} from '@elastic/eui';
@ -393,7 +393,7 @@ const ResultsTableComponent: React.FC<ResultsTableComponentProps> = ({
);
if (isLoading) {
return <EuiLoadingContent lines={5} />;
return <EuiSkeletonText lines={5} />;
}
if (!hasActionResultsPrivileges) {

4
x-pack/plugins/osquery/public/routes/packs/edit/index.tsx
View file

@ -12,7 +12,7 @@ import {
EuiConfirmModal,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
EuiText,
} from '@elastic/eui';
@ -126,7 +126,7 @@ const EditPackPageComponent = () => {
headerChildren={HeaderContent}
>
{!data ? (
<EuiLoadingContent lines={10} />
<EuiSkeletonText lines={10} />
) : (
<PackForm editMode={true} defaultValue={data} isReadOnly={isReadOnly} />
)}

4
x-pack/plugins/osquery/public/routes/packs/list/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingContent } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiSkeletonText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { useMemo } from 'react';
@ -66,7 +66,7 @@ const PacksPageComponent = () => {
const Content = useMemo(() => {
if (isLoadingAssetsStatus || isLoadingPacks) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
if (showEmptyState) {

6
x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent, EuiEmptyPrompt, EuiCode } from '@elastic/eui';
import { EuiSkeletonText, EuiEmptyPrompt, EuiCode } from '@elastic/eui';
import React from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
@ -66,11 +66,11 @@ const OsqueryActionComponent: React.FC<OsqueryActionProps> = ({
}
if (agentId && isLoading) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
if (agentId && !policyFetched && policyLoading) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
if (agentId && !osqueryAvailable) {

6
x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { act } from '@testing-library/react';
import React from 'react';
import ReactMarkdown from 'react-markdown';
@ -35,7 +35,7 @@ describe('AccessAgreementPage', () => {
/>
);
expect(wrapper.exists(EuiLoadingContent)).toBe(true);
expect(wrapper.exists(EuiSkeletonText)).toBe(true);
expect(wrapper.exists(ReactMarkdown)).toBe(false);
await act(async () => {
@ -44,7 +44,7 @@ describe('AccessAgreementPage', () => {
});
expect(wrapper.find(ReactMarkdown)).toMatchSnapshot();
expect(wrapper.exists(EuiLoadingContent)).toBe(false);
expect(wrapper.exists(EuiSkeletonText)).toBe(false);
expect(coreStartMock.http.get).toHaveBeenCalledTimes(1);
expect(coreStartMock.http.get).toHaveBeenCalledWith(

4
x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.tsx
View file

@ -11,8 +11,8 @@ import {
EuiButton,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiPanel,
EuiSkeletonText,
EuiSpacer,
EuiText,
} from '@elastic/eui';
@ -107,7 +107,7 @@ export function AccessAgreementPage({ http, fatalErrors, notifications }: Props)
</form>
) : (
<EuiPanel paddingSize="l">
<EuiLoadingContent lines={10} />
<EuiSkeletonText lines={10} />
</EuiPanel>
);

8
x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
View file

@ -16,7 +16,7 @@ import {
EuiFormRow,
EuiHealth,
EuiIcon,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
EuiSwitch,
EuiText,
@ -207,9 +207,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
</>
)}
{isLoading ? (
<EuiLoadingContent />
) : (
<EuiSkeletonText isLoading={isLoading}>
<EuiForm
component="form"
isInvalid={form.isInvalid}
@ -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>
);
};

8
x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx
View file

@ -15,12 +15,12 @@ import {
EuiForm,
EuiFormRow,
EuiIcon,
EuiLoadingContent,
EuiModal,
EuiModalBody,
EuiModalFooter,
EuiModalHeader,
EuiModalHeaderTitle,
EuiSkeletonText,
EuiSpacer,
EuiText,
useGeneratedHtmlId,
@ -162,9 +162,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
</EuiModalHeaderTitle>
</EuiModalHeader>
<EuiModalBody>
{isLoading ? (
<EuiLoadingContent />
) : (
<EuiSkeletonText isLoading={isLoading}>
<EuiForm
id={modalFormId}
component="form"
@ -282,7 +280,7 @@ export const ChangePasswordModal: FunctionComponent<ChangePasswordModalProps> =
/>
</EuiFormRow>
</EuiForm>
)}
</EuiSkeletonText>
</EuiModalBody>
<EuiModalFooter>
<EuiButtonEmpty

2
x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts
View file

@ -68,7 +68,7 @@ describe('timeline flyout button', () => {
.pipe(($el) => $el.trigger('focus'))
.should('have.focus');
cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').type('{esc}');
cy.get(CREATE_NEW_TIMELINE).should('not.be.visible');
cy.get(CREATE_NEW_TIMELINE).should('not.exist');
});
it('should render the global search dropdown when the input is focused', () => {

4
x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
View file

@ -8,7 +8,7 @@ import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
@ -63,7 +63,7 @@ const EnrichmentSection: React.FC<{
{loading && (
<>
<EuiSpacer size="m" />
<EuiLoadingContent data-test-subj="loading-enrichments" lines={4} />
<EuiSkeletonText data-test-subj="loading-enrichments" lines={4} />
</>
)}
</>

4
x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
View file

@ -9,7 +9,7 @@ import type { EuiTabbedContentTab } from '@elastic/eui';
import {
EuiFlexGroup,
EuiHorizontalRule,
EuiLoadingContent,
EuiSkeletonText,
EuiLoadingSpinner,
EuiNotificationBadge,
EuiSpacer,
@ -308,7 +308,7 @@ const EventDetailsComponent: React.FC<Props> = ({
{isEnrichmentsLoading && (
<>
<EuiLoadingContent lines={2} />
<EuiSkeletonText lines={2} />
</>
)}

4
x-pack/plugins/security_solution/public/common/components/event_details/insights/simple_alert_table.tsx
View file

@ -8,7 +8,7 @@
import React, { useMemo } from 'react';
import type { EuiBasicTableColumn } from '@elastic/eui';
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
import { EuiBasicTable, EuiLoadingContent, EuiSpacer } from '@elastic/eui';
import { EuiBasicTable, EuiSkeletonText, EuiSpacer } from '@elastic/eui';
import { PreferenceFormattedDate } from '../../formatted_date';
import { SeverityBadge } from '../../../../detections/components/rules/severity_badge';
@ -57,7 +57,7 @@ export const SimpleAlertTable = React.memo<{ alertIds: string[] }>(({ alertIds }
}, [data]);
if (loading) {
return <EuiLoadingContent lines={2} />;
return <EuiSkeletonText lines={2} />;
} else if (error) {
return <>{SIMPLE_ALERT_TABLE_ERROR}</>;
} else if (mappedData) {

11
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
View file

@ -20,7 +20,7 @@ import {
EuiHorizontalRule,
EuiSpacer,
EuiFlexGroup,
EuiLoadingContent,
EuiSkeletonText,
EuiCallOut,
EuiText,
} from '@elastic/eui';
@ -468,9 +468,8 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
<EuiSpacer size="m" />
</FlyoutHeader>
{isLoading && <EuiLoadingContent data-test-subj="loadingAddExceptionFlyout" lines={4} />}
{!isLoading && (
<FlyoutBodySection className="builder-section">
<FlyoutBodySection className="builder-section">
<EuiSkeletonText data-test-subj="loadingAddExceptionFlyout" lines={4} isLoading={isLoading}>
{errorSubmitting != null && (
<>
<EuiCallOut title={i18n.SUBMIT_ERROR_TITLE} color="danger" iconType="warning">
@ -556,8 +555,8 @@ export const AddExceptionFlyout = memo(function AddExceptionFlyout({
/>
</>
)}
</FlyoutBodySection>
)}
</EuiSkeletonText>
</FlyoutBodySection>
<EuiFlyoutFooter>
<FlyoutFooterGroup justifyContent="spaceBetween">
<EuiButtonEmpty data-test-subj="cancelExceptionAddButton" onClick={handleCloseFlyout}>

4
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/all_exception_items_table/empty_viewer_state.tsx
View file

@ -7,7 +7,7 @@
import React, { useMemo } from 'react';
import {
EuiLoadingContent,
EuiSkeletonText,
EuiImage,
EuiEmptyPrompt,
EuiButton,
@ -96,7 +96,7 @@ const ExeptionItemsViewerEmptyPromptsComponent = ({
);
default:
return (
<EuiLoadingContent lines={4} data-test-subj="exceptionItemViewerEmptyPrompts-loading" />
<EuiSkeletonText lines={4} data-test-subj="exceptionItemViewerEmptyPrompts-loading" />
);
}
}, [

4
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/edit_exception_flyout/index.tsx
View file

@ -19,7 +19,7 @@ import {
EuiTitle,
EuiFlyout,
EuiFlyoutFooter,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import type {
@ -350,7 +350,7 @@ const EditExceptionFlyoutComponent: React.FC<EditExceptionFlyoutProps> = ({
</EuiTitle>
<EuiSpacer size="m" />
</FlyoutHeader>
{isLoading && <EuiLoadingContent data-test-subj="loadingEditExceptionFlyout" lines={4} />}
{isLoading && <EuiSkeletonText data-test-subj="loadingEditExceptionFlyout" lines={4} />}
<FlyoutBodySection className="builder-section">
<ExceptionsFlyoutMeta
exceptionItemName={exceptionItemName}

7
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/add_to_lists_table/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiText, EuiSpacer, EuiInMemoryTable, EuiPanel, EuiLoadingContent } from '@elastic/eui';
import { EuiText, EuiSpacer, EuiInMemoryTable, EuiPanel, EuiSkeletonText } from '@elastic/eui';
import type { ExceptionListRuleReferencesSchema } from '../../../../../../common/detection_engine/rule_exceptions';
import type { ExceptionsAddToListsComponentProps } from './use_add_to_lists_table';
@ -43,10 +43,7 @@ const ExceptionsAddToListsComponent: React.FC<ExceptionsAddToListsComponentProps
loading={isLoading}
message={
isLoading ? (
<EuiLoadingContent
lines={4}
data-test-subj="exceptionItemViewerEmptyPrompts-loading"
/>
<EuiSkeletonText lines={4} data-test-subj="exceptionItemViewerEmptyPrompts-loading" />
) : undefined
}
columns={listTableColumnsWithLinkSwitch}

4
x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/linked_to_list/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useEffect, useState } from 'react';
import { EuiTitle, EuiSpacer, EuiPanel, EuiInMemoryTable, EuiLoadingContent } from '@elastic/eui';
import { EuiTitle, EuiSpacer, EuiPanel, EuiInMemoryTable, EuiSkeletonText } from '@elastic/eui';
import styled, { css } from 'styled-components';
import * as i18n from './translations';
@ -31,7 +31,7 @@ const ExceptionsLinkedToListsComponent: React.FC<ExceptionsLinkedToListComponent
listAndReferences,
}): JSX.Element => {
const [message, setMessage] = useState<JSX.Element | string | undefined>(
<EuiLoadingContent lines={4} data-test-subj="exceptionItemListsTableLoading" />
<EuiSkeletonText lines={4} data-test-subj="exceptionItemListsTableLoading" />
);
const [error, setError] = useState<string | undefined>(undefined);

4
x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx
View file

@ -9,7 +9,7 @@ import {
EuiBasicTable,
EuiConfirmModal,
EuiEmptyPrompt,
EuiLoadingContent,
EuiSkeletonText,
EuiProgress,
} from '@elastic/eui';
import React, { useCallback, useMemo, useRef } from 'react';
@ -248,7 +248,7 @@ export const RulesTables = React.memo<RulesTableProps>(({ selectedTab }) => {
)}
{isTableEmpty && <PrePackagedRulesPrompt />}
{isLoading && (
<EuiLoadingContent data-test-subj="initialLoadingPanelAllRulesTable" lines={10} />
<EuiSkeletonText data-test-subj="initialLoadingPanelAllRulesTable" lines={10} />
)}
{isDeleteConfirmationVisible && (
<EuiConfirmModal

10
x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
View file

@ -7,7 +7,7 @@
import type { MappingRuntimeFields } from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
import type { Filter, Query } from '@kbn/es-query';
import { EuiFlexItem, EuiLoadingContent } from '@elastic/eui';
import { EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
@ -196,7 +196,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
{alertViewSelection === 'trend' && (
<FullHeightFlexItem grow={2}>
{isLoadingIndexPattern ? (
<EuiLoadingContent lines={10} data-test-subj="trendLoadingSpinner" />
<EuiSkeletonText lines={10} data-test-subj="trendLoadingSpinner" />
) : (
<AlertsHistogramPanel
alignHeader="flexStart"
@ -230,7 +230,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
{alertViewSelection === 'table' && (
<FullHeightFlexItem grow={1}>
{isLoadingIndexPattern ? (
<EuiLoadingContent lines={10} data-test-subj="tableLoadingSpinner" />
<EuiSkeletonText lines={10} data-test-subj="tableLoadingSpinner" />
) : (
<AlertsCountPanel
alignHeader="flexStart"
@ -261,7 +261,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
{alertViewSelection === 'treemap' && (
<FullHeightFlexItem grow={1}>
{isLoadingIndexPattern ? (
<EuiLoadingContent lines={10} data-test-subj="treemapLoadingSpinner" />
<EuiSkeletonText lines={10} data-test-subj="treemapLoadingSpinner" />
) : (
<AlertsTreemapPanel
addFilter={addFilter}
@ -294,7 +294,7 @@ const ChartPanelsComponent: React.FC<Props> = ({
{isAlertsPageChartsEnabled && alertViewSelection === 'charts' && (
<FullHeightFlexItem grow={1}>
{isLoadingIndexPattern ? (
<EuiLoadingContent lines={10} data-test-subj="chartsLoadingSpinner" />
<EuiSkeletonText lines={10} data-test-subj="chartsLoadingSpinner" />
) : (
<AlertsSummaryChartsPanel
alignHeader="flexStart"

4
x-pack/plugins/security_solution/public/exceptions/pages/list_detail_view/index.tsx
View file

@ -12,7 +12,7 @@ import {
ExceptionListHeader,
ViewerStatus,
} from '@kbn/securitysolution-exception-list-components';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import { useParams } from 'react-router-dom';
import { ExceptionListTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
import { SecurityPageName } from '../../../../common/constants';
@ -95,7 +95,7 @@ export const ListsDetailViewComponent: FC = () => {
if (viewerStatus === ViewerStatus.ERROR)
return <EmptyViewerState isReadOnly={isReadOnly} viewerStatus={viewerStatus} />;
if (isLoading) return <EuiLoadingContent lines={4} data-test-subj="loading" />;
if (isLoading) return <EuiSkeletonText lines={4} data-test-subj="loading" />;
if (invalidListId || !listName || !list) return <NotFoundPage />;
return (

4
x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
View file

@ -17,7 +17,7 @@ import {
EuiContextMenuPanel,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonText,
EuiPagination,
EuiPopover,
} from '@elastic/eui';
@ -297,7 +297,7 @@ const PaginatedTableComponent: FC<SiemTables> = ({
</HeaderSection>
{toggleStatus &&
(loadingInitial ? (
<EuiLoadingContent data-test-subj="initialLoadingPanelPaginatedTable" lines={10} />
<EuiSkeletonText data-test-subj="initialLoadingPanelPaginatedTable" lines={10} />
) : (
<>
<BasicTable

4
x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx
View file

@ -8,7 +8,7 @@
import type { CSSProperties, HTMLAttributes } from 'react';
import React, { memo, useCallback, useMemo, useState } from 'react';
import type { CommonProps, EuiContextMenuPanelProps, EuiPopoverProps } from '@elastic/eui';
import { EuiContextMenuPanel, EuiPopover, EuiPopoverTitle, EuiLoadingContent } from '@elastic/eui';
import { EuiContextMenuPanel, EuiPopover, EuiPopoverTitle, EuiSkeletonText } from '@elastic/eui';
import { v4 as uuidv4 } from 'uuid';
import type { ContextMenuItemNavByRouterProps } from './context_menu_item_nav_by_router';
import { ContextMenuItemNavByRouter } from './context_menu_item_nav_by_router';
@ -76,7 +76,7 @@ export const ContextMenuWithRouterSupport = memo<ContextMenuWithRouterSupportPro
return items.map((itemProps, index) => {
if (loading) {
return (
<EuiLoadingContent
<EuiSkeletonText
lines={1}
key={uuidv4()}
data-test-subj={itemProps['data-test-subj'] ?? getTestId(`item-loading-${index}`)}

4
x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
View file

@ -21,7 +21,7 @@ import {
EuiIcon,
EuiLoadingSpinner,
EuiLink,
EuiLoadingContent,
EuiSkeletonText,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -128,7 +128,7 @@ const PolicyEmptyState = React.memo<{
<EuiSpacer size="m" />
{authzLoading && <EuiLoadingContent lines={1} />}
{authzLoading && <EuiSkeletonText lines={1} />}
{!authzLoading && canAccessFleet && (
<>

4
x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { memo } from 'react';
import { EuiFlyoutHeader, EuiLoadingContent, EuiToolTip, EuiTitle } from '@elastic/eui';
import { EuiFlyoutHeader, EuiSkeletonText, EuiToolTip, EuiTitle } from '@elastic/eui';
import { useEndpointSelector } from '../../hooks';
import { detailsLoading } from '../../../store/selectors';
import { BackToEndpointDetailsFlyoutSubHeader } from './back_to_endpoint_details_flyout_subheader';
@ -30,7 +30,7 @@ export const EndpointDetailsFlyoutHeader = memo(
{endpointId && <BackToEndpointDetailsFlyoutSubHeader endpointId={endpointId} />}
{hostDetailsLoading ? (
<EuiLoadingContent lines={1} />
<EuiSkeletonText lines={1} />
) : (
<EuiToolTip content={hostname} anchorClassName="eui-textTruncate">
<EuiTitle size="s">

8
x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
View file

@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiFlyoutBody, EuiFlyoutFooter, EuiLoadingContent, EuiSpacer } from '@elastic/eui';
import { EuiFlyoutBody, EuiFlyoutFooter, EuiSkeletonText, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { memo, useCallback, useEffect, useMemo } from 'react';
import { useUserPrivileges } from '../../../../../common/components/user_privileges';
@ -48,9 +48,9 @@ export const EndpointDetails = memo(() => {
const ContentLoadingMarkup = useMemo(
() => (
<>
<EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} />
<EuiSpacer size="l" />
<EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} />
</>
),
[]
@ -133,7 +133,7 @@ export const EndpointDetails = memo(() => {
)}
{hostDetails === undefined ? (
<EuiFlyoutBody>
<EuiLoadingContent lines={3} /> <EuiSpacer size="l" /> <EuiLoadingContent lines={3} />
<EuiSkeletonText lines={3} /> <EuiSpacer size="l" /> <EuiSkeletonText lines={3} />
</EuiFlyoutBody>
) : (
<>

4
x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension/components/endpoint_policy_artifact_cards.tsx
View file

@ -7,7 +7,7 @@
import React, { memo, useCallback, useMemo } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiLoadingContent, EuiSpacer, EuiText } from '@elastic/eui';
import { EuiSkeletonText, EuiSpacer, EuiText } from '@elastic/eui';
import { useUserPrivileges } from '../../../../../../../common/components/user_privileges';
import {
BLOCKLISTS_LABELS,
@ -178,7 +178,7 @@ export const EndpointPolicyArtifactCards = memo<EndpointPolicyArtifactCardsProps
const canAccessArtifactContent = useCanAccessSomeArtifacts();
if (loading) {
return <EuiLoadingContent lines={4} />;
return <EuiSkeletonText lines={4} />;
}
if (!canAccessArtifactContent) {

4
x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiButtonEmpty, EuiLoadingContent, EuiSpacer, EuiText } from '@elastic/eui';
import { EuiButtonEmpty, EuiSkeletonText, EuiSpacer, EuiText } from '@elastic/eui';
import React, { memo, useCallback, useState } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
import { i18n } from '@kbn/i18n';
@ -58,7 +58,7 @@ export const PolicyDetailsForm = memo(() => {
const { loading: authzLoading } = useUserPrivileges().endpointPrivileges;
if (authzLoading) {
return <EuiLoadingContent lines={5} />;
return <EuiSkeletonText lines={5} />;
}
return (

4
x-pack/plugins/security_solution/public/overview/components/loading_placeholders/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiLoadingContent, EuiSpacer } from '@elastic/eui';
import { EuiSkeletonText, EuiSpacer } from '@elastic/eui';
import React from 'react';
const LoadingPlaceholdersComponent: React.FC<{
@ -15,7 +15,7 @@ const LoadingPlaceholdersComponent: React.FC<{
<>
{[...Array(placeholders).keys()].map((_, i) => (
<React.Fragment key={i}>
<EuiLoadingContent lines={lines} />
<EuiSkeletonText lines={lines} />
{i !== placeholders - 1 && <EuiSpacer size="l" />}
</React.Fragment>
))}

10
x-pack/plugins/security_solution/public/overview/components/stat_value.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiLoadingContent, EuiProgress, EuiText } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiSkeletonText, EuiProgress, EuiText } from '@elastic/eui';
import numeral from '@elastic/numeral';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
@ -21,12 +21,6 @@ const ProgressContainer = styled.div`
}
`;
const LoadingContent = styled(EuiLoadingContent)`
.euiLoadingContent__singleLine {
margin-bottom: 0px;
}
`;
const StatValueComponent: React.FC<{
count: number;
isGroupStat: boolean;
@ -59,7 +53,7 @@ const StatValueComponent: React.FC<{
<EuiFlexItem grow={false}>
<ProgressContainer>
{isLoading ? (
<LoadingContent data-test-subj="stat-value-loading-spinner" lines={1} />
<EuiSkeletonText data-test-subj="stat-value-loading-spinner" lines={1} />
) : (
<EuiProgress
color={isGroupStat ? 'primary' : 'subdued'}

4
x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
View file

@ -10,7 +10,7 @@ import {
EuiButtonIcon,
EuiButtonEmpty,
EuiTextColor,
EuiLoadingContent,
EuiSkeletonText,
EuiTitle,
EuiFlexGroup,
EuiFlexItem,
@ -176,7 +176,7 @@ export const ExpandableEvent = React.memo<Props>(
}
if (loading) {
return <EuiLoadingContent lines={10} />;
return <EuiSkeletonText lines={10} />;
}
return (

14
x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiBadge, EuiLoadingContent, EuiTabs, EuiTab } from '@elastic/eui';
import { EuiBadge, EuiSkeletonText, EuiTabs, EuiTab } from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
import React, { lazy, memo, Suspense, useCallback, useEffect, useMemo } from 'react';
import { useDispatch } from 'react-redux';
@ -69,7 +69,7 @@ const QueryTab: React.FC<{
rowRenderers: RowRenderer[];
timelineId: TimelineId;
}> = memo(({ renderCellValue, rowRenderers, timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<QueryTabContent
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
@ -84,7 +84,7 @@ const EqlTab: React.FC<{
rowRenderers: RowRenderer[];
timelineId: TimelineId;
}> = memo(({ renderCellValue, rowRenderers, timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<EqlTabContent
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}
@ -95,21 +95,21 @@ const EqlTab: React.FC<{
EqlTab.displayName = 'EqlTab';
const GraphTab: React.FC<{ timelineId: TimelineId }> = memo(({ timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<GraphTabContent timelineId={timelineId} />
</Suspense>
));
GraphTab.displayName = 'GraphTab';
const NotesTab: React.FC<{ timelineId: TimelineId }> = memo(({ timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<NotesTabContent timelineId={timelineId} />
</Suspense>
));
NotesTab.displayName = 'NotesTab';
const SessionTab: React.FC<{ timelineId: TimelineId }> = memo(({ timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<SessionTabContent timelineId={timelineId} />
</Suspense>
));
@ -120,7 +120,7 @@ const PinnedTab: React.FC<{
rowRenderers: RowRenderer[];
timelineId: TimelineId;
}> = memo(({ renderCellValue, rowRenderers, timelineId }) => (
<Suspense fallback={<EuiLoadingContent lines={10} />}>
<Suspense fallback={<EuiSkeletonText lines={10} />}>
<PinnedTabContent
renderCellValue={renderCellValue}
rowRenderers={rowRenderers}

4
x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
View file

@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
import {
EuiFlexGroup,
EuiFlexItem,
EuiLoadingContent,
EuiSkeletonText,
EuiPanel,
EuiText,
EuiButton,
@ -237,7 +237,7 @@ export const PolicyRetentionSchedule: React.FunctionComponent<Props> = ({
return (
<Fragment>
<EuiPanel>
<EuiLoadingContent lines={1} />
<EuiSkeletonText lines={1} />
</EuiPanel>
<EuiSpacer />
</Fragment>

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
View file

@ -11,7 +11,7 @@ import {
EuiText,
EuiSpacer,
EuiDescriptionList,
EuiLoadingContent,
EuiSkeletonText,
EuiDescriptionListTitle,
EuiDescriptionListDescription,
} from '@elastic/eui';
@ -62,7 +62,7 @@ export const MonitorDetailsPanel = ({
const dispatch = useDispatch();
if (!monitor) {
return <EuiLoadingContent lines={8} />;
return <EuiSkeletonText lines={8} />;
}
const url = latestPing?.url?.full ?? (monitor as unknown as MonitorFields)[ConfigKey.URLS];

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_location_select.tsx
View file

@ -11,7 +11,7 @@ import {
EuiHealth,
EuiIcon,
EuiLink,
EuiLoadingContent,
EuiSkeletonText,
EuiPopover,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -131,7 +131,7 @@ export const MonitorLocationSelect = ({
return (
<EuiDescriptionList
compressed={compressed}
listItems={[{ title: LOCATION_LABEL, description: <EuiLoadingContent lines={1} /> }]}
listItems={[{ title: LOCATION_LABEL, description: <EuiSkeletonText lines={1} /> }]}
/>
);
}

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React from 'react';
import { EuiBadge, EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
import { EuiBadge, EuiDescriptionList, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { EncryptedSyntheticsMonitor } from '../../../../../../common/runtime_types';
@ -53,7 +53,7 @@ export const MonitorStatus = ({
{
title: STATUS_LABEL,
description: loadingContent ? (
<EuiLoadingContent lines={1} />
<EuiSkeletonText lines={1} />
) : (
<BadgeStatus status={status} isBrowserType={isBrowserType} />
),

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/thershold_indicator.tsx
View file

@ -12,7 +12,7 @@ import {
EuiFlexItem,
EuiIcon,
EuiIconTip,
EuiLoadingContent,
EuiSkeletonText,
EuiStat,
EuiText,
EuiToolTip,
@ -44,7 +44,7 @@ export const ThresholdIndicator = ({
asStat?: boolean;
}) => {
if (loading) {
return <EuiLoadingContent lines={1} />;
return <EuiSkeletonText lines={1} />;
}
const delta = getDeltaPercent(current, previous);

4
x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx
View file

@ -7,12 +7,12 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiBadge, IconColor, EuiThemeComputed, EuiLoadingContent } from '@elastic/eui';
import { EuiBadge, IconColor, EuiThemeComputed, EuiSkeletonText } from '@elastic/eui';
type MonitorStatus = 'succeeded' | 'failed' | 'skipped' | 'unknown';
export const StatusBadge = ({ status }: { status: MonitorStatus }) => {
if (status === 'unknown') {
return <EuiLoadingContent lines={1} />;
return <EuiSkeletonText lines={1} />;
}
return (

4
x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_started_at.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { ReactElement } from 'react';
import { EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
import { EuiDescriptionList, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useErrorFailedTests } from '../hooks/use_last_error_state';
@ -19,7 +19,7 @@ export const ErrorStartedAt: React.FC = () => {
let startedAt: string | ReactElement = useFormatTestRunAt(state?.started_at);
if (!startedAt) {
startedAt = <EuiLoadingContent lines={1} />;
startedAt = <EuiSkeletonText lines={1} />;
}
return <EuiDescriptionList listItems={[{ title: ERROR_DURATION, description: startedAt }]} />;

4
x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React from 'react';
import { EuiLoadingContent } from '@elastic/eui';
import { EuiSkeletonText } from '@elastic/eui';
import moment from 'moment';
import { Ping } from '../../../../../../common/runtime_types';
import { MonitorFailedTests } from '../../monitor_details/monitor_errors/failed_tests';
@ -15,7 +15,7 @@ export const ErrorTimeline = ({ lastTestRun }: { lastTestRun?: Ping }) => {
const location = useSelectedLocation();
if (!lastTestRun) {
return <EuiLoadingContent lines={3} />;
return <EuiSkeletonText lines={3} />;
}
const diff = moment(lastTestRun.monitor.timespan?.lt).diff(
moment(lastTestRun.monitor.timespan?.gte),

4
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_last_run.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { ReactElement } from 'react';
import moment from 'moment';
import { EuiDescriptionList, EuiLoadingContent, EuiToolTip } from '@elastic/eui';
import { EuiDescriptionList, EuiSkeletonText, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useMonitorLatestPing } from './hooks/use_monitor_latest_ping';
@ -18,7 +18,7 @@ export const MonitorDetailsLastRun: React.FC = () => {
: '--';
if (!latestPing && pingsLoading) {
description = <EuiLoadingContent lines={1} />;
description = <EuiSkeletonText lines={1} />;
}
return (

4
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import { EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
import { EuiDescriptionList, EuiSkeletonText } from '@elastic/eui';
import { MonitorStatus, STATUS_LABEL } from '../common/components/monitor_status';
import { useSelectedMonitor } from './hooks/use_selected_monitor';
import { useMonitorLatestPing } from './hooks/use_monitor_latest_ping';
@ -24,7 +24,7 @@ export const MonitorDetailsStatus = () => {
listItems={[
{
title: STATUS_LABEL,
description: isMonitorMissing ? <></> : <EuiLoadingContent lines={1} />,
description: isMonitorMissing ? <></> : <EuiSkeletonText lines={1} />,
},
]}
/>

4
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_by_step.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { Fragment } from 'react';
import { EuiProgress, EuiSpacer, EuiFlexItem, EuiLoadingContent } from '@elastic/eui';
import { EuiProgress, EuiSpacer, EuiFlexItem, EuiSkeletonText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { PanelWithTitle } from '../../common/components/panel_with_title';
import { useSelectedMonitor } from '../hooks/use_selected_monitor';
@ -22,7 +22,7 @@ export const FailedTestsByStep = ({ time }: { time: { to: string; from: string }
}
if (loading && !failedSteps) {
return <EuiLoadingContent lines={3} />;
return <EuiSkeletonText lines={3} />;
}
return (

Some files were not shown because too many files have changed in this diff Show more