load react component lazily to reduce entry bundle (#65267)

* load react component lazily to reduce entry bundle

* address comments

src/plugins/telemetry_management_section/public/components/__snapshots__/telemetry_management_section.test.tsx.snap

@@ -489,4 +489,4 @@ exports[`TelemetryManagementSectionComponent renders null because query does not
 />
 `;
 
-exports[`TelemetryManagementSectionComponent test the wrapper (for coverage purposes) 1`] = `""`;
+exports[`TelemetryManagementSectionComponent test the wrapper (for coverage purposes) 1`] = `null`;

src/plugins/telemetry_management_section/public/components/telemetry_management_section.test.tsx

@@ -18,10 +18,9 @@
  */
 import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
-import { TelemetryManagementSection } from './telemetry_management_section';
+import TelemetryManagementSection from './telemetry_management_section';
 import { TelemetryService } from '../../../telemetry/public/services';
 import { coreMock } from '../../../../core/public/mocks';
-import { telemetryManagementSectionWrapper } from './telemetry_management_section_wrapper';
 
 describe('TelemetryManagementSectionComponent', () => {
   const coreStart = coreMock.createStart();
@@ -270,10 +269,12 @@ describe('TelemetryManagementSectionComponent', () => {
       notifications: coreStart.notifications,
       http: coreSetup.http,
     });
-    const Wrapper = telemetryManagementSectionWrapper(telemetryService);
+
     expect(
       shallowWithIntl(
-        <Wrapper
+        <TelemetryManagementSection
+          showAppliesSettingMessage={true}
+          telemetryService={telemetryService}
           onQueryMatchChange={onQueryMatchChange}
           enableSaving={true}
           toasts={coreStart.notifications.toasts}

src/plugins/telemetry_management_section/public/components/telemetry_management_section.tsx

@@ -246,3 +246,7 @@ export class TelemetryManagementSection extends Component<Props, State> {
     });
   };
 }
+
+// required for lazy loading
+// eslint-disable-next-line import/no-default-export
+export default TelemetryManagementSection;

src/plugins/telemetry_management_section/public/components/telemetry_management_section_wrapper.tsx

@@ -17,23 +17,27 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
+import { EuiLoadingSpinner } from '@elastic/eui';
 import { TelemetryPluginSetup } from 'src/plugins/telemetry/public';
-import { TelemetryManagementSection } from './telemetry_management_section';
 
 // It should be this but the types are way too vague in the AdvancedSettings plugin `Record<string, any>`
 // type Props = Omit<TelemetryManagementSection['props'], 'telemetryService'>;
 type Props = any;
 
+const TelemetryManagementSectionComponent = lazy(() => import('./telemetry_management_section'));
+
 export function telemetryManagementSectionWrapper(
   telemetryService: TelemetryPluginSetup['telemetryService']
 ) {
   const TelemetryManagementSectionWrapper = (props: Props) => (
-    <TelemetryManagementSection
-      showAppliesSettingMessage={true}
-      telemetryService={telemetryService}
-      {...props}
-    />
+    <Suspense fallback={<EuiLoadingSpinner />}>
+      <TelemetryManagementSectionComponent
+        showAppliesSettingMessage={true}
+        telemetryService={telemetryService}
+        {...props}
+      />
+    </Suspense>
   );
 
   return TelemetryManagementSectionWrapper;