Convert examples using EuiSkeletonTexts isLoading API/wrapper

- using this API has improved screen reader accessibility + announcements on load
elastic · May 11, 2023 · e6ceb36 · e6ceb36
1 parent 327626a
commit e6ceb36
Show file tree

Hide file tree

Showing 13 changed files with 113 additions and 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
@@ -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/...action_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx b/...action_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/...details/waterfall_with_summary/waterfall_container/waterfall/transaction_flyout/index.tsx b/...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/...erprise_search/public/applications/app_search/components/credentials/credentials.test.tsx b/...erprise_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/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/...s/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/...pplications/app_search/components/curations/curation/documents/organic_documents.test.tsx b/...pplications/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/...lic/applications/app_search/components/curations/curation/documents/organic_documents.tsx b/...lic/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
@@ -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
@@ -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
@@ -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
@@ -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