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..6ac5670848 100644
--- a/workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx
+++ b/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 ;
-}
-
-function AggregatedCardWithDefaultAggregationContent() {
- return ;
-}
-
-function AggregatedCardWithJiraOpenIssuesContent() {
- return ;
-}
-
-function AggregatedCardWithGithubOpenPrsContent() {
- return ;
-}
-
-function AggregatedCardWithGithubFilecheckLicenseContent() {
- return (
-
- );
-}
-
-function AggregatedCardWithGithubFilecheckCodeownersContent() {
- return (
-
- );
-}
-
-function AggregatedCardWithGithubOpenPrsWeightedContent() {
- return (
-
- );
+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 => () =>
+ ,
+ ),
},
});
@@ -104,10 +86,10 @@ export const aggregatedCardWithDefaultAggregationWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithDefaultAggregationContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ ,
+ ),
},
});
@@ -125,10 +107,10 @@ export const aggregatedCardWithJiraOpenIssuesWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithJiraOpenIssuesContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ ,
+ ),
},
});
@@ -146,10 +128,10 @@ export const aggregatedCardWithGithubOpenPrsWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithGithubOpenPrsContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ ,
+ ),
},
});
@@ -167,10 +149,12 @@ export const aggregatedCardWithGithubFilecheckLicenseWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithGithubFilecheckLicenseContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ (
+
+ ),
+ ),
},
});
@@ -188,10 +172,12 @@ export const aggregatedCardWithGithubFilecheckCodeownersWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithGithubFilecheckCodeownersContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ (
+
+ ),
+ ),
},
});
@@ -209,9 +195,11 @@ export const aggregatedCardWithGithubOpenPrsWeightedWidget =
componentProps: {
Renderer: BorderlessHomeWidgetRenderer,
},
- components: () =>
- Promise.resolve({
- Content: AggregatedCardWithGithubOpenPrsWeightedContent,
- }),
+ components: lazyScorecardWidget(
+ ScorecardHomepageCardWithProvider => () =>
+ (
+
+ ),
+ ),
},
});