SRVKP-11379: Fix alignment of loading indicators in pipeline overview charts and pipelines metric charts

[adityavshinde]

Description

This PR improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Behaviour ( via Screen Recording )

Before

Loader-fix-Before.mp4

After

Loader-fix-After.mp4

Jira Ticket

SRVKP-11379

Changes Made

• PipelinesAverageDuration.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCard.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChart.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPage.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page.
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

[openshift-ci-robot]

@adityavshinde: This pull request references SRVKP-11379 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Description

This PR improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Jira Ticket

SRVKP-11379

Changes Made

• PipelinesAverageDuration.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCard.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChart.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPage.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page.
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

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.

[anwesha-palit-redhat]

e2e is failing

[anwesha-palit-redhat]

/retest

[anwesha-palit-redhat]

need before after screen recording in the pr description

[openshift-ci-robot]

@adityavshinde: This pull request references SRVKP-11379 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the bug to target the "4.22.0" version, but no target version was set.

Details

In response to this:

Description

This PR improves the UI of the Pipeline Overview page during the data-fetching phase. Previously, the loading spinners in the chart cards were misaligned. This update uses PatternFly 6 flex utilities to properly center the <LoadingInline /> components both vertically and horizontally within their respective chart areas.

Additionally, it prevents the search bar and pipeline/repository toggle controls from rendering prematurely on the list page while the initial data is still loading.

Behaviour ( via Screen Recording )

Before

Loader-fix-Before.mp4

After

Loader-fix-After.mp4

Jira Ticket

SRVKP-11379

Changes Made

• PipelinesAverageDuration.tsx: Added PatternFly flex centering utilities (justify-content-center, align-items-center) to the loading wrapper.
• PipelinesRunsStatusCard.tsx: Conditionally applied centering utilities for both the Donut chart and Line chart loaders to ensure perfect alignment without breaking the loaded chart layouts.
• PipelinerunsNumbersChart.tsx: Centered the loading spinner for the numbers chart area.
• PipelineRunsListPage.tsx: Wrapped the upper controls grid (SearchInputField and ToggleGroup) in a loaded condition so they only appear once the underlying list data is ready.

How to Test

1. Navigate to the Pipeline Overview page.
2. Throttling your network speed in the browser dev tools (e.g., set to "Slow 3G") can help visualize the loading state.
3. Verify that the loading spinners for the Average Duration, PipelineRun Status, and Number of PipelineRuns cards are perfectly centered.
4. Verify that the search input and toggle group at the bottom of the page do not appear until the data has finished loading.

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.

[adityavshinde]

/retest

[anwesha-palit-redhat]

verified that the loaders are aligned correctly for the tekton results pipeline overview page in desktop

Screen.Recording.2026-04-06.at.14.39.01.mov

[anwesha-palit-redhat]

Tested for mobile and the loader is not aligned in the container, please address this

pipelineruncardloadernotaligned.mov

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by: adityavshinde
Once this PR has been reviewed and has the lgtm label, please ask for approval from anwesha-palit-redhat. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• OWNERS

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

[adityavshinde]

Tested for mobile and the loader is not aligned in the container, please address this

pipelineruncardloadernotaligned.mov

Dynamic-height-After-fix.mp4

Thank you @anwesha-palit-redhat .Made changes according to the reviews.

[openshift-ci]

@adityavshinde: The following test failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/e2e	7673809	link	true	/test e2e

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.