Convert our full page Loading component to an Enterprise Search logo (#…

…103189) (#103206)

- while keeping our component-level LoadingOverlay to a spinner

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.test.tsx

@@ -9,22 +9,22 @@ import React from 'react';
 
 import { shallow } from 'enzyme';
 
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingLogo, EuiLoadingSpinner } from '@elastic/eui';
 
 import { Loading, LoadingOverlay } from './';
 
 describe('Loading', () => {
   it('renders', () => {
     const wrapper = shallow(<Loading />);
     expect(wrapper.hasClass('enterpriseSearchLoading')).toBe(true);
-    expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
+    expect(wrapper.find(EuiLoadingLogo)).toHaveLength(1);
   });
 });
 
 describe('LoadingOverlay', () => {
   it('renders', () => {
     const wrapper = shallow(<LoadingOverlay />);
     expect(wrapper.hasClass('enterpriseSearchLoadingOverlay')).toBe(true);
-    expect(wrapper.find(Loading)).toHaveLength(1);
+    expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
   });
 });

x-pack/plugins/enterprise_search/public/applications/shared/loading/loading.tsx

@@ -7,18 +7,20 @@
 
 import React from 'react';
 
-import { EuiLoadingSpinner } from '@elastic/eui';
+import { EuiLoadingLogo, EuiLoadingSpinner } from '@elastic/eui';
 
 import './loading.scss';
 
 export const Loading: React.FC = () => (
   <div className="enterpriseSearchLoading">
-    <EuiLoadingSpinner size="xl" />
+    <EuiLoadingLogo size="xl" logo="logoEnterpriseSearch" />
   </div>
 );
 
 export const LoadingOverlay: React.FC = () => (
   <div className="enterpriseSearchLoadingOverlay">
-    <Loading />
+    <div className="enterpriseSearchLoading">
+      <EuiLoadingSpinner size="xl" />
+    </div>
   </div>
 );