From 0e8f4a65aa6553ec0591ebe0459f280288f5e2c2 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Tue, 28 Nov 2023 10:01:37 +0100
Subject: [PATCH] refactor: make components optionally lazy

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../examples/notFoundErrorPageExtension.tsx   |  2 +-
 .../src/collectLegacyComponents.tsx           |  6 ++--
 .../src/extensions/components.tsx             |  8 ++---
 .../extensions/createComponentExtension.tsx   | 32 +++++++++++++------
 4 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx
index b1e88b6457..82acc25fb5 100644
--- a/packages/app-next/src/examples/notFoundErrorPageExtension.tsx
+++ b/packages/app-next/src/examples/notFoundErrorPageExtension.tsx
@@ -58,5 +58,5 @@ export function CustomNotFoundErrorPage() {
 
 export default createComponentExtension({
   ref: coreComponentsRefs.notFoundErrorPage,
-  component: async () => CustomNotFoundErrorPage,
+  component: { sync: () => CustomNotFoundErrorPage },
 });
diff --git a/packages/core-compat-api/src/collectLegacyComponents.tsx b/packages/core-compat-api/src/collectLegacyComponents.tsx
index 17a354f52d..6092ca1be7 100644
--- a/packages/core-compat-api/src/collectLegacyComponents.tsx
+++ b/packages/core-compat-api/src/collectLegacyComponents.tsx
@@ -34,13 +34,13 @@ const refs: Record<string, ComponentRef<ComponentTypes>> = {
 /** @public */
 export function collectLegacyComponents(components: Partial<AppComponents>) {
   return Object.entries(components).reduce<Extension<unknown>[]>(
-    (extensions, [componentName, componentFunction]) => {
-      const ref = refs[componentName];
+    (extensions, [name, component]) => {
+      const ref = refs[name];
       return ref
         ? extensions.concat(
             createComponentExtension({
               ref,
-              component: async () => componentFunction,
+              component: { sync: () => component },
             }),
           )
         : extensions;
diff --git a/packages/frontend-app-api/src/extensions/components.tsx b/packages/frontend-app-api/src/extensions/components.tsx
index cf34859aa0..fa9187a831 100644
--- a/packages/frontend-app-api/src/extensions/components.tsx
+++ b/packages/frontend-app-api/src/extensions/components.tsx
@@ -24,20 +24,20 @@ import { components as defaultComponents } from '../../../app-defaults/src/defau
 
 export const DefaultProgressComponent = createComponentExtension({
   ref: coreComponentsRefs.progress,
-  component: async () => defaultComponents.Progress,
+  component: { sync: () => defaultComponents.Progress },
 });
 
 export const DefaultBootErrorPageComponent = createComponentExtension({
   ref: coreComponentsRefs.bootErrorPage,
-  component: async () => defaultComponents.BootErrorPage,
+  component: { sync: () => defaultComponents.BootErrorPage },
 });
 
 export const DefaultNotFoundErrorPageComponent = createComponentExtension({
   ref: coreComponentsRefs.notFoundErrorPage,
-  component: async () => defaultComponents.NotFoundErrorPage,
+  component: { sync: () => defaultComponents.NotFoundErrorPage },
 });
 
 export const DefaultErrorBoundaryComponent = createComponentExtension({
   ref: coreComponentsRefs.errorBoundaryFallback,
-  component: async () => defaultComponents.ErrorBoundaryFallback,
+  component: { sync: () => defaultComponents.ErrorBoundaryFallback },
 });
diff --git a/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx b/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx
index e337f3f822..a20faa0b3a 100644
--- a/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx
+++ b/packages/frontend-plugin-api/src/extensions/createComponentExtension.tsx
@@ -35,10 +35,19 @@ export function createComponentExtension<
   disabled?: boolean;
   inputs?: TInputs;
   configSchema?: PortableSchema<TConfig>;
-  component: (values: {
-    config: TConfig;
-    inputs: Expand<ExtensionInputValues<TInputs>>;
-  }) => Promise<TRef['T']>;
+  component:
+    | {
+        lazy: (values: {
+          config: TConfig;
+          inputs: Expand<ExtensionInputValues<TInputs>>;
+        }) => Promise<TRef['T']>;
+      }
+    | {
+        sync: (values: {
+          config: TConfig;
+          inputs: Expand<ExtensionInputValues<TInputs>>;
+        }) => TRef['T'];
+      };
 }) {
   const id = options.ref.id;
   return createExtension({
@@ -51,11 +60,16 @@ export function createComponentExtension<
       component: coreExtensionData.component,
     },
     factory({ config, inputs, node }) {
-      const ExtensionComponent = lazy(() =>
-        options
-          .component({ config, inputs })
-          .then(component => ({ default: component })),
-      );
+      let ExtensionComponent: TRef['T'];
+
+      if ('sync' in options.component) {
+        ExtensionComponent = options.component.sync({ config, inputs });
+      } else {
+        const loader = options.component.lazy({ config, inputs });
+        ExtensionComponent = lazy(() =>
+          loader.then(component => ({ default: component })),
+        );
+      }
 
       return {
         component: {