Skip to content

Commit 327626a

Browse files
cee-chencee-chen
committed
Convert basic usage of EuiLoadingContent to EuiSkeletonText 
1 parent 1b02347 commit 327626a

91 files changed

Lines changed: 200 additions & 210 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/plugins/console/public/application/components/editor_content_spinner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
*/
88

99
import React, { FunctionComponent } from 'react';
10-
import { EuiLoadingContent, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
10+
import { EuiSkeletonText, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
1111

1212
export const EditorContentSpinner: FunctionComponent = () => {
1313
return (
1414
<EuiPageContent className="conApp__editor__spinner">
15-
<EuiLoadingContent lines={10} />
15+
<EuiSkeletonText lines={10} />
1616
</EuiPageContent>
1717
);
1818
};

‎src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9-
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
9+
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
1010
import type { FieldFormat, FieldFormatParams } from '@kbn/field-formats-plugin/common';
1111
import { memoize } from 'lodash';
1212
import React, { LazyExoticComponent, PureComponent } from 'react';
@@ -62,10 +62,10 @@ export class FormatEditor extends PureComponent<FormatEditorProps, FormatEditorS
6262
<React.Suspense
6363
fallback={
6464
// We specify minHeight to avoid too mitigate layout shifts while loading an editor
65-
// ~430 corresponds to "4 lines" of EuiLoadingContent
65+
// ~430 corresponds to "4 lines" of EuiSkeletonText
6666
<div style={{ minHeight: 430, marginTop: 8 }}>
6767
<EuiDelayRender>
68-
<EuiLoadingContent lines={4} />
68+
<EuiSkeletonText lines={4} />
6969
</EuiDelayRender>
7070
</div>
7171
}

‎src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9-
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
9+
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
1010
import type {
1111
FieldFormatEditor as InnerFieldFormatEditor,
1212
FieldFormatEditorFactory,
@@ -67,10 +67,10 @@ export class FieldFormatEditor extends PureComponent<
6767
<React.Suspense
6868
fallback={
6969
// We specify minHeight to avoid too mitigate layout shifts while loading an editor
70-
// ~430 corresponds to "4 lines" of EuiLoadingContent
70+
// ~430 corresponds to "4 lines" of EuiSkeletonText
7171
<div style={{ minHeight: 430, marginTop: 8 }}>
7272
<EuiDelayRender>
73-
<EuiLoadingContent lines={4} />
73+
<EuiSkeletonText lines={4} />
7474
</EuiDelayRender>
7575
</div>
7676
}

‎src/plugins/discover/public/plugin.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { SharePluginStart, SharePluginSetup } from '@kbn/share-plugin/public';
2626
import { UrlForwardingSetup, UrlForwardingStart } from '@kbn/url-forwarding-plugin/public';
2727
import { HomePublicPluginSetup } from '@kbn/home-plugin/public';
2828
import { Start as InspectorPublicPluginStart } from '@kbn/inspector-plugin/public';
29-
import { EuiLoadingContent } from '@elastic/eui';
29+
import { EuiSkeletonText } from '@elastic/eui';
3030
import { DataPublicPluginSetup, DataPublicPluginStart } from '@kbn/data-plugin/public';
3131
import { SavedObjectsStart } from '@kbn/saved-objects-plugin/public';
3232
import { DEFAULT_APP_CATEGORIES } from '@kbn/core/public';
@@ -248,7 +248,7 @@ export class DiscoverPlugin
248248
<React.Suspense
249249
fallback={
250250
<DeferredSpinner>
251-
<EuiLoadingContent />
251+
<EuiSkeletonText />
252252
</DeferredSpinner>
253253
}
254254
>
@@ -266,7 +266,7 @@ export class DiscoverPlugin
266266
<React.Suspense
267267
fallback={
268268
<DeferredSpinner>
269-
<EuiLoadingContent />
269+
<EuiSkeletonText />
270270
</DeferredSpinner>
271271
}
272272
>

‎src/plugins/es_ui_shared/public/components/code_editor/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
*/
88

99
import React from 'react';
10-
import { EuiLoadingContentProps, EuiLoadingContent } from '@elastic/eui';
10+
import { EuiSkeletonTextProps, EuiSkeletonText } from '@elastic/eui';
1111
import type { EuiCodeEditorProps } from './code_editor';
1212

1313
const Placeholder = ({ height }: { height?: string }) => {
1414
const numericalHeight = height ? parseInt(height, 10) : 0;
15-
// The height of one EuiLoadingContent line is 24px.
15+
// The height of one EuiSkeletonText line is 24px.
1616
const lineHeight = 24;
1717
const calculatedLineCount =
1818
numericalHeight < lineHeight ? 1 : Math.floor(numericalHeight / lineHeight);
1919
const lines = Math.min(10, calculatedLineCount);
2020

21-
return <EuiLoadingContent lines={lines as EuiLoadingContentProps['lines']} />;
21+
return <EuiSkeletonText lines={lines as EuiSkeletonTextProps['lines']} />;
2222
};
2323

2424
const LazyEuiCodeEditor = React.lazy(() => import('./code_editor'));

‎src/plugins/saved_objects_finder/public/finder/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Side Public License, v 1.
77
*/
88

9-
import { EuiDelayRender, EuiLoadingContent } from '@elastic/eui';
9+
import { EuiDelayRender, EuiSkeletonText } from '@elastic/eui';
1010
import React from 'react';
1111
import { IUiSettingsClient } from '@kbn/core-ui-settings-browser';
1212
import { HttpStart } from '@kbn/core-http-browser';
@@ -19,7 +19,7 @@ const SavedObjectFinder = (props: SavedObjectFinderProps) => (
1919
<React.Suspense
2020
fallback={
2121
<EuiDelayRender delay={300}>
22-
<EuiLoadingContent />
22+
<EuiSkeletonText />
2323
</EuiDelayRender>
2424
}
2525
>

‎x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
EuiComboBox,
1818
EuiComboBoxOptionOption,
1919
EuiFormRow,
20-
EuiLoadingContent,
20+
EuiSkeletonText,
2121
} from '@elastic/eui';
2222

2323
import { Filter, Query } from '@kbn/es-query';
@@ -302,7 +302,7 @@ export const LogCategorizationPage: FC = () => {
302302
</>
303303
) : null}
304304

305-
{loading === true ? <EuiLoadingContent lines={10} /> : null}
305+
{loading === true ? <EuiSkeletonText lines={10} /> : null}
306306

307307
<InformationText
308308
loading={loading}

‎x-pack/plugins/aiops/public/shared_lazy_components.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
import React, { FC, Suspense } from 'react';
99

10-
import { EuiErrorBoundary, EuiLoadingContent } from '@elastic/eui';
10+
import { EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
1111
import type { ExplainLogRateSpikesAppStateProps } from './components/explain_log_rate_spikes';
1212
import type { LogCategorizationAppStateProps } from './components/log_categorization';
1313
import type { ChangePointDetectionAppStateProps } from './components/change_point_detection';
@@ -18,7 +18,7 @@ const ExplainLogRateSpikesAppStateLazy = React.lazy(
1818

1919
const LazyWrapper: FC = ({ children }) => (
2020
<EuiErrorBoundary>
21-
<Suspense fallback={<EuiLoadingContent lines={3} />}>{children}</Suspense>
21+
<Suspense fallback={<EuiSkeletonText lines={3} />}>{children}</Suspense>
2222
</EuiErrorBoundary>
2323
);
2424

‎x-pack/plugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import {
1212
EuiFlexItem,
1313
EuiIcon,
1414
EuiLink,
15-
EuiLoadingContent,
1615
EuiPagination,
1716
EuiPanel,
17+
EuiSkeletonText,
1818
EuiSpacer,
1919
EuiTab,
2020
EuiTabs,
@@ -252,7 +252,7 @@ export function ErrorSampleDetails({
252252
{isLoading ? (
253253
<EuiFlexItem grow={false}>
254254
<EuiSpacer size="s" />
255-
<EuiLoadingContent lines={2} data-test-sub="loading-content" />
255+
<EuiSkeletonText lines={2} data-test-sub="loading-content" />
256256
</EuiFlexItem>
257257
) : (
258258
<Summary
@@ -334,7 +334,7 @@ export function ErrorSampleDetails({
334334
{isLoading ? (
335335
<EuiFlexItem grow={false}>
336336
<EuiSpacer size="s" />
337-
<EuiLoadingContent lines={3} data-test-sub="loading-content" />
337+
<EuiSkeletonText lines={3} data-test-sub="loading-content" />
338338
</EuiFlexItem>
339339
) : (
340340
<SampleSummary error={error} />
@@ -363,7 +363,7 @@ export function ErrorSampleDetails({
363363
</EuiTabs>
364364
<EuiSpacer />
365365
{isLoading || !error ? (
366-
<EuiLoadingContent lines={3} data-test-sub="loading-content" />
366+
<EuiSkeletonText lines={3} data-test-sub="loading-content" />
367367
) : (
368368
<TabContent error={error} currentTab={currentTab} />
369369
)}

‎x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/metric_item.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
*/
77
import React from 'react';
88
import { Chart, Metric, MetricDatum } from '@elastic/charts';
9-
import { EuiLoadingContent, EuiPanel } from '@elastic/eui';
9+
import { EuiSkeletonText, EuiPanel } from '@elastic/eui';
1010
import { isEmpty } from 'lodash';
1111

1212
export function MetricItem({
@@ -33,7 +33,7 @@ export function MetricItem({
3333
>
3434
{!hasData && isLoading ? (
3535
<EuiPanel hasBorder={true}>
36-
<EuiLoadingContent lines={3} />
36+
<EuiSkeletonText lines={3} />
3737
</EuiPanel>
3838
) : (
3939
<Chart>

0 commit comments

Comments
 (0)