init

ui-v2/src/components/ui/no-connection.tsx

@@ -0,0 +1,15 @@
+import { ServerOff } from "lucide-react";
+
+const NoConnection = () => {
+  return (
+    <div className="flex flex-col items-center h-full gap-4 p-8 text-center justify-center">
+      <ServerOff className="w-12 h-12 text-gray-400" />
+      <h2 className="text-xl font-semibold">Cannot Reach Prefect Server</h2>
+      <p className="text-gray-600">
+        Unable to connect to your Prefect server. Please check your server status and connection settings.
+      </p>
+    </div>
+  );
+};
+
+export default NoConnection;

ui-v2/src/routes/flows/index.tsx

@@ -4,7 +4,7 @@ import { components } from "@/api/prefect"; // Typescript types generated from t
 import { QueryService } from "@/api/service"; // Service object that makes requests to the Prefect API
 
 import FlowsTable from "@/components/flows/data-table";
-
+import NoConnection from "@/components/ui/no-connection";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { zodSearchValidator } from "@tanstack/router-zod-adapter";
 import { z } from "zod";
@@ -65,4 +65,5 @@ export const Route = createFileRoute("/flows/")({
 	loader: async ({ deps: search, context }) =>
 		await context.queryClient.ensureQueryData(flowsQueryParams(search)),
 	wrapInSuspense: true,
+	errorComponent: () => <NoConnection />,
 });