chore(scorecard): optimize scorecard

[Eswaraiahsapram]

Hey, I just made a Pull Request!

Resolves: https://redhat.atlassian.net/browse/RHIDP-15511

Code changes

1. homePageCards.tsx — removed static ScorecardHomepageCardWithProvider import; each widget's components callback now uses a lazyScorecardWidget helper that does:

  const { ScorecardHomepageCardWithProvider } = await import(
    '../../components/ScorecardHomepageSection'
  );

2. The 7 per-widget wrapper functions (AggregatedCardWith*Content) are replaced by inline factory callbacks passed to lazyScorecardWidget, which performs the dynamic import once and passes the component to the factory.

NFS alpha expose summary

Metric	BEFORE	AFTER	Δ
Sync chunks	9	6	-3
Sync size	1,591.3 KB	1,041.7 KB	-549.6 KB (-34.5%)
Async chunks	206	215	+9
Async size (listed)	1,190.3 KB	1,805.6 KB	+615.3 KB

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-scorecard	workspaces/scorecard/plugins/scorecard	patch	v2.8.1

[fullsend-ai-review]

🤖 Finished Review · ❌ Failure · Started 11:23 AM UTC · Completed 11:35 AM UTC
Commit: 43c26af · View workflow run →

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

[rhdh-qodo-merge]

PR Summary by Qodo

Optimize scorecard homepage widget loading via dynamic import

✨ Enhancement ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Lazily load the Scorecard homepage card component to reduce initial bundle size.
• Inline per-widget content factories to remove duplicate wrapper components.
• Add a patch changeset documenting the Scorecard homepage loading optimization.

Diagram

graph TD
  UI["Backstage Home"] --> HPC["homePageCards.tsx"] --> LSW(["lazyScorecardWidget"]) --> CHUNK[["ScorecardHomepageSection chunk"]] --> PROVIDER["ScorecardHomepageCardWithProvider"] --> CONTENT["Widget Content"] --> RENDER["Borderless Renderer"]

  subgraph Legend
    direction LR
    _file["File"] ~~~ _fn(["Helper fn"]) ~~~ _mod[["Lazy-loaded module"]]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Hoist a shared import promise (single loader)

• ➕ Guarantees only one dynamic import promise is created regardless of how many widgets resolve at once
• ➕ Centralizes error handling/logging for the lazy import
• ➖ Adds a bit of module-level state/indirection
• ➖ Current approach already benefits from module caching in most bundlers/runtimes

2. Use React.lazy/Suspense for the card module

• ➕ Standard React idiom for code-splitting with built-in loading fallback patterns
• ➖ May not fit the HomePageWidgetBlueprint async 'components' contract as cleanly
• ➖ Requires ensuring Suspense boundaries exist where the widget renders

Recommendation: The current helper-based dynamic import approach is a good fit for Backstage HomePageWidgetBlueprint’s async components API and removes repeated wrapper components. If reviewers observe repeated resolver invocations causing overhead, consider hoisting a single shared import promise to make the "import once" behavior explicit, but it’s not strictly required given typical module caching.

Files changed (2) +53 / -61

Enhancement (1) +48 / -61

homePageCards.tsxLazy-load Scorecard homepage card component and inline widget factories +48/-61

Lazy-load Scorecard homepage card component and inline widget factories

• Replaces a static import of ScorecardHomepageCardWithProvider with a dynamic import resolved inside a new lazyScorecardWidget helper. Removes multiple per-widget wrapper components in favor of inline factories that render the provider with the appropriate metricId/aggregationId.

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

Other (1) +5 / -0

hungry-mangos-guess.mdAdd patch changeset for scorecard homepage loading optimization +5/-0

Add patch changeset for scorecard homepage loading optimization

• Adds a patch changeset entry for the scorecard plugin describing the homepage loading optimization. This ensures the change is captured in release/versioning automation.

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

[fullsend-ai-review]

Looks good to me

Previous run

Review

Findings

Low

• [type conventions] workspaces/scorecard/plugins/scorecard/src/alpha/extensions/homePageCards.tsx:25 — The factory callback return type uses the global JSX.Element, which is deprecated in @types/react v18+. The scorecard workspace pins @types/react to ^18 and test files use React.ReactElement instead.
  Remediation: Replace () => JSX.Element with () => React.ReactElement or omit the explicit return type and let TypeScript infer it.

[fullsend-ai-review]

🤖 Review · ❌ Terminated · Started 2:59 PM UTC · Ended 3:11 PM UTC
Commit: cf245a6 · View workflow run →

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[fullsend-ai-review]

🤖 Finished Review · ✅ Success · Started 2:59 PM UTC · Completed 3:11 PM UTC
Commit: cf245a6 · View workflow run →