Convert basic usage of EuiLoadingContent to EuiSkeletonText

elastic · May 11, 2023 · 327626a · 327626a
1 parent 1b02347
commit 327626a
Show file tree

Hide file tree

Showing 91 changed files with 200 additions and 210 deletions.
diff --git a/src/plugins/console/public/application/components/editor_content_spinner.tsx b/src/plugins/console/public/application/components/editor_content_spinner.tsx
@@ -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>
   );
 };
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx b/src/plugins/data_view_field_editor/public/components/field_format_editor/format_editor.tsx
@@ -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>
             }

diff --git a/...ent/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/...ent/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
@@ -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>
             }

diff --git a/src/plugins/discover/public/plugin.tsx b/src/plugins/discover/public/plugin.tsx
@@ -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>
           }
         >

diff --git a/src/plugins/es_ui_shared/public/components/code_editor/index.tsx b/src/plugins/es_ui_shared/public/components/code_editor/index.tsx
@@ -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'));

diff --git a/src/plugins/saved_objects_finder/public/finder/index.tsx b/src/plugins/saved_objects_finder/public/finder/index.tsx
@@ -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>
     }
   >

diff --git a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx b/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx
@@ -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}

diff --git a/x-pack/plugins/aiops/public/shared_lazy_components.tsx b/x-pack/plugins/aiops/public/shared_lazy_components.tsx
@@ -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>
 );
 

diff --git a/...ugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx b/...ugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
@@ -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} />
       )}

diff --git a/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/metric_item.tsx b/x-pack/plugins/apm/public/components/app/mobile/service_overview/stats/metric_item.tsx
@@ -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>

diff --git a/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_stat.tsx b/x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_stat.tsx
@@ -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}</>
       )}

diff --git a/...blic/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/...blic/components/app/service_overview/service_overview_instances_table/intance_details.tsx
@@ -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>
     );
   }

diff --git a/...apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx b/...apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
@@ -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>
     );
   }

diff --git a/x-pack/plugins/apm/public/components/app/storage_explorer/summary_stats.tsx b/x-pack/plugins/apm/public/components/app/storage_explorer/summary_stats.tsx
@@ -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 && (

diff --git a/...ck/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx b/...ck/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
@@ -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}>

diff --git a/...apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx b/...apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx
@@ -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}</>
       )}

diff --git a/...lugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx b/...lugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
@@ -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>

diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/icon_popover.tsx
@@ -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
         )}

diff --git a/x-pack/plugins/cases/public/components/all_cases/table.tsx b/x-pack/plugins/cases/public/components/all_cases/table.tsx
@@ -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>
   ) : (
     <>

diff --git a/x-pack/plugins/cases/public/components/files/files_table.tsx b/x-pack/plugins/cases/public/components/files/files_table.tsx
@@ -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} />
     </>
   ) : (
     <>