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 => () => + ( + + ), + ), }, });