[Tech Debt] Remove deprecated EuiLoadingContent (#156316)

## Summary

This PR removes the deprecated `EuiLoadingContent` in favour of the new
`EuiSkeletonText` + `EuiSkeletonRectangle` components in all
Presentation-owned files.

cc @elastic/eui-team 


### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)



### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

examples/controls_example/public/edit_example.tsx

@@ -14,11 +14,11 @@ import {
   EuiButtonGroup,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiLoadingContent,
   EuiPanel,
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiSkeletonRectangle,
 } from '@elastic/eui';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
 import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '@kbn/controls-plugin/common';
@@ -77,7 +77,7 @@ export const EditExample = () => {
     setIsLoading(true);
 
     // simulated async load await
-    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await new Promise((resolve) => setTimeout(resolve, 6000));
 
     let input: Partial<ControlGroupInput> = {};
     const inputAsString = localStorage.getItem(INPUT_KEY);
@@ -180,7 +180,7 @@ export const EditExample = () => {
         {isLoading ? (
           <>
             <EuiSpacer />
-            <EuiLoadingContent lines={1} />
+            <EuiSkeletonRectangle width="100%" height="2em" />
           </>
         ) : null}
         <ControlGroupRenderer

src/plugins/dashboard/public/dashboard_actions/filters_notification_popover_contents.tsx

@@ -9,7 +9,7 @@
 import React, { useMemo, useState } from 'react';
 import useMount from 'react-use/lib/useMount';
 
-import { EuiCodeBlock, EuiFlexGroup, EuiForm, EuiFormRow, EuiLoadingContent } from '@elastic/eui';
+import { EuiCodeBlock, EuiFlexGroup, EuiForm, EuiFormRow, EuiSkeletonText } from '@elastic/eui';
 import { FilterableEmbeddable, IEmbeddable } from '@kbn/embeddable-plugin/public';
 import { FilterItems } from '@kbn/unified-search-plugin/public';
 import { css } from '@emotion/react';
@@ -60,41 +60,37 @@ export function FiltersNotificationPopoverContents({ context }: FiltersNotificat
   });
 
   return (
-    <>
+    <EuiForm
-      {isLoading ? (
+      component="div"
-        <EuiLoadingContent lines={3} />
+      css={css`
-      ) : (
+        min-width: 300px;
-        <EuiForm
+      `}
-          component="div"
+    >
-          css={css`
+      <EuiSkeletonText isLoading={isLoading} lines={3}>
-            min-width: 300px;
+        {queryString !== '' && (
-          `}
+          <EuiFormRow
-        >
+            label={dashboardFilterNotificationActionStrings.getQueryTitle()}
-          {queryString !== '' && (
+            display="rowCompressed"
-            <EuiFormRow
+          >
-              label={dashboardFilterNotificationActionStrings.getQueryTitle()}
+            <EuiCodeBlock
-              display="rowCompressed"
+              language={queryLanguage}
+              paddingSize="none"
+              transparentBackground
+              aria-labelledby={`${dashboardFilterNotificationActionStrings.getQueryTitle()}: ${queryString}`}
+              tabIndex={0} // focus so that keyboard controls will not skip over the code block
             >
-              <EuiCodeBlock
+              {queryString}
-                language={queryLanguage}
+            </EuiCodeBlock>
-                paddingSize="none"
+          </EuiFormRow>
-                transparentBackground
+        )}
-                aria-labelledby={`${dashboardFilterNotificationActionStrings.getQueryTitle()}: ${queryString}`}
+        {filters && filters.length > 0 && (
-                tabIndex={0} // focus so that keyboard controls will not skip over the code block
+          <EuiFormRow label={dashboardFilterNotificationActionStrings.getFiltersTitle()}>
-              >
+            <EuiFlexGroup wrap={true} gutterSize="xs">
-                {queryString}
+              <FilterItems filters={filters} indexPatterns={dataViews} readOnly={true} />
-              </EuiCodeBlock>
+            </EuiFlexGroup>
-            </EuiFormRow>
+          </EuiFormRow>
-          )}
+        )}
-          {filters && filters.length > 0 && (
+      </EuiSkeletonText>
-            <EuiFormRow label={dashboardFilterNotificationActionStrings.getFiltersTitle()}>
+    </EuiForm>
-              <EuiFlexGroup wrap={true} gutterSize="xs">
-                <FilterItems filters={filters} indexPatterns={dataViews} readOnly={true} />
-              </EuiFlexGroup>
-            </EuiFormRow>
-          )}
-        </EuiForm>
-      )}
-    </>
   );
 }

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { EuiDelayRender, EuiErrorBoundary, EuiLoadingContent } from '@elastic/eui';
+import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
 
 import { useUiSetting } from '../ui_settings';
 import type { Props } from './code_editor';
@@ -25,7 +25,7 @@ const Fallback: React.FunctionComponent<{ height: Props['height'] }> = ({ height
       {/* when height is known, set minHeight to avoid layout shift */}
       <div style={height ? { minHeight: height } : {}}>
         <EuiDelayRender>
-          <EuiLoadingContent lines={3} />
+          <EuiSkeletonText lines={3} />
         </EuiDelayRender>
       </div>
     </>

src/plugins/kibana_react/public/markdown/index.tsx

@@ -7,13 +7,13 @@
  */
 
 import React from 'react';
-import { EuiLoadingContent, EuiDelayRender } from '@elastic/eui';
+import { EuiSkeletonText, EuiDelayRender } from '@elastic/eui';
 import type { MarkdownSimpleProps } from './markdown_simple';
 import type { MarkdownProps } from './markdown';
 
 const Fallback = () => (
   <EuiDelayRender>
-    <EuiLoadingContent lines={3} />
+    <EuiSkeletonText lines={3} />
   </EuiDelayRender>
 );