From c697c48a825b137894084b4654508d0292acb375 Mon Sep 17 00:00:00 2001
From: Aravind <gmarav005@gmail.com>
Date: Thu, 30 Apr 2026 00:46:27 +0530
Subject: [PATCH] debezium/dbz#1725 fix: Improve loading state management in
 Platform UI

Signed-off-by: Aravind <gmarav005@gmail.com>
---
 debezium-platform-stage/src/main.tsx                   | 10 ++++++++--
 .../src/pages/Connection/Connections.test.tsx          |  2 +-
 .../src/pages/Connection/Connections.tsx               |  6 +++---
 .../src/pages/Destination/Destinations.test.tsx        |  2 +-
 .../src/pages/Destination/Destinations.tsx             | 10 +++++-----
 .../src/pages/Pipeline/Pipelines.test.tsx              |  2 +-
 .../src/pages/Pipeline/Pipelines.tsx                   |  6 +++---
 .../src/pages/Source/Sources.test.tsx                  |  2 +-
 debezium-platform-stage/src/pages/Source/Sources.tsx   |  6 +++---
 .../src/pages/Transforms/Transforms.test.tsx           |  2 +-
 .../src/pages/Transforms/Transforms.tsx                |  6 +++---
 11 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/debezium-platform-stage/src/main.tsx b/debezium-platform-stage/src/main.tsx
index 28ab5df0..c7754295 100644
--- a/debezium-platform-stage/src/main.tsx
+++ b/debezium-platform-stage/src/main.tsx
@@ -8,11 +8,17 @@ import { StrictMode, Suspense } from 'react';
 import './i18n';
 
 // Create a client 
-const queryClient = new QueryClient();
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 3,
+    },
+  },
+});
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <QueryClientProvider client={queryClient}>
-    <Suspense fallback="loading">
+    <Suspense fallback={null}>
       <StrictMode>
         <App />
       </StrictMode>
diff --git a/debezium-platform-stage/src/pages/Connection/Connections.test.tsx b/debezium-platform-stage/src/pages/Connection/Connections.test.tsx
index 3fb6b27a..17e97f04 100644
--- a/debezium-platform-stage/src/pages/Connection/Connections.test.tsx
+++ b/debezium-platform-stage/src/pages/Connection/Connections.test.tsx
@@ -81,7 +81,7 @@ describe("Connections", () => {
       return { data: undefined, error: null, isLoading: false } as any;
     });
     render(<Connections />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("shows API error when connections query fails", () => {
diff --git a/debezium-platform-stage/src/pages/Connection/Connections.tsx b/debezium-platform-stage/src/pages/Connection/Connections.tsx
index d7c0cffd..a966a979 100644
--- a/debezium-platform-stage/src/pages/Connection/Connections.tsx
+++ b/debezium-platform-stage/src/pages/Connection/Connections.tsx
@@ -75,6 +75,7 @@ const Connections: React.FunctionComponent<IConnectionsProps> = () => {
     data: connectionsList = [],
     error,
     isLoading: isConnectionsLoading,
+    failureCount: connectionsFailureCount,
   } = useQuery<Connection[], Error>(
     "connections",
     () => fetchData<Connection[]>(`${API_URL}/api/connections`),
@@ -155,10 +156,10 @@ const Connections: React.FunctionComponent<IConnectionsProps> = () => {
   return (
     <div data-tour="connection-page" style={{ flex: 1, display: "flex", flexDirection: "column" }}>
 
-      {error ? (
+      {(!!error || connectionsFailureCount >= 3) ? (
         <ApiError
           errorType="large"
-          errorMsg={error.message}
+          errorMsg={error?.message ?? "Network error"}
           secondaryActions={
             <>
               <Button variant="link" onClick={() => navigateTo("/pipeline")}>
@@ -177,7 +178,6 @@ const Connections: React.FunctionComponent<IConnectionsProps> = () => {
         <>
           {isConnectionsLoading ? (
             <EmptyState
-              titleText={t("Loading...")}
               headingLevel="h4"
               icon={Spinner}
             />
diff --git a/debezium-platform-stage/src/pages/Destination/Destinations.test.tsx b/debezium-platform-stage/src/pages/Destination/Destinations.test.tsx
index 7ffe7e21..f400b9a3 100644
--- a/debezium-platform-stage/src/pages/Destination/Destinations.test.tsx
+++ b/debezium-platform-stage/src/pages/Destination/Destinations.test.tsx
@@ -72,7 +72,7 @@ describe("Destinations", () => {
       isLoading: true,
     } as any);
     render(<Destinations />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("displays error message when API fails", async () => {
diff --git a/debezium-platform-stage/src/pages/Destination/Destinations.tsx b/debezium-platform-stage/src/pages/Destination/Destinations.tsx
index c1fb63bb..84aed696 100644
--- a/debezium-platform-stage/src/pages/Destination/Destinations.tsx
+++ b/debezium-platform-stage/src/pages/Destination/Destinations.tsx
@@ -63,6 +63,7 @@ const Destinations: React.FunctionComponent = () => {
     data: destinationsList = [],
     error,
     isLoading: isDestinationLoading,
+    failureCount: destinationsFailureCount,
   } = useQuery<Destination[], Error>(
     "destinations",
     () => fetchData<Destination[]>(`${API_URL}/api/destinations`),
@@ -109,10 +110,10 @@ const Destinations: React.FunctionComponent = () => {
 
   return (
     <div data-tour="destination-page" style={{ flex: 1, display: "flex", flexDirection: "column" }}>
-      {error ? (
+      {(!!error || destinationsFailureCount >= 3) ? (
         <ApiError
           errorType="large"
-          errorMsg={error.message}
+          errorMsg={error?.message ?? "Network error"}
           secondaryActions={
             <>
               <Button variant="link" onClick={() => navigateTo("/source")}>
@@ -128,7 +129,6 @@ const Destinations: React.FunctionComponent = () => {
         <>
           {isDestinationLoading ? (
             <EmptyState
-              titleText={t("loading")}
               headingLevel="h4"
               icon={Spinner}
             />
@@ -184,8 +184,8 @@ const Destinations: React.FunctionComponent = () => {
                         </ToolbarContent>
                       </Toolbar>
                       <div data-tour="destination-table">
-                      <SourceSinkTable
-                        data={searchResult}
+                        <SourceSinkTable
+                          data={searchResult}
                           tableType="destination"
                           onClear={onClear}
                         />
diff --git a/debezium-platform-stage/src/pages/Pipeline/Pipelines.test.tsx b/debezium-platform-stage/src/pages/Pipeline/Pipelines.test.tsx
index e98875d9..d671cc85 100644
--- a/debezium-platform-stage/src/pages/Pipeline/Pipelines.test.tsx
+++ b/debezium-platform-stage/src/pages/Pipeline/Pipelines.test.tsx
@@ -69,7 +69,7 @@ describe("Pipelines", () => {
 
     render(<Pipelines />);
 
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("filters pipelines based on search input", async () => {
diff --git a/debezium-platform-stage/src/pages/Pipeline/Pipelines.tsx b/debezium-platform-stage/src/pages/Pipeline/Pipelines.tsx
index 30f97cd8..761ea70e 100644
--- a/debezium-platform-stage/src/pages/Pipeline/Pipelines.tsx
+++ b/debezium-platform-stage/src/pages/Pipeline/Pipelines.tsx
@@ -91,6 +91,7 @@ const Pipelines: React.FunctionComponent = () => {
     data: pipelinesList = [],
     error: pipelinesError,
     isLoading: pipelinesLoading,
+    failureCount: pipelinesFailureCount,
   } = useQuery<Pipeline[], Error>(
     "pipelines",
     () => fetchData<Pipeline[]>(`${API_URL}/api/pipelines`),
@@ -263,11 +264,11 @@ const Pipelines: React.FunctionComponent = () => {
 
   return (
     <>
-      {pipelinesError ? (
+      {(!!pipelinesError || pipelinesFailureCount >= 3) ? (
         <PageSection isWidthLimited>
           <ApiError
             errorType="large"
-            errorMsg={pipelinesError.message}
+            errorMsg={pipelinesError?.message ?? "Network error"}
             secondaryActions={
               <>
                 <Button variant="link" onClick={() => navigateTo("/source")}>
@@ -287,7 +288,6 @@ const Pipelines: React.FunctionComponent = () => {
         <>
           {pipelinesLoading ? (
             <EmptyState
-              titleText={t("loading")}
               headingLevel="h4"
               icon={Spinner}
             />
diff --git a/debezium-platform-stage/src/pages/Source/Sources.test.tsx b/debezium-platform-stage/src/pages/Source/Sources.test.tsx
index b8b2a44f..9a069311 100644
--- a/debezium-platform-stage/src/pages/Source/Sources.test.tsx
+++ b/debezium-platform-stage/src/pages/Source/Sources.test.tsx
@@ -70,7 +70,7 @@ describe("Sources", () => {
       isLoading: true,
     } as any);
     render(<Sources />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("displays error message when API fails", async () => {
diff --git a/debezium-platform-stage/src/pages/Source/Sources.tsx b/debezium-platform-stage/src/pages/Source/Sources.tsx
index 91d2123d..23a8bf71 100644
--- a/debezium-platform-stage/src/pages/Source/Sources.tsx
+++ b/debezium-platform-stage/src/pages/Source/Sources.tsx
@@ -68,6 +68,7 @@ const Sources: React.FunctionComponent<ISourceProps> = () => {
     data: sourcesList = [],
     error,
     isLoading: isSourceLoading,
+    failureCount: sourcesFailureCount,
   } = useQuery<Source[], Error>(
     "sources",
     () => fetchData<Source[]>(`${API_URL}/api/sources`),
@@ -111,10 +112,10 @@ const Sources: React.FunctionComponent<ISourceProps> = () => {
   );
   return (
     <div data-tour="source-page" style={{ flex: 1, display: "flex", flexDirection: "column" }}>
-      {error ? (
+      {(!!error || sourcesFailureCount >= 3) ? (
         <ApiError
           errorType="large"
-          errorMsg={error.message}
+          errorMsg={error?.message ?? "Network error"}
           secondaryActions={
             <>
               <Button variant="link" onClick={() => navigateTo("/destination")}>
@@ -130,7 +131,6 @@ const Sources: React.FunctionComponent<ISourceProps> = () => {
         <>
           {isSourceLoading ? (
             <EmptyState
-              titleText="Loading..."
               headingLevel="h4"
               icon={Spinner}
             />
diff --git a/debezium-platform-stage/src/pages/Transforms/Transforms.test.tsx b/debezium-platform-stage/src/pages/Transforms/Transforms.test.tsx
index aa7fc78d..5eac8cd7 100644
--- a/debezium-platform-stage/src/pages/Transforms/Transforms.test.tsx
+++ b/debezium-platform-stage/src/pages/Transforms/Transforms.test.tsx
@@ -70,7 +70,7 @@ describe("Transforms", () => {
       isLoading: true,
     } as any);
     render(<Transforms />);
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(screen.getByRole("progressbar")).toBeInTheDocument();
   });
 
   it("displays error message when API fails", async () => {
diff --git a/debezium-platform-stage/src/pages/Transforms/Transforms.tsx b/debezium-platform-stage/src/pages/Transforms/Transforms.tsx
index ca45499c..20807828 100644
--- a/debezium-platform-stage/src/pages/Transforms/Transforms.tsx
+++ b/debezium-platform-stage/src/pages/Transforms/Transforms.tsx
@@ -97,6 +97,7 @@ const Transforms: React.FunctionComponent<ITransformsProps> = () => {
     data: transformsList = [],
     error,
     isLoading: isTransformsLoading,
+    failureCount: transformsFailureCount,
   } = useQuery<TransformData[], Error>(
     "transforms",
     () => fetchData<TransformData[]>(`${API_URL}/api/transforms`),
@@ -192,11 +193,11 @@ const Transforms: React.FunctionComponent<ITransformsProps> = () => {
   return (
     <div data-tour="transform-page" style={{ flex: 1, display: "flex", flexDirection: "column" }}>
       <>
-        {error ? (
+        {(!!error || transformsFailureCount >= 3) ? (
           <PageSection isWidthLimited>
             <ApiError
               errorType="large"
-              errorMsg={error.message}
+              errorMsg={error?.message ?? "Network error"}
               secondaryActions={
                 <>
                   <Button variant="link" onClick={() => navigateTo("/source")}>
@@ -216,7 +217,6 @@ const Transforms: React.FunctionComponent<ITransformsProps> = () => {
           <>
             {isTransformsLoading ? (
               <EmptyState
-                titleText={t("loading")}
                 headingLevel="h4"
                 icon={Spinner}
               />