From 11555a0da0153d52fbcd57dd94b8ff632539dbf9 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Thu, 19 Oct 2023 11:32:39 +0200
Subject: [PATCH] refactor(catalog): forward plugin to extension boundary

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 plugins/catalog/src/alpha.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/plugins/catalog/src/alpha.tsx b/plugins/catalog/src/alpha.tsx
index 6eda8c3d26..27ec432d07 100644
--- a/plugins/catalog/src/alpha.tsx
+++ b/plugins/catalog/src/alpha.tsx
@@ -36,6 +36,7 @@ import {
   PortableSchema,
   ExtensionBoundary,
   createExtensionInput,
+  ExtensionSuspense,
 } from '@backstage/frontend-plugin-api';
 import {
   AsyncEntityProvider,
@@ -51,7 +52,6 @@ import {
   rootRouteRef,
   viewTechDocRouteRef,
 } from './routes';
-import { Progress } from '@backstage/core-components';
 import { useEntityFromUrl } from './components/CatalogEntityPage/useEntityFromUrl';
 
 /** @alpha */
@@ -97,16 +97,19 @@ export function createCatalogFilterExtension<
   configSchema?: PortableSchema<TConfig>;
   loader: (options: { config: TConfig }) => Promise<JSX.Element>;
 }) {
+  const id = `catalog.filter.${options.id}`;
+  const attachTo = { id: 'plugin.catalog.page.index', input: 'filters' };
+
   return createExtension({
-    id: `catalog.filter.${options.id}`,
-    attachTo: { id: 'plugin.catalog.page.index', input: 'filters' },
+    id,
+    attachTo,
     inputs: options.inputs ?? {},
     configSchema: options.configSchema,
     output: {
       element: coreExtensionData.reactElement,
     },
     factory({ bind, config, source }) {
-      const LazyComponent = React.lazy(() =>
+      const ExtensionComponent = React.lazy(() =>
         options
           .loader({ config })
           .then(element => ({ default: () => element })),
@@ -114,10 +117,10 @@ export function createCatalogFilterExtension<
 
       bind({
         element: (
-          <ExtensionBoundary source={source}>
-            <React.Suspense fallback={<Progress />}>
-              <LazyComponent />
-            </React.Suspense>
+          <ExtensionBoundary id={id} source={source}>
+            <ExtensionSuspense>
+              <ExtensionComponent />
+            </ExtensionSuspense>
           </ExtensionBoundary>
         ),
       });