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, + loader: () => Promise, ): JSX.Element; + // (undocumented) + export function lazyComponent( + 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, + loader: () => Promise, ): JSX.Element { const ExtensionComponent = reactLazy(() => - lazyElement().then(element => ({ default: () => element })), + loader().then(element => ({ default: () => element })), ); return ( @@ -107,4 +107,19 @@ export namespace ExtensionBoundary { ); } + + export function lazyComponent( + 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; + + return (props: TProps) => ( + + + + ); + } } 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) => { - return ( - - - - ); - }, + ExtensionBoundary.lazyComponent(node, loader), ); }, });