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

@@ -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,7 +156,7 @@ 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}
@@ -177,7 +178,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

@@ -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,7 +110,7 @@ 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}
@@ -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}
                         />

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

@@ -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,7 +264,7 @@ const Pipelines: React.FunctionComponent = () => {
 
   return (
     <>
-      {pipelinesError ? (
+      {(!!pipelinesError || pipelinesFailureCount >= 3) ? (
         <PageSection isWidthLimited>
           <ApiError
             errorType="large"
@@ -287,7 +288,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

@@ -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,7 +112,7 @@ 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}
@@ -130,7 +131,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 () => {