From de72253c52ddf3c149002d1457deb905ec2b2093 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Thu, 20 Feb 2025 15:41:10 +0100
Subject: [PATCH] frontend-plugin-api: add ExtensionBoundary.lazyComponent

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
---
 .changeset/tall-falcons-juggle.md             |  5 +++++
 packages/frontend-plugin-api/report.api.md    |  7 ++++++-
 .../src/components/ExtensionBoundary.tsx      | 19 +++++++++++++++++--
 .../blueprints/EntityCardLauyoutBlueprint.tsx | 14 ++------------
 4 files changed, 30 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/tall-falcons-juggle.md

diff --git a/.changeset/tall-falcons-juggle.md b/.changeset/tall-falcons-juggle.md
new file mode 100644
index 0000000000..6843d48146
--- /dev/null
+++ b/.changeset/tall-falcons-juggle.md
@@ -0,0 +1,5 @@
+---
+'@backstage/frontend-plugin-api': patch
+---
+
+Added a new `ExtensionBoundary.lazyComponent` helper in addition to the existing `ExtensionBoundary.lazy` helper.
diff --git a/packages/frontend-plugin-api/report.api.md b/packages/frontend-plugin-api/report.api.md
index 13eb751361..5de595b6a9 100644
--- a/packages/frontend-plugin-api/report.api.md
+++ b/packages/frontend-plugin-api/report.api.md
@@ -964,8 +964,13 @@ export namespace ExtensionBoundary {
   // (undocumented)
   export function lazy(
     appNode: AppNode,
-    lazyElement: () => Promise<JSX.Element>,
+    loader: () => Promise<JSX.Element>,
   ): JSX.Element;
+  // (undocumented)
+  export function lazyComponent<TProps extends {}>(
+    appNode: AppNode,
+    loader: () => Promise<(props: TProps) => JSX.Element>,
+  ): (props: TProps) => JSX.Element;
 }
 
 // @public (undocumented)
diff --git a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx
index 176dfd4c3c..1737e0b40b 100644
--- a/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx
+++ b/packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx
@@ -96,10 +96,10 @@ export function ExtensionBoundary(props: ExtensionBoundaryProps) {
 export namespace ExtensionBoundary {
   export function lazy(
     appNode: AppNode,
-    lazyElement: () => Promise<JSX.Element>,
+    loader: () => Promise<JSX.Element>,
   ): JSX.Element {
     const ExtensionComponent = reactLazy(() =>
-      lazyElement().then(element => ({ default: () => element })),
+      loader().then(element => ({ default: () => element })),
     );
     return (
       <ExtensionBoundary node={appNode}>
@@ -107,4 +107,19 @@ export namespace ExtensionBoundary {
       </ExtensionBoundary>
     );
   }
+
+  export function lazyComponent<TProps extends {}>(
+    appNode: AppNode,
+    loader: () => Promise<(props: TProps) => JSX.Element>,
+  ): (props: TProps) => JSX.Element {
+    const ExtensionComponent = reactLazy(() =>
+      loader().then(Component => ({ default: Component })),
+    ) as unknown as React.ComponentType<TProps>;
+
+    return (props: TProps) => (
+      <ExtensionBoundary node={appNode}>
+        <ExtensionComponent {...props} />
+      </ExtensionBoundary>
+    );
+  }
 }
diff --git a/plugins/catalog-react/src/alpha/blueprints/EntityCardLauyoutBlueprint.tsx b/plugins/catalog-react/src/alpha/blueprints/EntityCardLauyoutBlueprint.tsx
index 3aaba93813..706f4deedf 100644
--- a/plugins/catalog-react/src/alpha/blueprints/EntityCardLauyoutBlueprint.tsx
+++ b/plugins/catalog-react/src/alpha/blueprints/EntityCardLauyoutBlueprint.tsx
@@ -24,7 +24,7 @@ import {
   entityFilterFunctionDataRef,
   defaultEntityCardAreas,
 } from './extensionData';
-import React, { lazy as reactLazy, ComponentProps } from 'react';
+import React from 'react';
 
 /** @alpha */
 export interface EntityCardLayoutProps {
@@ -82,18 +82,8 @@ export const EntityCardLayoutBlueprint = createExtensionBlueprint({
       yield entityFilterFunctionDataRef(defaultFilter);
     }
 
-    const ExtensionComponent = reactLazy(() =>
-      loader().then(component => ({ default: component })),
-    );
-
     yield entityCardLayoutComponentDataRef(
-      (props: ComponentProps<typeof ExtensionComponent>) => {
-        return (
-          <ExtensionBoundary node={node}>
-            <ExtensionComponent {...props} />
-          </ExtensionBoundary>
-        );
-      },
+      ExtensionBoundary.lazyComponent(node, loader),
     );
   },
 });