introduce ExtensionBoundary.lazy

Signed-off-by: blam <ben@blam.sh>
Co-authored-by: Fredrik Adelöw <freben@gmail.com>

packages/frontend-plugin-api/src/blueprints/PageBlueprint.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { lazy } from 'react';
+
 import { RouteRef } from '../routing';
 import { coreExtensionData, createExtensionBlueprint } from '../wiring';
 import { ExtensionBoundary } from '../components';
@@ -48,16 +48,8 @@ export const PageBlueprint = createExtensionBlueprint({
     },
     { config, node },
   ) {
-    const ExtensionComponent = lazy(() =>
-      loader().then(element => ({ default: () => element })),
-    );
-
     yield coreExtensionData.routePath(config.path ?? defaultPath);
-    yield coreExtensionData.reactElement(
-      <ExtensionBoundary node={node}>
-        <ExtensionComponent />
-      </ExtensionBoundary>,
-    );
+    yield coreExtensionData.reactElement(ExtensionBoundary.lazy(node, loader));
 
     if (routeRef) {
       yield coreExtensionData.routeRef(routeRef);

packages/frontend-plugin-api/src/components/ExtensionBoundary.tsx

@@ -19,6 +19,7 @@ import React, {
   ReactNode,
   Suspense,
   useEffect,
+  lazy as reactLazy,
 } from 'react';
 import { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -90,3 +91,20 @@ export function ExtensionBoundary(props: ExtensionBoundaryProps) {
     </Suspense>
   );
 }
+
+/** @public */
+export namespace ExtensionBoundary {
+  export function lazy(
+    appNode: AppNode,
+    lazyElement: () => Promise<JSX.Element>,
+  ): JSX.Element {
+    const ExtensionComponent = reactLazy(() =>
+      lazyElement().then(element => ({ default: () => element })),
+    );
+    return (
+      <ExtensionBoundary node={appNode}>
+        <ExtensionComponent />
+      </ExtensionBoundary>
+    );
+  }
+}