From 2c0d401952793a72332ee3e2533cd841b748da9e Mon Sep 17 00:00:00 2001
From: Keith Chong <kykchong@redhat.com>
Date: Tue, 7 Jul 2026 08:23:19 -0400
Subject: [PATCH] Error displayed while fetching rollout revisions details
 (#10132)

Signed-off-by: Keith Chong <kykchong@redhat.com>
---
 .../rollout/RolloutRevisionsTab.tsx           |  6 ++++-
 src/gitops/topology/console/pod-traffic.tsx   | 21 +----------------
 .../components/LoadingSpinner/Loading.tsx     | 23 +++++++++++++++++++
 3 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 src/gitops/utils/components/LoadingSpinner/Loading.tsx

diff --git a/src/gitops/components/rollout/RolloutRevisionsTab.tsx b/src/gitops/components/rollout/RolloutRevisionsTab.tsx
index b4eb6bcb8..84e65f098 100644
--- a/src/gitops/components/rollout/RolloutRevisionsTab.tsx
+++ b/src/gitops/components/rollout/RolloutRevisionsTab.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { PodKind } from '@gitops/topology/console/types';
+import { Loading } from '@gitops/utils/components/LoadingSpinner/Loading';
 import { useGitOpsTranslation } from '@gitops/utils/hooks/useGitOpsTranslation';
 import { resourceAsArray } from '@gitops/utils/utils';
 import { K8sResourceCommon, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
@@ -54,7 +55,8 @@ const RolloutRevisionsTab: React.FC<RolloutRevisionsTabProps> = ({ obj: rollout
         {t('Rollout Revisions')}
       </Title>
 
-      {loadError || !loaded || !podsloaded || podsloadError ? (
+      {/* eslint-disable-next-line no-nested-ternary */}
+      {loadError || podsloadError ? (
         <div>
           <Flex
             justifyContent={{ default: 'justifyContentSpaceEvenly' }}
@@ -63,6 +65,8 @@ const RolloutRevisionsTab: React.FC<RolloutRevisionsTabProps> = ({ obj: rollout
             <FlexItem fullWidth={{ default: 'fullWidth' }}>{error}</FlexItem>
           </Flex>
         </div>
+      ) : !loaded || !podsloaded ? (
+        <Loading />
       ) : (
         <Revisions
           rollout={rollout}
diff --git a/src/gitops/topology/console/pod-traffic.tsx b/src/gitops/topology/console/pod-traffic.tsx
index 7a4f68ec7..6eeffa8e4 100644
--- a/src/gitops/topology/console/pod-traffic.tsx
+++ b/src/gitops/topology/console/pod-traffic.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import classNames from 'classnames';
 
+import { LoadingInline } from '@gitops/utils/components/LoadingSpinner/Loading';
 import {
   K8sKind,
   StatusComponent,
   useK8sWatchResource,
 } from '@openshift-console/dynamic-plugin-sdk';
 import { Tooltip } from '@patternfly/react-core';
-import { Spinner } from '@patternfly/react-core';
 import { ConnectedIcon, DisconnectedIcon } from '@patternfly/react-icons';
 
 import { EndpointSliceKind } from './types';
@@ -25,24 +24,6 @@ const EndPointSliceModel: K8sKind = {
   namespaced: true,
   plural: 'endpointslices',
 };
-export const LoadingInline: React.FunctionComponent = () => <Loading isInline />;
-LoadingInline.displayName = 'LoadingInline';
-
-export const Loading: React.FunctionComponent<LoadingProps> = ({ className, isInline }) => (
-  <div
-    className={classNames('co-m-loader', { 'co-m-loader--inline': isInline }, className)}
-    data-test="loading-indicator"
-  >
-    <Spinner aria-live="polite" aria-busy="true" isInline={isInline} size="lg" />
-  </div>
-);
-
-Loading.displayName = 'Loading';
-
-type LoadingProps = {
-  className?: string;
-  isInline?: boolean;
-};
 
 export type PodTrafficProp = {
   podName: string;
diff --git a/src/gitops/utils/components/LoadingSpinner/Loading.tsx b/src/gitops/utils/components/LoadingSpinner/Loading.tsx
new file mode 100644
index 000000000..cf7d540a2
--- /dev/null
+++ b/src/gitops/utils/components/LoadingSpinner/Loading.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { Spinner } from '@patternfly/react-core';
+
+export const Loading: React.FunctionComponent<LoadingProps> = ({ className, isInline }) => (
+  <div
+    className={classNames('co-m-loader', { 'co-m-loader--inline': isInline }, className)}
+    data-test="loading-indicator"
+  >
+    <Spinner aria-live="polite" aria-busy="true" isInline={isInline} size="lg" />
+  </div>
+);
+
+export const LoadingInline: React.FunctionComponent = () => <Loading isInline />;
+LoadingInline.displayName = 'LoadingInline';
+
+Loading.displayName = 'Loading';
+
+type LoadingProps = {
+  className?: string;
+  isInline?: boolean;
+};