refactor(search-react): use extension boundary and suspense

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/search-react/src/alpha.tsx

@@ -14,18 +14,18 @@
  * limitations under the License.
  */
 
-import React, { lazy, Suspense } from 'react';
+import React, { lazy } from 'react';
 
 import { ListItemProps } from '@material-ui/core';
 
 import {
   ExtensionBoundary,
+  ExtensionSuspense,
   PortableSchema,
   createExtension,
   createExtensionDataRef,
   createSchemaFromZod,
 } from '@backstage/frontend-plugin-api';
-import { Progress } from '@backstage/core-components';
 import { SearchDocument, SearchResult } from '@backstage/plugin-search-common';
 
 import { SearchResultListItemExtension } from './extensions';
@@ -87,6 +87,13 @@ export type SearchResultItemExtensionOptions<
 export function createSearchResultListItemExtension<
   TConfig extends { noTrack?: boolean },
 >(options: SearchResultItemExtensionOptions<TConfig>) {
+  const id = `plugin.search.result.item.${options.id}`;
+
+  const attachTo = options.attachTo ?? {
+    id: 'plugin.search.page',
+    input: 'items',
+  };
+
   const configSchema =
     'configSchema' in options
       ? options.configSchema
@@ -95,15 +102,16 @@ export function createSearchResultListItemExtension<
             noTrack: z.boolean().default(false),
           }),
         ) as PortableSchema<TConfig>);
+
   return createExtension({
-    id: `plugin.search.result.item.${options.id}`,
-    attachTo: options.attachTo ?? { id: 'plugin.search.page', input: 'items' },
+    id,
+    attachTo,
     configSchema,
     output: {
       item: searchResultItemExtensionData,
     },
     factory({ bind, config, source }) {
-      const LazyComponent = lazy(() =>
+      const ExtensionComponent = lazy(() =>
         options
           .component({ config })
           .then(component => ({ default: component })),
@@ -113,16 +121,16 @@ export function createSearchResultListItemExtension<
         item: {
           predicate: options.predicate,
           component: props => (
-            <ExtensionBoundary source={source}>
-              <Suspense fallback={<Progress />}>
+            <ExtensionBoundary id={id} source={source}>
+              <ExtensionSuspense>
                 <SearchResultListItemExtension
                   rank={props.rank}
                   result={props.result}
                   noTrack={config.noTrack}
                 >
-                  <LazyComponent {...props} />
+                  <ExtensionComponent {...props} />
                 </SearchResultListItemExtension>
-              </Suspense>
+              </ExtensionSuspense>
             </ExtensionBoundary>
           ),
         },