chore(scorecard): optimize scorecard

workspaces/scorecard/.changeset/hungry-mangos-guess.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-scorecard': patch
+---
+
+optimized how scorecard homepage is loaded

workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx

@@ -14,9 +14,9 @@
  * limitations under the License.
  */
 
+import type { ComponentType, ReactElement } from 'react';
 import { HomePageWidgetBlueprint } from '@backstage/plugin-home-react/alpha';
 import type { RendererProps } from '@backstage/plugin-home-react';
-import { ScorecardHomepageCardWithProvider } from '../../components/ScorecardHomepageSection';
 
 const defaultCardLayout = {
   width: {
@@ -31,38 +31,20 @@ const defaultCardLayout = {
   },
 } as const;
 
-function AggregatedCardWithDeprecatedMetricIdContent() {
-  return <ScorecardHomepageCardWithProvider metricId="jira.openIssues" />;
-}
-
-function AggregatedCardWithDefaultAggregationContent() {
-  return <ScorecardHomepageCardWithProvider aggregationId="github.openPRs" />;
-}
-
-function AggregatedCardWithJiraOpenIssuesContent() {
-  return <ScorecardHomepageCardWithProvider aggregationId="openIssuesKpi" />;
-}
-
-function AggregatedCardWithGithubOpenPrsContent() {
-  return <ScorecardHomepageCardWithProvider aggregationId="openPrsKpi" />;
-}
-
-function AggregatedCardWithGithubFilecheckLicenseContent() {
-  return (
-    <ScorecardHomepageCardWithProvider aggregationId="licenseFileExistsKpi" />
-  );
-}
-
-function AggregatedCardWithGithubFilecheckCodeownersContent() {
-  return (
-    <ScorecardHomepageCardWithProvider aggregationId="filecheck.codeowners" />
-  );
-}
-
-function AggregatedCardWithGithubOpenPrsWeightedContent() {
-  return (
-    <ScorecardHomepageCardWithProvider aggregationId="openPrsWeightedKpi" />
-  );
+function lazyScorecardWidget(
+  factory: (
+    ScorecardHomepageCardWithProvider: ComponentType<{
+      metricId?: string;
+      aggregationId?: string;
+    }>,
+  ) => () => ReactElement,
+) {
+  return async () => {
+    const { ScorecardHomepageCardWithProvider } = await import(
+      '../../components/ScorecardHomepageSection'
+    );
+    return { Content: factory(ScorecardHomepageCardWithProvider) };
+  };
 }
 
 function BorderlessHomeWidgetRenderer({ Content }: RendererProps) {
@@ -83,10 +65,10 @@ export const aggregatedCardWithDeprecatedMetricIdWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithDeprecatedMetricIdContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider metricId="jira.openIssues" />,
+      ),
     },
   });
 
@@ -104,10 +86,10 @@ export const aggregatedCardWithDefaultAggregationWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithDefaultAggregationContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="github.openPRs" />,
+      ),
     },
   });
 
@@ -125,10 +107,10 @@ export const aggregatedCardWithJiraOpenIssuesWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithJiraOpenIssuesContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="openIssuesKpi" />,
+      ),
     },
   });
 
@@ -146,10 +128,10 @@ export const aggregatedCardWithGithubOpenPrsWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubOpenPrsContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="openPrsKpi" />,
+      ),
     },
   });
 
@@ -167,10 +149,12 @@ export const aggregatedCardWithGithubFilecheckLicenseWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubFilecheckLicenseContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="licenseFileExistsKpi" />
+          ),
+      ),
     },
   });
 
@@ -188,10 +172,12 @@ export const aggregatedCardWithGithubFilecheckCodeownersWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubFilecheckCodeownersContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="filecheck.codeowners" />
+          ),
+      ),
     },
   });
 
@@ -209,9 +195,11 @@ export const aggregatedCardWithGithubOpenPrsWeightedWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubOpenPrsWeightedContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="openPrsWeightedKpi" />
+          ),
+      ),
     },
   });