From 4add3be39242cd5a3799dc4d456bb2b63833e7df Mon Sep 17 00:00:00 2001
From: Eswaraiahsapram <esapram@redhat.com>
Date: Wed, 22 Jul 2026 16:40:22 +0530
Subject: [PATCH 1/2] chore(scorecard): optimize scorecard

---
 .../.changeset/hungry-mangos-guess.md         |   5 +
 .../src/alpha/extensions/homePageCards.tsx    | 109 ++++++++----------
 2 files changed, 53 insertions(+), 61 deletions(-)
 create mode 100644 workspaces/scorecard/.changeset/hungry-mangos-guess.md

diff --git a/workspaces/scorecard/.changeset/hungry-mangos-guess.md b/workspaces/scorecard/.changeset/hungry-mangos-guess.md
new file mode 100644
index 0000000000..1f516b8637
--- /dev/null
+++ b/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
diff --git a/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx b/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
index 8a5cc4a321..d67140cde7 100644
--- a/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
+++ b/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
@@ -16,7 +16,6 @@
 
 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 +30,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: React.ComponentType<{
+      metricId?: string;
+      aggregationId?: string;
+    }>,
+  ) => () => JSX.Element,
+) {
+  return async () => {
+    const { ScorecardHomepageCardWithProvider } = await import(
+      '../../components/ScorecardHomepageSection'
+    );
+    return { Content: factory(ScorecardHomepageCardWithProvider) };
+  };
 }
 
 function BorderlessHomeWidgetRenderer({ Content }: RendererProps) {
@@ -83,10 +64,10 @@ export const aggregatedCardWithDeprecatedMetricIdWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithDeprecatedMetricIdContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider metricId="jira.openIssues" />,
+      ),
     },
   });
 
@@ -104,10 +85,10 @@ export const aggregatedCardWithDefaultAggregationWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithDefaultAggregationContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="github.openPRs" />,
+      ),
     },
   });
 
@@ -125,10 +106,10 @@ export const aggregatedCardWithJiraOpenIssuesWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithJiraOpenIssuesContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="openIssuesKpi" />,
+      ),
     },
   });
 
@@ -146,10 +127,10 @@ export const aggregatedCardWithGithubOpenPrsWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubOpenPrsContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          <ScorecardHomepageCardWithProvider aggregationId="openPrsKpi" />,
+      ),
     },
   });
 
@@ -167,10 +148,12 @@ export const aggregatedCardWithGithubFilecheckLicenseWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubFilecheckLicenseContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="licenseFileExistsKpi" />
+          ),
+      ),
     },
   });
 
@@ -188,10 +171,12 @@ export const aggregatedCardWithGithubFilecheckCodeownersWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubFilecheckCodeownersContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="filecheck.codeowners" />
+          ),
+      ),
     },
   });
 
@@ -209,9 +194,11 @@ export const aggregatedCardWithGithubOpenPrsWeightedWidget =
       componentProps: {
         Renderer: BorderlessHomeWidgetRenderer,
       },
-      components: () =>
-        Promise.resolve({
-          Content: AggregatedCardWithGithubOpenPrsWeightedContent,
-        }),
+      components: lazyScorecardWidget(
+        ScorecardHomepageCardWithProvider => () =>
+          (
+            <ScorecardHomepageCardWithProvider aggregationId="openPrsWeightedKpi" />
+          ),
+      ),
     },
   });

From cf245a64a24a93c77646fed94d6d3e5c9cf1fa86 Mon Sep 17 00:00:00 2001
From: Eswaraiahsapram <esapram@redhat.com>
Date: Wed, 22 Jul 2026 20:28:26 +0530
Subject: [PATCH 2/2] chore(scorecard): use ReactElement instead of deprecated
 JSX.Element in home page cards

---
 .../plugins/scorecard/src/alpha/extensions/homePageCards.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx b/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
index d67140cde7..6ac5670848 100644
--- a/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
+++ b/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
@@ -14,6 +14,7 @@
  * 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';
 
@@ -32,11 +33,11 @@ const defaultCardLayout = {
 
 function lazyScorecardWidget(
   factory: (
-    ScorecardHomepageCardWithProvider: React.ComponentType<{
+    ScorecardHomepageCardWithProvider: ComponentType<{
       metricId?: string;
       aggregationId?: string;
     }>,
-  ) => () => JSX.Element,
+  ) => () => ReactElement,
 ) {
   return async () => {
     const { ScorecardHomepageCardWithProvider } = await import(