Fix duplication of context providers

x-pack/plugins/observability_solution/slo/public/pages/slo_edit/shared_flyout/slo_add_form_flyout.tsx

@@ -4,19 +4,20 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { FormattedMessage } from '@kbn/i18n-react';
 
-import React from 'react';
-import { EuiTitle, EuiFlyoutHeader, EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
+import { EuiFlyout, EuiFlyoutBody, EuiFlyoutFooter, EuiFlyoutHeader, EuiTitle } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
 import { RecursivePartial } from '@kbn/utility-types';
 import { merge } from 'lodash';
-import { createHtmlPortalNode, OutPortal } from 'react-reverse-portal';
-import { CreateSLOForm } from '../types';
+import React from 'react';
+import { OutPortal, createHtmlPortalNode } from 'react-reverse-portal';
 import { SloEditForm } from '../components/slo_edit_form';
+import { CreateSLOForm } from '../types';
 
 export const sloEditFormFooterPortal = createHtmlPortalNode();
 
-function SloAddFormFlyout({
+// eslint-disable-next-line import/no-default-export
+export default function SloAddFormFlyout({
   onClose,
   initialValues,
 }: {
@@ -69,6 +70,3 @@ function SloAddFormFlyout({
     </EuiFlyout>
   );
 }
-
-// eslint-disable-next-line import/no-default-export
-export default SloAddFormFlyout;

x-pack/plugins/observability_solution/slo/public/plugin.ts

@@ -15,6 +15,7 @@ import {
   PluginInitializerContext,
 } from '@kbn/core/public';
 import { DefaultClientOptions, createRepositoryClient } from '@kbn/server-route-repository-client';
+import { lazy } from 'react';
 import { BehaviorSubject, firstValueFrom } from 'rxjs';
 import { PLUGIN_NAME, sloAppId } from '../common';
 import { ExperimentalFeatures, SLOConfig } from '../common/config';
@@ -28,7 +29,6 @@ import { SloOverviewEmbeddableState } from './embeddable/slo/overview/types';
 import { SloDetailsLocatorDefinition } from './locators/slo_details';
 import { SloEditLocatorDefinition } from './locators/slo_edit';
 import { SloListLocatorDefinition } from './locators/slo_list';
-import { getCreateSLOFlyoutLazy } from './pages/slo_edit/shared_flyout/get_create_slo_flyout';
 import { registerBurnRateRuleType } from './rules/register_burn_rate_rule_type';
 import type {
   SLOPublicPluginsSetup,
@@ -200,18 +200,23 @@ export class SLOPlugin
     const kibanaVersion = this.initContext.env.packageInfo.version;
     const sloClient = createRepositoryClient<SLORouteRepository, DefaultClientOptions>(core);
 
+    const lazyWithContextProviders = getLazyWithContextProviders({
+      core,
+      isDev: this.initContext.env.mode.dev,
+      kibanaVersion,
+      observabilityRuleTypeRegistry: plugins.observability.observabilityRuleTypeRegistry,
+      ObservabilityPageTemplate: plugins.observabilityShared.navigation.PageTemplate,
+      plugins,
+      isServerless: !!plugins.serverless,
+      experimentalFeatures: this.experimentalFeatures,
+      sloClient,
+    });
+
     return {
-      getCreateSLOFlyout: getCreateSLOFlyoutLazy({
-        core,
-        isDev: this.initContext.env.mode.dev,
-        kibanaVersion,
-        observabilityRuleTypeRegistry: plugins.observability.observabilityRuleTypeRegistry,
-        ObservabilityPageTemplate: plugins.observabilityShared.navigation.PageTemplate,
-        plugins,
-        isServerless: !!plugins.serverless,
-        experimentalFeatures: this.experimentalFeatures,
-        sloClient,
-      }),
+      getCreateSLOFlyout: lazyWithContextProviders(
+        lazy(() => import('./pages/slo_edit/shared_flyout/slo_add_form_flyout')),
+        { spinnerSize: 'm' }
+      ),
     };
   }
 

x-pack/plugins/observability_solution/slo/public/utils/get_lazy_with_context_providers.tsx

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiLoadingSpinnerProps } from '@elastic/eui';
 import { CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { Storage } from '@kbn/kibana-utils-plugin/public';
@@ -30,6 +31,10 @@ interface Props {
 
 export type LazyWithContextProviders = ReturnType<typeof getLazyWithContextProviders>;
 
+interface Options {
+  spinnerSize?: EuiLoadingSpinnerProps['size'];
+}
+
 export const getLazyWithContextProviders =
   ({
     core,
@@ -42,7 +47,8 @@ export const getLazyWithContextProviders =
     experimentalFeatures,
     sloClient,
   }: Props) =>
-  (LazyComponent: React.LazyExoticComponent<any>): React.FunctionComponent => {
+  (LazyComponent: React.LazyExoticComponent<any>, options?: Options): React.FunctionComponent => {
+    const { spinnerSize = 'xl' } = options ?? {};
     const queryClient = new QueryClient();
     return (props) => (
       <KibanaContextProvider
@@ -65,11 +71,21 @@ export const getLazyWithContextProviders =
           }}
         >
           <QueryClientProvider client={queryClient}>
-            <Suspense>
+            <Suspense fallback={<LoadingSpinner size={spinnerSize} />}>
               <LazyComponent {...props} />
             </Suspense>
           </QueryClientProvider>
         </PluginContext.Provider>
       </KibanaContextProvider>
     );
   };
+
+function LoadingSpinner({ size }: { size: EuiLoadingSpinnerProps['size'] }) {
+  return (
+    <EuiFlexGroup justifyContent="center">
+      <EuiFlexItem grow={false}>
+        <EuiLoadingSpinner size={size} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}