OCPBUGS-85242: Add Suspense boundary to LazyRoutePage for plugin routes

[logonoff]

Analysis / Root cause:
LazyRoutePage renders React.lazy components without its own <Suspense> boundary.

It relies on the outer <Suspense> in app-contents.tsx, but React Router uses startTransition for navigations.

During a transition, React keeps the previous UI visible rather than re-showing a fallback on an already-resolved <Suspense> boundary — so no loading indicator appears while plugin JS chunks are fetched.

Built-in routes don't have this problem because AsyncComponent wraps each lazy component with its own <Suspense fallback={<LoadingBox />}>.

Solution description:

• Add a local Suspense wrapping the lazy component inside LazyRoutePage.
• Revert to the legacy unstable_useTransitions behaviour from react-router v6 so that the suspense is shown

Screenshots / screen recording:

Test setup:
Load a cluster with a dynamic plugin installed (e.g. OpenShift Pipelines).

Test cases:

• Navigate to a dynamic plugin page (e.g. OpenShift Pipelines) — loading spinner should appear while chunks load
• Navigate between plugin pages — loading spinner should appear during each transition
• Navigate to built-in pages — behavior unchanged

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Summary by CodeRabbit

• Improvements
  • Enhanced plugin loading experience by displaying a loading indicator while plugin routes are being fetched, providing better visual feedback to users during the loading process.

[openshift-ci-robot]

@logonoff: This pull request references Jira Issue OCPBUGS-85242, 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 (5.0.0) matches configured target version for branch (5.0.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:

Analysis / Root cause:
LazyRoutePage renders React.lazy components without its own <Suspense> boundary. It relies on the outer <Suspense> in app-contents.tsx, but React Router uses startTransition for navigations. During a transition, React keeps the previous UI visible rather than re-showing a fallback on an already-resolved <Suspense> boundary — so no loading indicator appears while plugin JS chunks are fetched.

Built-in routes don't have this problem because AsyncComponent wraps each lazy component with its own <Suspense fallback={<LoadingBox />}>.

Solution description:
Add a local <Suspense fallback={<LoadingBox />}> wrapping the lazy component inside LazyRoutePage, matching the pattern used by AsyncComponent. This ensures each plugin route has its own Suspense boundary that will show the loading spinner during chunk loading.

Screenshots / screen recording:

Test setup:
Load a cluster with a dynamic plugin installed (e.g. OpenShift Pipelines).

Test cases:

• Navigate to a dynamic plugin page (e.g. OpenShift Pipelines) — loading spinner should appear while chunks load
• Navigate between plugin pages — loading spinner should appear during each transition
• Navigate to built-in pages — behavior unchanged

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

Additional info:
https://redhat.atlassian.net/browse/OCPBUGS-85242

Reviewers and assignees:

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-robot]

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

3 validation(s) were run on this bug

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

Details

In response to this:

Analysis / Root cause:
LazyRoutePage renders React.lazy components without its own <Suspense> boundary.

It relies on the outer <Suspense> in app-contents.tsx, but React Router uses startTransition for navigations.

During a transition, React keeps the previous UI visible rather than re-showing a fallback on an already-resolved <Suspense> boundary — so no loading indicator appears while plugin JS chunks are fetched.

Built-in routes don't have this problem because AsyncComponent wraps each lazy component with its own <Suspense fallback={<LoadingBox />}>.

Solution description:
Add a local Suspense wrapping the lazy component inside LazyRoutePage.

This ensures each plugin route has its own Suspense boundary that will show the loading spinner during chunk loading.

Screenshots / screen recording:

Test setup:
Load a cluster with a dynamic plugin installed (e.g. OpenShift Pipelines).

Test cases:

• Navigate to a dynamic plugin page (e.g. OpenShift Pipelines) — loading spinner should appear while chunks load
• Navigate between plugin pages — loading spinner should appear during each transition
• Navigate to built-in pages — behavior unchanged

Browser conformance:

• Chrome
• Firefox
• Safari (or Epiphany on Linux)

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

[logonoff]

/cherry-pick release-4.22

[openshift-cherrypick-robot]

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

Details

In response to this:

/cherry-pick release-4.22

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.

[coderabbitai]

📝 Walkthrough

Walkthrough

The usePluginRoutes.tsx hook has been updated to wrap lazy-loaded route components with a React Suspense boundary. Previously, LazyComponent was returned directly without a suspense boundary. The component now renders LazyComponent inside a Suspense wrapper that displays a LoadingBox fallback during the loading phase. The fallback includes contextual information by combining the plugin name and extension UID in a blame string, allowing better identification of which plugin is currently loading.

🚥 Pre-merge checks | ✅ 12

✅ Passed checks (12 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately and specifically describes the main change: adding a Suspense boundary to LazyRoutePage for plugin routes, with clear Jira issue prefix.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Stable And Deterministic Test Names	✅ Passed	The custom check for "Stable and Deterministic Ginkgo Test Names" is not applicable. PR only modifies React/TypeScript frontend code (usePluginRoutes.tsx); no Ginkgo test files are added or modified.
Test Structure And Quality	✅ Passed	Ginkgo test quality check not applicable. PR modifies only frontend React/TypeScript code with no test files. No Go tests to review.
Microshift Test Compatibility	✅ Passed	PR does not add new Ginkgo e2e tests. It only modifies usePluginRoutes.tsx (TypeScript/React hook). MicroShift compatibility check applies only to new Ginkgo e2e tests, making it not applicable here.
Single Node Openshift (Sno) Test Compatibility	✅ Passed	PR contains only a frontend TypeScript/React component change with no Ginkgo e2e test additions. SNO compatibility check applies only to new tests.
Topology-Aware Scheduling Compatibility	✅ Passed	Not applicable. This PR modifies React frontend component (usePluginRoutes.tsx) only. No deployment manifests, operators, controllers, or K8s scheduling constraints involved.
Ote Binary Stdout Contract	✅ Passed	OTE Binary Stdout Contract check is not applicable. This PR modifies only frontend React/TypeScript code. No Go test files or process-level stdout writes are involved.
Ipv6 And Disconnected Network Test Compatibility	✅ Passed	PR modifies only frontend React/TS component file. Custom check applies exclusively to new Ginkgo e2e tests; none are added here.
Description check	✅ Passed	The pull request description is comprehensive and well-structured, covering root cause analysis, solution, test setup, and test cases as required by the template.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[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.