debezium/dbz#1725 fix: Improve loading state management in Platform UI

Signed-off-by: Aravind <gmarav005@gmail.com>

Author: gmarav05

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>

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", () => {

debezium-platform-stage/src/pages/Connection/Connections.tsx

@@ -177,7 +177,6 @@ const Connections: React.FunctionComponent<IConnectionsProps> = () => {
         <>
           {isConnectionsLoading ? (
             <EmptyState
-              titleText={t("Loading...")}
               headingLevel="h4"
               icon={Spinner}
             />

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 () => {

debezium-platform-stage/src/pages/Destination/Destinations.tsx

@@ -128,7 +128,6 @@ const Destinations: React.FunctionComponent = () => {
         <>
           {isDestinationLoading ? (
             <EmptyState
-              titleText={t("loading")}
               headingLevel="h4"
               icon={Spinner}
             />

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 () => {

debezium-platform-stage/src/pages/Pipeline/Pipelines.tsx

@@ -287,7 +287,6 @@ const Pipelines: React.FunctionComponent = () => {
         <>
           {pipelinesLoading ? (
             <EmptyState
-              titleText={t("loading")}
               headingLevel="h4"
               icon={Spinner}
             />

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 () => {

debezium-platform-stage/src/pages/Source/Sources.tsx

@@ -130,7 +130,6 @@ const Sources: React.FunctionComponent<ISourceProps> = () => {
         <>
           {isSourceLoading ? (
             <EmptyState
-              titleText="Loading..."
               headingLevel="h4"
               icon={Spinner}
             />

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 () => {