[Enterprise Search] Handle loading state on Credentials page (#80035) (#81051)

Author: JasonStoltz

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.test.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { Credentials } from './credentials';
-import { EuiCopy, EuiPageContentBody } from '@elastic/eui';
+import { EuiCopy, EuiLoadingContent, EuiPageContentBody } from '@elastic/eui';
 
 import { externalUrl } from '../../../shared/enterprise_search_url';
 
@@ -48,10 +48,11 @@ describe('Credentials', () => {
     expect(actions.resetCredentials).toHaveBeenCalledTimes(1);
   });
 
-  it('renders nothing if data is still loading', () => {
+  it('renders a limited UI if data is still loading', () => {
     setMockValues({ dataLoading: true });
     const wrapper = shallow(<Credentials />);
-    expect(wrapper.find(EuiPageContentBody)).toHaveLength(0);
+    expect(wrapper.find('[data-test-subj="CreateAPIKeyButton"]')).toHaveLength(0);
+    expect(wrapper.find(EuiLoadingContent)).toHaveLength(1);
   });
 
   it('renders the API endpoint and a button to copy it', () => {

x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx

@@ -19,6 +19,7 @@ import {
   EuiButton,
   EuiPageContentHeader,
   EuiPageContentHeaderSection,
+  EuiLoadingContent,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -41,11 +42,6 @@ export const Credentials: React.FC = () => {
     };
   }, []);
 
-  // TODO
-  // if (dataLoading) { return <Loading /> }
-  if (dataLoading) {
-    return null;
-  }
   return (
     <>
       <SetPageChrome
@@ -110,22 +106,22 @@ export const Credentials: React.FC = () => {
             </EuiTitle>
           </EuiPageContentHeaderSection>
           <EuiPageContentHeaderSection>
-            <EuiButton
-              color="primary"
-              data-test-subj="CreateAPIKeyButton"
-              fill={true}
-              onClick={() => showCredentialsForm()}
-            >
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
-                defaultMessage: 'Create a key',
-              })}
-            </EuiButton>
+            {!dataLoading && (
+              <EuiButton
+                color="primary"
+                data-test-subj="CreateAPIKeyButton"
+                fill={true}
+                onClick={() => showCredentialsForm()}
+              >
+                {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
+                  defaultMessage: 'Create a key',
+                })}
+              </EuiButton>
+            )}
           </EuiPageContentHeaderSection>
         </EuiPageContentHeader>
         <EuiSpacer size="s" />
-        <EuiPanel>
-          <CredentialsList />
-        </EuiPanel>
+        <EuiPanel>{!!dataLoading ? <EuiLoadingContent lines={3} /> : <CredentialsList />}</EuiPanel>
       </EuiPageContentBody>
     </>
   );