From 38a7c083b67a58803d8e9f1dfa4ea7f96b279ad7 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Fri, 5 May 2023 14:16:23 -0700
Subject: [PATCH 01/12] Upgrade EUI v78.0.0

---
 package.json                      | 2 +-
 src/dev/license_checker/config.ts | 2 +-
 yarn.lock                         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index ab936f36f4af7..6d631331a9126 100644
--- a/package.json
+++ b/package.json
@@ -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": "78.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index e6543669466f9..f5a901c343e3a 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -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@78.0.0': ['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
 };
diff --git a/yarn.lock b/yarn.lock
index fd21cb31c9a82..d1524f1461149 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1543,10 +1543,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@77.2.2":
-  version "77.2.2"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-77.2.2.tgz#9c5cce85b156dafd733f3bedbd78bae6db5dc2fd"
-  integrity sha512-DSvPkqQES5zPwUKsRVMjf4hBRTlVPFd9W5j7n0/IhDS5M3aZWPCIPRnMLE6MhzXBQ1WktW6A7nqlupF4iL3S0w==
+"@elastic/eui@78.0.0":
+  version "78.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-78.0.0.tgz#8baebdff833725f2750ec3d9f1d933748caad7eb"
+  integrity sha512-2OZVdLHpQPm8CWpOqnBI0XisohlTtsuDub1r90UTsIZCrwevK3aBrLb8DibpggRfaXXE4QtALYpN8+JoEu8dWw==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"

From 265004f663ad61bdca7cc84cead66a62678bb23a Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Fri, 5 May 2023 22:08:20 -0700
Subject: [PATCH 02/12] EuiAvatar snapshot updates

---
 .../__snapshots__/comments.test.tsx.snap         | 16 ++++++++--------
 .../__snapshots__/page_template.test.tsx.snap    |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap
index 141ba955b4e27..92aa17170f1fa 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap
@@ -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=""
                         >
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
index eb340494403b7..8f157043cac64 100644
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
@@ -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"
         >

From 1b02347059e053619ce8d3bd4ee5459da563b1e5 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 10:53:27 -0700
Subject: [PATCH 03/12] Upgrade to EUI v79.0.0

---
 package.json                      | 2 +-
 src/dev/license_checker/config.ts | 2 +-
 yarn.lock                         | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 6d631331a9126..3436cdd008cb0 100644
--- a/package.json
+++ b/package.json
@@ -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": "78.0.0",
+    "@elastic/eui": "79.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index f5a901c343e3a..a0972896c8f82 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -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@78.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@79.0.0': ['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
 };
diff --git a/yarn.lock b/yarn.lock
index d1524f1461149..3442948492ecf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1543,10 +1543,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@78.0.0":
-  version "78.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-78.0.0.tgz#8baebdff833725f2750ec3d9f1d933748caad7eb"
-  integrity sha512-2OZVdLHpQPm8CWpOqnBI0XisohlTtsuDub1r90UTsIZCrwevK3aBrLb8DibpggRfaXXE4QtALYpN8+JoEu8dWw==
+"@elastic/eui@79.0.0":
+  version "79.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-79.0.0.tgz#6e8044f31117c62a3b6975dab4a8d3366ee765aa"
+  integrity sha512-xFFnZ4mNR+zwGGZyz4vH+Z/r18Yy6Yj60Hps/CqRrOLSJre/+889BAlBFGY95NzmANf95X8UcibgNjmZCUWHtg==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"

From 327626a7bef0484016d09a2dc2fd62cc03a15edc Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 11:00:35 -0700
Subject: [PATCH 04/12] Convert basic usage of `EuiLoadingContent` to
 `EuiSkeletonText`

---
 .../components/editor_content_spinner.tsx          |  4 ++--
 .../field_format_editor/format_editor.tsx          |  6 +++---
 .../field_format_editor/field_format_editor.tsx    |  6 +++---
 src/plugins/discover/public/plugin.tsx             |  6 +++---
 .../public/components/code_editor/index.tsx        |  6 +++---
 .../saved_objects_finder/public/finder/index.tsx   |  4 ++--
 .../log_categorization/log_categorization_page.tsx |  4 ++--
 .../aiops/public/shared_lazy_components.tsx        |  4 ++--
 .../error_sampler/error_sample_detail.tsx          |  8 ++++----
 .../mobile/service_overview/stats/metric_item.tsx  |  4 ++--
 .../service_groups_list/service_stat.tsx           |  4 ++--
 .../intance_details.tsx                            |  4 ++--
 .../services_table/storage_details_per_service.tsx |  4 ++--
 .../app/storage_explorer/summary_stats.tsx         |  4 ++--
 .../waterfall_with_summary/index.tsx               |  4 ++--
 .../waterfall_with_summary/transaction_tabs.tsx    |  4 ++--
 .../apm_header_action_menu/labs/labs_flyout.tsx    |  4 ++--
 .../shared/service_icons/icon_popover.tsx          |  4 ++--
 .../cases/public/components/all_cases/table.tsx    |  4 ++--
 .../cases/public/components/files/files_table.tsx  |  4 ++--
 .../recent_cases/loading_placeholders.tsx          |  4 ++--
 .../public/api/geo_upload_wizard_async_wrapper.tsx |  4 ++--
 .../public/api/index_name_form_async_wrapper.tsx   |  4 ++--
 .../components/node_attrs_details.tsx              |  4 ++--
 .../metric_anomaly/components/expression.tsx       |  4 ++--
 .../log_entry_examples_loading_indicator.tsx       |  4 ++--
 .../components/node_details/tabs/osquery/index.tsx |  4 ++--
 .../layer_wizard_select.test.tsx.snap              |  2 +-
 .../flyout_body/layer_wizard_select.tsx            |  4 ++--
 x-pack/plugins/maps/public/lazy_wrapper.tsx        |  4 ++--
 .../components/page_header/page_header.tsx         |  4 ++--
 .../expandable_section/expandable_section.tsx      |  4 ++--
 .../test_models/output_loading.tsx                 |  6 +++---
 .../shared/load_when_in_view/load_when_in_view.tsx |  4 ++--
 .../osquery_managed_custom_button_extension.tsx    |  4 ++--
 .../plugins/osquery/public/live_queries/index.tsx  |  4 ++--
 .../plugins/osquery/public/packs/packs_table.tsx   |  4 ++--
 .../osquery/public/results/results_table.tsx       |  4 ++--
 .../osquery/public/routes/packs/edit/index.tsx     |  4 ++--
 .../osquery/public/routes/packs/list/index.tsx     |  4 ++--
 .../shared_components/osquery_action/index.tsx     |  6 +++---
 .../access_agreement_page.test.tsx                 |  6 +++---
 .../access_agreement/access_agreement_page.tsx     |  4 ++--
 .../cti_details/threat_details_view.tsx            |  4 ++--
 .../components/event_details/event_details.tsx     |  4 ++--
 .../event_details/insights/simple_alert_table.tsx  |  4 ++--
 .../empty_viewer_state.tsx                         |  4 ++--
 .../components/edit_exception_flyout/index.tsx     |  4 ++--
 .../flyout_components/add_to_lists_table/index.tsx |  7 ++-----
 .../flyout_components/linked_to_list/index.tsx     |  4 ++--
 .../components/rules_table/rules_tables.tsx        |  4 ++--
 .../pages/detection_engine/chart_panels/index.tsx  | 10 +++++-----
 .../exceptions/pages/list_detail_view/index.tsx    |  4 ++--
 .../explore/components/paginated_table/index.tsx   |  4 ++--
 .../context_menu_with_router_support.tsx           |  4 ++--
 .../components/management_empty_state.tsx          |  4 ++--
 .../view/details/components/flyout_header.tsx      |  4 ++--
 .../view/details/endpoint_details.tsx              |  8 ++++----
 .../components/endpoint_policy_artifact_cards.tsx  |  4 ++--
 .../pages/policy/view/policy_details_form.tsx      |  4 ++--
 .../components/loading_placeholders/index.tsx      |  4 ++--
 .../side_panel/event_details/expandable_event.tsx  |  4 ++--
 .../components/timeline/tabs_content/index.tsx     | 14 +++++++-------
 .../policy_retention_schedule.tsx                  |  4 ++--
 .../common/components/monitor_details_panel.tsx    |  4 ++--
 .../common/components/monitor_location_select.tsx  |  4 ++--
 .../common/components/monitor_status.tsx           |  4 ++--
 .../common/components/thershold_indicator.tsx      |  4 ++--
 .../common/monitor_test_result/status_badge.tsx    |  4 ++--
 .../error_details/components/error_started_at.tsx  |  4 ++--
 .../error_details/components/error_timeline.tsx    |  4 ++--
 .../monitor_details/monitor_details_last_run.tsx   |  4 ++--
 .../monitor_details/monitor_details_status.tsx     |  4 ++--
 .../monitor_errors/failed_tests_by_step.tsx        |  4 ++--
 .../monitor_summary/alert_actions.tsx              |  4 ++--
 .../monitor_summary/monitor_alerts.tsx             |  4 ++--
 .../monitor_details_panel_container.tsx            |  4 ++--
 .../overview/overview/overview_alerts.tsx          |  4 ++--
 .../overview/overview_errors/overview_errors.tsx   |  4 ++--
 .../overview/overview_grid_item_loader.tsx         |  4 ++--
 .../synthetics/components/settings/policy_link.tsx |  4 ++--
 .../step_details_page/step_details_status.tsx      |  4 ++--
 .../components/step_details_page/step_page_nav.tsx |  4 ++--
 .../test_run_details/components/step_info.tsx      |  4 ++--
 .../components/test_run_details_status.tsx         |  4 ++--
 .../components/test_run_details/step_tabs.tsx      |  4 ++--
 .../transform_management_section.tsx               |  4 ++--
 .../sections/alerts_table/alerts_table.tsx         |  4 ++--
 .../deprecations_count_checkpoint.tsx              |  4 ++--
 .../overview/backup_step/cloud_backup.tsx          |  4 ++--
 .../components/overview/logs_step/logs_step.tsx    | 11 ++---------
 91 files changed, 200 insertions(+), 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
index 9a819b7fd90e9..a186c68d896c0 100644
--- 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
index 7058b04b09053..c98baa14b113d 100644
--- 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/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
index fe6ae3158a971..e7cec89a82f8e 100644
--- a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/field_format_editor.tsx
+++ b/src/plugins/data_view_management/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
index 1d106309641a3..969ec70a104f2 100644
--- 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
index 3424f89d8ee82..eb5fc9e36733a 100644
--- 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
index 789d09ec520b1..93f61401dbe0a 100644
--- 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
index e4653d089e5a6..963481181b035 100644
--- 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
index 4f9ade98d4dc0..d981455d92848 100644
--- 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/x-pack/plugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx b/x-pack/plugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
index c80cfd5e857a4..c9a93fb143094 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
+++ b/x-pack/plugins/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
index a9e4d42390538..696079ba5be90 100644
--- 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
index 75a6282fa02b9..07a0defa41c5a 100644
--- 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/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
index 7c8f6d85b7f7c..fac65a4485766 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx
+++ b/x-pack/plugins/apm/public/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/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx b/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
index dffd3559d16e5..c6e36cbdb4429 100644
--- a/x-pack/plugins/apm/public/components/app/storage_explorer/services_table/storage_details_per_service.tsx
+++ b/x-pack/plugins/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
index 37b6fb872ed15..860a9b251b71e 100644
--- 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/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
index 6c08013d8f57a..e19400490133b 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/index.tsx
+++ b/x-pack/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/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx
index 3a3194bc5879c..7e363d50ae666 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/transaction_tabs.tsx
+++ b/x-pack/plugins/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/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx b/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
index a7dfc481e70b5..78910f057a16d 100644
--- a/x-pack/plugins/apm/public/components/routing/app_root/apm_header_action_menu/labs/labs_flyout.tsx
+++ b/x-pack/plugins/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
index 4909cb77639c2..aaa70f85aaf1a 100644
--- 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
index 0809d5092a5ef..dc5e7042ec9f7 100644
--- 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
index 18a9e7f196661..f42d49dc8e003 100644
--- 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} />
     </>
   ) : (
     <>
diff --git a/x-pack/plugins/cases/public/components/recent_cases/loading_placeholders.tsx b/x-pack/plugins/cases/public/components/recent_cases/loading_placeholders.tsx
index 6e839e00a511d..553d67838e28f 100644
--- a/x-pack/plugins/cases/public/components/recent_cases/loading_placeholders.tsx
+++ b/x-pack/plugins/cases/public/components/recent_cases/loading_placeholders.tsx
@@ -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>
     ))}
diff --git a/x-pack/plugins/file_upload/public/api/geo_upload_wizard_async_wrapper.tsx b/x-pack/plugins/file_upload/public/api/geo_upload_wizard_async_wrapper.tsx
index f84eb24585ca4..e6eb3e10dd1a8 100644
--- a/x-pack/plugins/file_upload/public/api/geo_upload_wizard_async_wrapper.tsx
+++ b/x-pack/plugins/file_upload/public/api/geo_upload_wizard_async_wrapper.tsx
@@ -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} />;
   }
 }
diff --git a/x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx b/x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx
index ff915c493b93d..0e2606c6d1197 100644
--- a/x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx
+++ b/x-pack/plugins/file_upload/public/api/index_name_form_async_wrapper.tsx
@@ -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} />;
   }
 }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_attrs_details.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_attrs_details.tsx
index d5a27d7e667e9..b8ef5c7f80627 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_attrs_details.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/data_tier_allocation_field/components/node_attrs_details.tsx
@@ -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 = (
diff --git a/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx b/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx
index 37db6cb499f30..76dbac0b8821b 100644
--- a/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx
+++ b/x-pack/plugins/infra/public/alerting/metric_anomaly/components/expression.tsx
@@ -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 (
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx
index c51b4f786d50e..170d3db0ba41d 100644
--- a/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_entry_examples/log_entry_examples_loading_indicator.tsx
@@ -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} />
     ))}
   </>
 );
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/osquery/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/osquery/index.tsx
index 8671b5e3f7ad8..26f261bb1b3c4 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/osquery/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/osquery/index.tsx
@@ -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>
       );
     }
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
index e1acbae810144..325779ba5a867 100644
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/__snapshots__/layer_wizard_select.test.tsx.snap
@@ -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>
diff --git a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
index 543764aa9d7c2..62a69931fbacd 100644
--- a/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
+++ b/x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.tsx
@@ -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>
       );
     }
diff --git a/x-pack/plugins/maps/public/lazy_wrapper.tsx b/x-pack/plugins/maps/public/lazy_wrapper.tsx
index 1a808799bf4c4..38740267f39b4 100644
--- a/x-pack/plugins/maps/public/lazy_wrapper.tsx
+++ b/x-pack/plugins/maps/public/lazy_wrapper.tsx
@@ -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>
 );
 
diff --git a/x-pack/plugins/ml/public/application/components/page_header/page_header.tsx b/x-pack/plugins/ml/public/application/components/page_header/page_header.tsx
index 0423e718047c1..66e89b1881856 100644
--- a/x-pack/plugins/ml/public/application/components/page_header/page_header.tsx
+++ b/x-pack/plugins/ml/public/application/components/page_header/page_header.tsx
@@ -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} />;
 };
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
index 7761c58e4fb11..6f8170e71989e 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/expandable_section/expandable_section.tsx
@@ -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
diff --git a/x-pack/plugins/ml/public/application/model_management/test_models/output_loading.tsx b/x-pack/plugins/ml/public/application/model_management/test_models/output_loading.tsx
index 2d842c5a08390..3a1e2b8e998d1 100644
--- a/x-pack/plugins/ml/public/application/model_management/test_models/output_loading.tsx
+++ b/x-pack/plugins/ml/public/application/model_management/test_models/output_loading.tsx
@@ -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']}
     />
   );
 };
diff --git a/x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx b/x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx
index 16cb8c35b34a6..4eb1a0cf61f0e 100644
--- a/x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx
+++ b/x-pack/plugins/observability/public/components/shared/load_when_in_view/load_when_in_view.tsx
@@ -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>
   );
 }
diff --git a/x-pack/plugins/osquery/public/fleet_integration/osquery_managed_custom_button_extension.tsx b/x-pack/plugins/osquery/public/fleet_integration/osquery_managed_custom_button_extension.tsx
index c06f567f5b753..937ef3b19b010 100644
--- a/x-pack/plugins/osquery/public/fleet_integration/osquery_managed_custom_button_extension.tsx
+++ b/x-pack/plugins/osquery/public/fleet_integration/osquery_managed_custom_button_extension.tsx
@@ -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) {
diff --git a/x-pack/plugins/osquery/public/live_queries/index.tsx b/x-pack/plugins/osquery/public/live_queries/index.tsx
index 9f149c0082669..df119c9ad1412 100644
--- a/x-pack/plugins/osquery/public/live_queries/index.tsx
+++ b/x-pack/plugins/osquery/public/live_queries/index.tsx
@@ -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) {
diff --git a/x-pack/plugins/osquery/public/packs/packs_table.tsx b/x-pack/plugins/osquery/public/packs/packs_table.tsx
index 69cfb3e40ef2e..cd80e9ecc86c7 100644
--- a/x-pack/plugins/osquery/public/packs/packs_table.tsx
+++ b/x-pack/plugins/osquery/public/packs/packs_table.tsx
@@ -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 (
diff --git a/x-pack/plugins/osquery/public/results/results_table.tsx b/x-pack/plugins/osquery/public/results/results_table.tsx
index cb2d5d96af221..2aa4a781c44ee 100644
--- a/x-pack/plugins/osquery/public/results/results_table.tsx
+++ b/x-pack/plugins/osquery/public/results/results_table.tsx
@@ -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) {
diff --git a/x-pack/plugins/osquery/public/routes/packs/edit/index.tsx b/x-pack/plugins/osquery/public/routes/packs/edit/index.tsx
index 64d3c4699708f..a4ef12814d8f0 100644
--- a/x-pack/plugins/osquery/public/routes/packs/edit/index.tsx
+++ b/x-pack/plugins/osquery/public/routes/packs/edit/index.tsx
@@ -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} />
       )}
diff --git a/x-pack/plugins/osquery/public/routes/packs/list/index.tsx b/x-pack/plugins/osquery/public/routes/packs/list/index.tsx
index 1c4cf2d49186f..8a7464eaa7b88 100644
--- a/x-pack/plugins/osquery/public/routes/packs/list/index.tsx
+++ b/x-pack/plugins/osquery/public/routes/packs/list/index.tsx
@@ -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) {
diff --git a/x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx b/x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx
index 13d4e8745e233..1d4a8137efe73 100644
--- a/x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx
+++ b/x-pack/plugins/osquery/public/shared_components/osquery_action/index.tsx
@@ -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) {
diff --git a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
index a8d5c22e6a5f8..1060717ddafa7 100644
--- a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
+++ b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.test.tsx
@@ -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(
diff --git a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.tsx b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.tsx
index 6e53d3b76fcc6..ba96ee16a03bd 100644
--- a/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.tsx
+++ b/x-pack/plugins/security/public/authentication/access_agreement/access_agreement_page.tsx
@@ -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>
   );
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
index 2602220ee1850..d7b646433f159 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/cti_details/threat_details_view.tsx
@@ -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} />
             </>
           )}
         </>
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
index 13bf589143fe6..5c883a5d38800 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -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} />
                   </>
                 )}
 
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/insights/simple_alert_table.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/insights/simple_alert_table.tsx
index ace9d7d683fbe..903122beba332 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/insights/simple_alert_table.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/insights/simple_alert_table.tsx
@@ -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) {
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/all_exception_items_table/empty_viewer_state.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/all_exception_items_table/empty_viewer_state.tsx
index 3e4c605e919ae..42b7874132f9d 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/all_exception_items_table/empty_viewer_state.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/all_exception_items_table/empty_viewer_state.tsx
@@ -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" />
         );
     }
   }, [
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/edit_exception_flyout/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/edit_exception_flyout/index.tsx
index 1dd03d8bc9f9d..29b7d6908d875 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/edit_exception_flyout/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/edit_exception_flyout/index.tsx
@@ -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}
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/add_to_lists_table/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/add_to_lists_table/index.tsx
index 5957ee0b49e21..a8850112bce0f 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/add_to_lists_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/add_to_lists_table/index.tsx
@@ -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}
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/linked_to_list/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/linked_to_list/index.tsx
index f09b15bda16a1..ad24092b09d7a 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/linked_to_list/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/flyout_components/linked_to_list/index.tsx
@@ -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);
 
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx
index c59051c94023d..ca4d0241e508f 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/components/rules_table/rules_tables.tsx
@@ -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
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
index 8d0fd71dbc0c3..42c8aef707ea5 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.tsx
@@ -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"
diff --git a/x-pack/plugins/security_solution/public/exceptions/pages/list_detail_view/index.tsx b/x-pack/plugins/security_solution/public/exceptions/pages/list_detail_view/index.tsx
index 023ebe69ab2fe..4272632d28a10 100644
--- a/x-pack/plugins/security_solution/public/exceptions/pages/list_detail_view/index.tsx
+++ b/x-pack/plugins/security_solution/public/exceptions/pages/list_detail_view/index.tsx
@@ -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 (
diff --git a/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx b/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
index 86964625784da..6c870c313a412 100644
--- a/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/explore/components/paginated_table/index.tsx
@@ -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
diff --git a/x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx b/x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx
index 26b462b8da570..e2be061c2af38 100644
--- a/x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx
@@ -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}`)}
diff --git a/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx b/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
index 113dc8985a403..94dddba539ce2 100644
--- a/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
@@ -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 && (
               <>
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
index 5e25c94d51e51..8cc41f19e94a3 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/flyout_header.tsx
@@ -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">
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
index d5babbd8c6cc2..b52aaa0da4223 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/endpoint_details.tsx
@@ -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>
       ) : (
         <>
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension/components/endpoint_policy_artifact_cards.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension/components/endpoint_policy_artifact_cards.tsx
index d9f9d32827abd..bbb4258ccc2da 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension/components/endpoint_policy_artifact_cards.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/ingest_manager_integration/endpoint_policy_edit_extension/components/endpoint_policy_artifact_cards.tsx
@@ -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) {
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx
index 35997ae0c5106..61947bc5982f4 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details_form.tsx
@@ -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 (
diff --git a/x-pack/plugins/security_solution/public/overview/components/loading_placeholders/index.tsx b/x-pack/plugins/security_solution/public/overview/components/loading_placeholders/index.tsx
index 7e0788d66878b..6c7c9c1d7d906 100644
--- a/x-pack/plugins/security_solution/public/overview/components/loading_placeholders/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/loading_placeholders/index.tsx
@@ -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>
     ))}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
index addeb6889af1c..41ffaa529d0fd 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/expandable_event.tsx
@@ -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 (
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
index 0d77cfe739b3d..661e38aaa3f40 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs_content/index.tsx
@@ -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}
diff --git a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
index 87712c6abd87e..97317cb360a2c 100644
--- a/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
+++ b/x-pack/plugins/snapshot_restore/public/application/sections/home/policy_list/policy_retention_schedule/policy_retention_schedule.tsx
@@ -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>
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
index dffc3b1f357b6..a7a894bef6b8d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_details_panel.tsx
@@ -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];
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_location_select.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_location_select.tsx
index a4b70e0704b66..d83845417cb4e 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_location_select.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_location_select.tsx
@@ -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} /> }]}
       />
     );
   }
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
index e35bed7c6f5b3..787cf358f2961 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/monitor_status.tsx
@@ -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} />
           ),
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/thershold_indicator.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/thershold_indicator.tsx
index fc77ef52aee8a..e6aa4921cfee6 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/thershold_indicator.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/components/thershold_indicator.tsx
@@ -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);
 
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx
index 38b853d0e8f25..dd72eac40afc3 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx
@@ -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 (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_started_at.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_started_at.tsx
index a6c3efb161711..5b4311bfaaa2b 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_started_at.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_started_at.tsx
@@ -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 }]} />;
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx
index 4c63aabcc56b0..cda2098bec5a6 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/error_details/components/error_timeline.tsx
@@ -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),
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_last_run.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_last_run.tsx
index 4fe7c9a2ecefd..5783fc5e617f1 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_last_run.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_last_run.tsx
@@ -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 (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
index 566fd55b1e451..ee3d3e95071fb 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_details_status.tsx
@@ -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} />,
           },
         ]}
       />
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_by_step.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_by_step.tsx
index 10c420e5e3da4..7b2a3dbddd604 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_by_step.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests_by_step.tsx
@@ -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 (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/alert_actions.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/alert_actions.tsx
index bb75e412f43be..d037816654ba0 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/alert_actions.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/alert_actions.tsx
@@ -10,7 +10,7 @@ import {
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiPopover,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiLoadingSpinner,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -51,7 +51,7 @@ export const AlertActions = ({
   };
 
   if (!monitor) {
-    return <EuiLoadingContent lines={1} />;
+    return <EuiSkeletonText lines={1} />;
   }
 
   const onToggleAlertClick = () => {
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
index edd41cf80db32..10e9176df1ce0 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_alerts.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiPanel,
   EuiText,
   EuiTitle,
@@ -42,7 +42,7 @@ export const MonitorAlerts = ({
   const selectedLocation = useSelectedLocation();
 
   if (!monitorId || !selectedLocation) {
-    return <EuiLoadingContent />;
+    return <EuiSkeletonText />;
   }
 
   return (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx
index 99885ac30fb87..eac222b447825 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/monitor_details_panel_container.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent } from '@elastic/eui';
+import { EuiSkeletonText } from '@elastic/eui';
 import { useParams } from 'react-router-dom';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import {
@@ -28,7 +28,7 @@ export const MonitorDetailsPanelContainer = (props: Partial<MonitorDetailsPanelP
     (latestPing && latestPing?.config_id !== configId) ||
     (monitor && monitor[ConfigKey.CONFIG_ID] !== configId)
   ) {
-    return <EuiLoadingContent lines={6} />;
+    return <EuiSkeletonText lines={6} />;
   }
 
   return (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
index 7d8f6268f48fb..f3288f2f362c7 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_alerts.tsx
@@ -9,7 +9,7 @@ import React, { useMemo } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
@@ -75,7 +75,7 @@ export const OverviewAlerts = () => {
       </EuiTitle>
       <EuiSpacer size="s" />
       {loading ? (
-        <EuiLoadingContent lines={3} />
+        <EuiSkeletonText lines={3} />
       ) : (
         <EuiFlexGroup alignItems="center" gutterSize="m">
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
index ea4b0f8282ebf..34d113da9901b 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_errors/overview_errors.tsx
@@ -8,7 +8,7 @@
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiPanel,
   EuiSpacer,
   EuiTitle,
@@ -40,7 +40,7 @@ export function OverviewErrors() {
       </EuiTitle>
       <EuiSpacer size="s" />
       {loading ? (
-        <EuiLoadingContent lines={3} />
+        <EuiSkeletonText lines={3} />
       ) : (
         <EuiFlexGroup gutterSize="xl">
           <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid_item_loader.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid_item_loader.tsx
index 284eb9696c6f0..b4b78af942d5d 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid_item_loader.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid_item_loader.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 import React from 'react';
-import { EuiPanel, EuiLoadingContent } from '@elastic/eui';
+import { EuiPanel, EuiSkeletonText } from '@elastic/eui';
 
 export const OverviewGridItemLoader = () => {
   return (
     <EuiPanel style={{ height: '160px' }} hasBorder={true}>
-      <EuiLoadingContent lines={2} />
+      <EuiSkeletonText lines={2} />
     </EuiPanel>
   );
 };
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/settings/policy_link.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/settings/policy_link.tsx
index 34bb2e40f645a..c612df3fba32b 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/settings/policy_link.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/settings/policy_link.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiIconTip, EuiLink, EuiLoadingContent, EuiToolTip, EuiText } from '@elastic/eui';
+import { EuiIconTip, EuiLink, EuiSkeletonText, EuiToolTip, EuiText } from '@elastic/eui';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { ILM_LOCATOR_ID } from '@kbn/index-lifecycle-management-plugin/public';
 import { useFetcher } from '@kbn/observability-plugin/public';
@@ -27,7 +27,7 @@ export const PolicyLink = ({ name }: { name: string }) => {
   }, [name]);
 
   if (!data) {
-    return <EuiLoadingContent lines={1} />;
+    return <EuiSkeletonText lines={1} />;
   }
 
   if (!name) {
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_details_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_details_status.tsx
index ed74c03166ef5..5cf3688b7f769 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_details_status.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_details_status.tsx
@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-import { EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
+import { EuiDescriptionList, EuiSkeletonText } from '@elastic/eui';
 import { parseBadgeStatus, StatusBadge } from '../common/monitor_test_result/status_badge';
 import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
 import { STATUS_LABEL } from '../common/components/monitor_status';
@@ -14,7 +14,7 @@ import { STATUS_LABEL } from '../common/components/monitor_status';
 export const StepDetailsStatus = () => {
   const { currentStep } = useJourneySteps();
 
-  let content = <EuiLoadingContent lines={1} />;
+  let content = <EuiSkeletonText lines={1} />;
 
   if (currentStep?.synthetics.step?.status) {
     content = <StatusBadge status={parseBadgeStatus(currentStep.synthetics.step?.status)} />;
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx
index 9bd25a715dff1..0d0bd0f92c9d5 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_page_nav.tsx
@@ -11,7 +11,7 @@ import {
   EuiDescriptionList,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiText,
   EuiPopover,
 } from '@elastic/eui';
@@ -77,7 +77,7 @@ export const StepPageNavigation = ({ testRunPage }: { testRunPage?: boolean }) =
   }
 
   if (!startedAt) {
-    startedAt = <EuiLoadingContent lines={1} />;
+    startedAt = <EuiSkeletonText lines={1} />;
   }
 
   return (
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/step_info.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/step_info.tsx
index beda3ed42ead3..2dbb83fd18e41 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/step_info.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/step_info.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -36,7 +36,7 @@ export const StepMetaInfo = ({
   if (!step) {
     return (
       <EuiFlexItem grow={true}>
-        <EuiLoadingContent lines={4} />
+        <EuiSkeletonText lines={4} />
       </EuiFlexItem>
     );
   }
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/test_run_details_status.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/test_run_details_status.tsx
index 211864fbd4b2f..486eac24d9344 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/test_run_details_status.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/components/test_run_details_status.tsx
@@ -6,7 +6,7 @@
  */
 import React from 'react';
 
-import { EuiDescriptionList, EuiLoadingContent } from '@elastic/eui';
+import { EuiDescriptionList, EuiSkeletonText } from '@elastic/eui';
 import { useJourneySteps } from '../../monitor_details/hooks/use_journey_steps';
 import { useSelectedMonitor } from '../../monitor_details/hooks/use_selected_monitor';
 import { BadgeStatus, MonitorStatus, STATUS_LABEL } from '../../common/components/monitor_status';
@@ -31,7 +31,7 @@ export const TestRunDetailsStatus = () => {
                   isBrowserType={stepsData.details.journey.monitor.type === 'browser'}
                 />
               ) : (
-                <EuiLoadingContent lines={1} />
+                <EuiSkeletonText lines={1} />
               ),
           },
         ]}
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/step_tabs.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/step_tabs.tsx
index 26500d0874b5a..d3247d852877e 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/step_tabs.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/test_run_details/step_tabs.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiCodeBlock, EuiLoadingContent, EuiTab, EuiTabs } from '@elastic/eui';
+import { EuiCodeBlock, EuiSkeletonText, EuiTab, EuiTabs } from '@elastic/eui';
 import React, { useCallback, useEffect, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { JourneyStep, SyntheticsJourneyApiResponse } from '../../../../../common/runtime_types';
@@ -89,7 +89,7 @@ export const StepTabs = ({
 
   const renderTabContent = () => {
     if (loading) {
-      return <EuiLoadingContent />;
+      return <EuiSkeletonText />;
     }
     switch (selectedTabId) {
       case 'code':
diff --git a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
index 3961f83ecffd0..fd79e8eb9e2e9 100644
--- a/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
+++ b/x-pack/plugins/transform/public/app/sections/transform_management/transform_management_section.tsx
@@ -14,7 +14,7 @@ import {
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiModal,
   EuiPageContent_Deprecated as EuiPageContent,
   EuiPageContentBody_Deprecated as EuiPageContentBody,
@@ -172,7 +172,7 @@ export const TransformManagement: FC = () => {
       <EuiSpacer size="l" />
 
       <EuiPageContentBody data-test-subj="transformPageTransformList">
-        {!isInitialized && <EuiLoadingContent lines={2} />}
+        {!isInitialized && <EuiSkeletonText lines={2} />}
         {isInitialized && (
           <>
             {unauthorizedTransformsWarning}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
index 0ccc05bac858a..62e9e93ca4120 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_table.tsx
@@ -15,7 +15,7 @@ import {
   EuiToolTip,
   EuiButtonIcon,
   EuiDataGridStyle,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiDataGridRefProps,
 } from '@elastic/eui';
 import { useQueryClient } from '@tanstack/react-query';
@@ -359,7 +359,7 @@ const AlertsTable: React.FunctionComponent<AlertsTableProps> = (props: AlertsTab
           ecsData: ecsAlert,
         });
       } else if (isLoading) {
-        return <EuiLoadingContent lines={1} />;
+        return <EuiSkeletonText lines={1} />;
       }
       return null;
     },
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx
index 410162a46f8b4..22744f092555b 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecation_logs/fix_deprecation_logs/deprecations_count_checkpoint/deprecations_count_checkpoint.tsx
@@ -10,7 +10,7 @@ import moment from 'moment-timezone';
 import { FormattedDate, FormattedTime, FormattedMessage } from '@kbn/i18n-react';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
-import { EuiCallOut, EuiButton, EuiLoadingContent } from '@elastic/eui';
+import { EuiCallOut, EuiButton, EuiSkeletonText } from '@elastic/eui';
 
 import { useAppContext } from '../../../../app_context';
 import { uiMetricService, UIM_RESET_LOGS_COUNTER_CLICK } from '../../../../lib/ui_metric';
@@ -95,7 +95,7 @@ export const DeprecationsCountCheckpoint: FunctionComponent<Props> = ({
   };
 
   if (isInitialRequest && isLoading) {
-    return <EuiLoadingContent lines={6} />;
+    return <EuiSkeletonText lines={6} />;
   }
 
   if (error) {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx
index 88180341b6218..f7bffbb3b5472 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/overview/backup_step/cloud_backup.tsx
@@ -11,7 +11,7 @@ import { FormattedDate, FormattedTime, FormattedMessage } from '@kbn/i18n-react'
 import { i18n } from '@kbn/i18n';
 import { METRIC_TYPE } from '@kbn/analytics';
 import {
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
@@ -68,7 +68,7 @@ export const CloudBackup: React.FunctionComponent<Props> = ({
   }, [error, isLoading, data, setForceOnPremStep]);
 
   if (isInitialRequest && isLoading) {
-    return <EuiLoadingContent data-test-subj="cloudBackupLoading" lines={3} />;
+    return <EuiSkeletonText data-test-subj="cloudBackupLoading" lines={3} />;
   }
 
   if (error) {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/overview/logs_step/logs_step.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/overview/logs_step/logs_step.tsx
index c81f5dba58e14..ab743e5c97e0d 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/overview/logs_step/logs_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/overview/logs_step/logs_step.tsx
@@ -7,14 +7,7 @@
 
 import React, { useEffect } from 'react';
 
-import {
-  EuiText,
-  EuiSpacer,
-  EuiButton,
-  EuiCallOut,
-  EuiLoadingContent,
-  EuiCode,
-} from '@elastic/eui';
+import { EuiText, EuiSpacer, EuiButton, EuiCallOut, EuiSkeletonText, EuiCode } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedDate, FormattedTime, FormattedMessage } from '@kbn/i18n-react';
 import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
@@ -152,7 +145,7 @@ const LogsStep = ({
   }
 
   if (isLoading && isInitialRequest) {
-    return <EuiLoadingContent lines={3} />;
+    return <EuiSkeletonText lines={3} />;
   }
 
   if (hasPrivileges && error) {

From e6ceb36a7504aa742a440aa7d78e79f790511cab Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 11:46:11 -0700
Subject: [PATCH 05/12] Convert examples using `EuiSkeletonText`s isLoading
 API/wrapper

- using this API has improved screen reader accessibility + announcements on load
---
 .../src/empty_viewer_state/index.tsx          | 17 ++--
 .../waterfall/span_flyout/index.tsx           | 23 ++---
 .../waterfall/transaction_flyout/index.tsx    | 23 ++---
 .../credentials/credentials.test.tsx          |  4 +-
 .../components/credentials/credentials.tsx    |  6 +-
 .../documents/organic_documents.test.tsx      |  4 +-
 .../curation/documents/organic_documents.tsx  | 96 +++++++++----------
 .../public/application/explorer/explorer.tsx  |  8 +-
 .../ml/public/application/routing/router.tsx  | 10 +-
 .../api_keys/api_keys_grid/api_key_flyout.tsx |  8 +-
 .../users/edit_user/change_password_modal.tsx |  8 +-
 .../components/add_exception_flyout/index.tsx | 11 +--
 .../alerts_page/alerts_page_flyout_body.tsx   | 10 +-
 13 files changed, 113 insertions(+), 115 deletions(-)

diff --git a/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx b/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx
index 993c07eaa7ce7..492a34a5df76c 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx
+++ b/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx
@@ -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>
   );
 };
 
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx
index 0bde5cede8450..790bba5f61cc4 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx
@@ -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>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx
index da53126636a27..263fe8b3414f2 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx
@@ -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>
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
index 737908752911d..79b5e2add27c3 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx
@@ -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', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
index 17873f5f6be23..1cf22f472fc4c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -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>
   );
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.test.tsx
index e7e98feba4ecb..841dffbe3642e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.test.tsx
@@ -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', () => {
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.tsx
index 8c6cc93ccf843..418276fd31f85 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/documents/organic_documents.tsx
@@ -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>
   );
 };
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer.tsx b/x-pack/plugins/ml/public/application/explorer/explorer.tsx
index a8007a2631f51..946f12a63e412 100644
--- a/x-pack/plugins/ml/public/application/explorer/explorer.tsx
+++ b/x-pack/plugins/ml/public/application/explorer/explorer.tsx
@@ -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>
 
diff --git a/x-pack/plugins/ml/public/application/routing/router.tsx b/x-pack/plugins/ml/public/application/routing/router.tsx
index 4b9dab76994ed..7e11328b8d8b9 100644
--- a/x-pack/plugins/ml/public/application/routing/router.tsx
+++ b/x-pack/plugins/ml/public/application/routing/router.tsx
@@ -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>
   );
 };
 
diff --git a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
index f0550d46544bb..959c3690b623c 100644
--- a/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
+++ b/x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx
@@ -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>
   );
 };
diff --git a/x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx b/x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx
index b20300ac4cb76..3b0fb629f788c 100644
--- a/x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx
+++ b/x-pack/plugins/security/public/management/users/edit_user/change_password_modal.tsx
@@ -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
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
index e0979730b7d7c..198653576c142 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/add_exception_flyout/index.tsx
@@ -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}>
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/alerts_page_flyout_body.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/alerts_page_flyout_body.tsx
index 8d93ae21f9cdc..9c310bfd57cde 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/alerts_page_flyout_body.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/alerts_page/alerts_page_flyout_body.tsx
@@ -12,7 +12,7 @@ import {
   EuiTitle,
   EuiFlexItem,
   EuiSpacer,
-  EuiLoadingContent,
+  EuiSkeletonText,
   EuiText,
 } from '@elastic/eui';
 import { AlertsField, AlertsTableFlyoutBaseProps } from '../../../../types';
@@ -41,7 +41,7 @@ const AlertsFlyoutBody = ({ alert, isLoading }: Props) => {
         </EuiTitle>
         <EuiSpacer size="s" />
         {isLoading ? (
-          <EuiLoadingContent lines={1} />
+          <EuiSkeletonText lines={1} />
         ) : (
           <EuiText size="s" data-test-subj="alertsFlyoutName">
             {get(alert as any, AlertsField.name, [])[0]}
@@ -53,13 +53,11 @@ const AlertsFlyoutBody = ({ alert, isLoading }: Props) => {
           <h4>{REASON_LABEL}</h4>
         </EuiTitle>
         <EuiSpacer size="s" />
-        {isLoading ? (
-          <EuiLoadingContent lines={3} />
-        ) : (
+        <EuiSkeletonText lines={3} isLoading={isLoading}>
           <EuiText size="s" data-test-subj="alertsFlyoutReason">
             {get(alert as any, AlertsField.reason, [])[0]}
           </EuiText>
-        )}
+        </EuiSkeletonText>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

From 88a0293162d27e2404a3075fe73cea06bedb7c8e Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 11:46:39 -0700
Subject: [PATCH 06/12] Convert (assumed) loading titles to `EuiSkeletonTitle`

---
 .../src/tooltip/skeleton.tsx                  | 12 ++++++++---
 .../templates/service_group_template.tsx      | 20 ++++++++++---------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/kbn-cases-components/src/tooltip/skeleton.tsx b/packages/kbn-cases-components/src/tooltip/skeleton.tsx
index f0c78e2a2e215..9ade847de0e73 100644
--- a/packages/kbn-cases-components/src/tooltip/skeleton.tsx
+++ b/packages/kbn-cases-components/src/tooltip/skeleton.tsx
@@ -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>
diff --git a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
index 7440e8650443c..88c67c0ef2e98 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
@@ -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>
   );

From 5ce98240abeb4af749bbd7e1a6f9f83be2d6f038 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 12:35:27 -0700
Subject: [PATCH 07/12] Convert custom height/width single line text to
 `EuiSkeletonRectangle`

---
 .../monitor_summary/last_test_run.tsx               |  9 +++++----
 .../step_objects/color_palette.tsx                  | 13 ++-----------
 .../components/step_details_page/step_title.tsx     | 13 ++-----------
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx
index d08b099a2d617..896fadc772793 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx
@@ -12,7 +12,8 @@ import {
   EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
+  EuiSkeletonText,
+  EuiSkeletonRectangle,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -168,12 +169,12 @@ const PanelHeader = ({
         <EuiFlexGroup alignItems="center" gutterSize="s">
           <EuiFlexItem grow={false}>{TitleNode}</EuiFlexItem>
           <EuiFlexItem>
-            <EuiLoadingContent css={{ width: 52 }} lines={1} />
+            <EuiSkeletonRectangle width="52px" height="20px" />
           </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <EuiLoadingContent lines={1} />
+            <EuiSkeletonText lines={1} />
           </EuiFlexItem>
-          <EuiFlexItem>{isBrowserMonitor ? <EuiLoadingContent lines={1} /> : null}</EuiFlexItem>
+          <EuiFlexItem>{isBrowserMonitor ? <EuiSkeletonText lines={1} /> : null}</EuiFlexItem>
         </EuiFlexGroup>
       </>
     );
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx
index 78fbc568a0983..f9a40bd7d4916 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_objects/color_palette.tsx
@@ -10,12 +10,11 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
-  EuiLoadingContent,
+  EuiSkeletonRectangle,
   EuiIcon,
   EuiToolTip,
 } from '@elastic/eui';
 import { useTheme } from '@kbn/observability-plugin/public';
-import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { colourPalette } from '../common/network_data/data_formatting';
 
@@ -136,7 +135,7 @@ export const ColorPaletteFlexItem = ({
   }, [loading]);
 
   if (loading) {
-    return <LoadingLine lines={1} />;
+    return <EuiSkeletonRectangle height="20px" width="100%" />;
   }
 
   return (
@@ -159,11 +158,3 @@ export const ColorPaletteFlexItem = ({
     </EuiFlexGroup>
   );
 };
-
-const LoadingLine = styled(EuiLoadingContent)`
-  &&& {
-    > span {
-      height: 20px;
-    }
-  }
-`;
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_title.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_title.tsx
index ffae133a971ac..385c398e29a1e 100644
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_title.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_title.tsx
@@ -7,8 +7,7 @@
 
 import React from 'react';
 import { useParams } from 'react-router-dom';
-import { EuiLoadingContent } from '@elastic/eui';
-import styled from 'styled-components';
+import { EuiSkeletonRectangle } from '@elastic/eui';
 import { useJourneySteps } from '../monitor_details/hooks/use_journey_steps';
 
 export const StepTitle = () => {
@@ -19,16 +18,8 @@ export const StepTitle = () => {
   const currentStep = data?.steps.find((step) => step.synthetics.step?.index === Number(stepIndex));
 
   if (!currentStep) {
-    return <StyledContent lines={1} />;
+    return <EuiSkeletonRectangle height="45px" width="100%" />;
   }
 
   return <>{`${currentStep?.synthetics?.step?.index}. ${currentStep?.synthetics?.step?.name}`}</>;
 };
-
-const StyledContent = styled(EuiLoadingContent)`
-  &&& {
-    span {
-      height: 45px;
-    }
-  }
-`;

From 1337dd1a1d5c6d028b6005112334fe01a5355c3b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 12:39:51 -0700
Subject: [PATCH 08/12] Remove `euiLoadingContent` selector/style override

- new EuiSkeletonText CSS should not have any margin-bottom to unset
---
 .../public/overview/components/stat_value.tsx          | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/overview/components/stat_value.tsx b/x-pack/plugins/security_solution/public/overview/components/stat_value.tsx
index 1949122376056..7b00ef7ff4cd7 100644
--- a/x-pack/plugins/security_solution/public/overview/components/stat_value.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/stat_value.tsx
@@ -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'}

From 3f5541e40d91123ad8ad3f177e0aa993b610554e Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 16:19:25 -0700
Subject: [PATCH 09/12] Update `EuiPageHeader` snapshots

---
 .../__snapshots__/list_header.test.tsx.snap   | 16 +++++-----
 .../__snapshots__/page_template.test.tsx.snap |  2 +-
 .../__snapshots__/format_editor.test.tsx.snap |  4 +--
 .../field_format_editor.test.tsx.snap         |  4 +--
 .../__snapshots__/page_template.test.tsx.snap |  4 +--
 .../__snapshots__/header.test.tsx.snap        | 32 +++++++++----------
 6 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
index 672a3ae691b1e..c0d2cc256166a 100644
--- a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
+++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
@@ -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"
diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
index e70577abec7a4..c57c90acbdcf7 100644
--- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
+++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap
@@ -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"
diff --git a/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap b/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
index 6dff1359de9a7..95417e671901a 100644
--- a/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
+++ b/src/plugins/data_view_field_editor/public/components/field_format_editor/__snapshots__/format_editor.test.tsx.snap
@@ -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>
diff --git a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
index 6dff1359de9a7..95417e671901a 100644
--- a/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
+++ b/src/plugins/data_view_management/public/components/field_editor/components/field_format_editor/__snapshots__/field_format_editor.test.tsx.snap
@@ -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>
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
index 8f157043cac64..38b09264c4f81 100644
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
@@ -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"
@@ -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"
diff --git a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
index 61055ed0fe22d..b49328c50145b 100644
--- a/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
+++ b/src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap
@@ -23,46 +23,46 @@ 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"
           >
-            <a
-              class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-primary"
-              data-test-subj="savedObjectEditViewInApp"
-              href="/some-url"
-              rel="noreferrer"
+            <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="eye"
+                  data-euiicon-type="trash"
                 />
-                View saved object
+                Delete
               </span>
-            </a>
+            </button>
           </div>
           <div
             class="euiFlexItem emotion-euiFlexItem-growZero"
           >
-            <button
-              class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-danger"
-              data-test-subj="savedObjectEditDelete"
-              type="button"
+            <a
+              class="euiButton emotion-euiButtonDisplay-s-defaultMinWidth-s-base-primary"
+              data-test-subj="savedObjectEditViewInApp"
+              href="/some-url"
+              rel="noreferrer"
             >
               <span
                 class="emotion-euiButtonDisplayContent"
               >
                 <span
                   color="inherit"
-                  data-euiicon-type="trash"
+                  data-euiicon-type="eye"
                 />
-                Delete
+                View saved object
               </span>
-            </button>
+            </a>
           </div>
         </div>
       </div>

From 44a3e635b191d4f5bf261223dc05e6e0f08ea65b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 17:33:33 -0700
Subject: [PATCH 10/12] Upgrade to EUI v79.0.1 for flyout push fix

---
 package.json                      |  2 +-
 src/dev/license_checker/config.ts |  2 +-
 yarn.lock                         | 15 +++++----------
 3 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 3436cdd008cb0..5a1e897b65be4 100644
--- a/package.json
+++ b/package.json
@@ -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": "79.0.0",
+    "@elastic/eui": "79.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index a0972896c8f82..5783cc934f8f8 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -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@79.0.0': ['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
 };
diff --git a/yarn.lock b/yarn.lock
index 3442948492ecf..2cdef7d615a7a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1543,10 +1543,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@79.0.0":
-  version "79.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-79.0.0.tgz#6e8044f31117c62a3b6975dab4a8d3366ee765aa"
-  integrity sha512-xFFnZ4mNR+zwGGZyz4vH+Z/r18Yy6Yj60Hps/CqRrOLSJre/+889BAlBFGY95NzmANf95X8UcibgNjmZCUWHtg==
+"@elastic/eui@79.0.1":
+  version "79.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-79.0.1.tgz#bb723c961f438df41f5b92292b59c204cd795558"
+  integrity sha512-xCB8a2DaiAIg1qsFgegmXT5niKhL6LKqhD0fCc1ut+BZDPq4XvqagwOdmYRvP9IpYDcS6sP+F89JVF0kaQsXXw==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -29588,12 +29588,7 @@ write-file-atomic@^4.0.1:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.7"
 
-ws@8.13.0:
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
-  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
-
-ws@>=8.13.0:
+ws@8.13.0, ws@>=8.13.0:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==

From 041b5c0e0e18e20befded4a0287d990be72d1129 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 9 May 2023 17:36:44 -0700
Subject: [PATCH 11/12] Fix FTR tests to account for new EuiPageHeader DOM
 order

---
 test/functional/apps/kibana_overview/_page_header.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/functional/apps/kibana_overview/_page_header.ts b/test/functional/apps/kibana_overview/_page_header.ts
index 6ecf6d78bc0b5..362b3a97d5ffc 100644
--- a/test/functional/apps/kibana_overview/_page_header.ts
+++ b/test/functional/apps/kibana_overview/_page_header.ts
@@ -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');
     });

From 2ba2c6f06e85d22ce8e861f17fc5fe20d1c00f0c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Thu, 11 May 2023 09:34:21 -0700
Subject: [PATCH 12/12] Harden flaky Security Cypress test

---
 .../security_solution/cypress/e2e/timelines/flyout_button.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts b/x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts
index ba0ca01d203d5..d4dcd37b6bf20 100644
--- a/x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts
+++ b/x-pack/plugins/security_solution/cypress/e2e/timelines/flyout_button.cy.ts
@@ -67,7 +67,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', () => {