OCPBUGS-79000: Fix perspective switcher icon suspending the whole app

[logonoff]

Depended on by #16087

LazyIcon in NavHeader had a React.lazy that wasn't wrapped in a suspense. For some reason this caused the entire app to not load when using React 18 createRoot. The solution is to use AsyncComponent which by default wraps the lazy with a suspense boundary

Summary by CodeRabbit

• Refactor
  • Improved icon loading mechanism for perspective controls.
  • Enhanced app content loading state with a dedicated loading indicator during transitions.

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-79000, which is valid. The bug has been moved to the POST state.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state New, which is one of the valid states (NEW, ASSIGNED, POST)

The bug has been updated to refer to the pull request using the external bug tracker.

Details

In response to this:

Depended on by #16087

LazyIcon in NavHeader had a React.lazy that wasn't wrapped in a suspense. For some reason this caused the entire app to not load when using React 18 createRoot.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: logonoff

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• frontend/OWNERS [logonoff]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-79000, which is valid.

3 validation(s) were run on this bug

• bug is open, matching expected state (open)
• bug target version (4.22.0) matches configured target version for branch (4.22.0)
• bug is in the state POST, which is one of the valid states (NEW, ASSIGNED, POST)

Details

In response to this:

Depended on by #16087

LazyIcon in NavHeader had a React.lazy that wasn't wrapped in a suspense. For some reason this caused the entire app to not load when using React 18 createRoot.

Summary by CodeRabbit

• Refactor
• Improved icon loading mechanism for perspective controls.
• Enhanced app content loading state with a dedicated loading indicator during transitions.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the openshift-eng/jira-lifecycle-plugin repository.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: a3495e63-6560-454f-a079-22fb881398d1

📥 Commits

Reviewing files that changed from the base of the PR and between 3a57c08 and 8ac1ed0.

📒 Files selected for processing (2)

• frontend/packages/console-app/src/components/nav/NavHeader.tsx
• frontend/public/components/app.tsx

📜 Recent review details

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

-Focus on major issues impacting performance, readability, maintainability and security. Avoid nitpicks and avoid verbosity.

Files:

• frontend/public/components/app.tsx
• frontend/packages/console-app/src/components/nav/NavHeader.tsx

🧬 Code graph analysis (2)

frontend/public/components/app.tsx (1)

frontend/packages/console-shared/src/components/loading/LoadingBox.tsx (1)

• LoadingBox (20-31)

frontend/packages/console-app/src/components/nav/NavHeader.tsx (1)

frontend/public/components/utils/async.tsx (1)

• AsyncComponent (57-96)

🔇 Additional comments (4)

frontend/public/components/app.tsx (1)

256-311: LGTM — Appropriate Suspense boundary placement.

The new <Suspense> wrapper around content correctly isolates any descendant that suspends (e.g., the AsyncComponent-loaded perspective icons in NavHeader) so it no longer bubbles up and blocks the entire app under React 18's concurrent rendering. The layered approach with separate boundaries for contextProviderExtensions provides good fault isolation and debugging granularity via the blame prop.

frontend/packages/console-app/src/components/nav/NavHeader.tsx (3)

23-24: Nice lightweight placeholder.

Using   maintains the icon's horizontal footprint during the brief async load without adding visual noise. Since the perspective name is always rendered as text alongside the icon, there's no a11y gap during the loading phase.

---

34-37: Correct fix — AsyncComponent provides the missing Suspense boundary.

AsyncComponent wraps lazy loading with its own <Suspense> (plus ErrorBoundaryPage and retry logic), which was the missing piece causing the bare React.lazy icon to propagate suspension to an ancestor. Extracting m.default from the dynamic import is the right pattern here.

---

98-105: Good defensive guard on icon presence.

The icon && check correctly handles the fallback path (line 77) where icon may be null when no perspective matches. Consistent with the dropdown item pattern.

---

📝 Walkthrough

Walkthrough

This pull request refactors async component loading patterns across the OpenShift Console application. In NavHeader.tsx, icon loading transitions from React.lazy/Suspense composition to a centralized AsyncComponent abstraction with shared IconLoadingComponent placeholder. In app.tsx, a top-level Suspense boundary wraps the main content with a LoadingBox fallback. These changes consolidate the async loading strategy, reducing imports and establishing a more uniform approach to handling suspended rendering states across the application.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[logonoff]

/cherry-pick release-4.21

[openshift-cherrypick-robot]

@logonoff: once the present PR merges, I will cherry-pick it on top of release-4.21 in a new PR and assign it to you.

Details

In response to this:

/cherry-pick release-4.21

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[logonoff]

/assign @yapei

[openshift-ci]

@logonoff: all tests passed!

Full PR test history. Your PR dashboard.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.