addressing PR comments

ui-v2/src/components/deployments/deployment-details-page.tsx

@@ -1,8 +1,9 @@
 import { buildDeploymentDetailsQuery } from "@/api/deployments";
 import { DeleteConfirmationDialog } from "@/components/ui/delete-confirmation-dialog";
+import { Skeleton } from "@/components/ui/skeleton";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense } from "react";
 
-import { buildListAutomationsRelatedQuery } from "@/api/automations/automations";
 import { DeploymentActionMenu } from "./deployment-action-menu";
 import { DeploymentDetailsHeader } from "./deployment-details-header";
 import { DeploymentDetailsTabs } from "./deployment-details-tabs";
@@ -22,9 +23,6 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 		buildDeploymentDetailsQuery(id),
 	);
 
-	const { data: automations } = useSuspenseQuery(
-		buildListAutomationsRelatedQuery(`prefect.deployment.${id}`),
-	);
 	const [deleteConfirmationDialogState, confirmDelete] =
 		useDeleteDeploymentConfirmationDialog();
 
@@ -34,7 +32,9 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 				<div className="flex align-middle justify-between">
 					<div className="flex flex-col gap-2">
 						<DeploymentDetailsHeader deployment={deployment} />
-						<DeploymentFlowLink flowId={deployment.flow_id} />
+						<Suspense fallback={<LoadingSkeleton numSkeletons={1} />}>
+							<DeploymentFlowLink flowId={deployment.flow_id} />
+						</Suspense>
 					</div>
 					<div className="flex align-middle gap-2">
 						<RunFlowButton deployment={deployment} />
@@ -52,10 +52,11 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 					</div>
 					<div className="flex flex-col gap-3">
 						<DeploymentSchedules deployment={deployment} />
-						<DeploymentTriggers
-							automations={automations}
-							deployment={deployment}
-						/>
+
+						<Suspense fallback={<LoadingSkeleton numSkeletons={2} />}>
+							<DeploymentTriggers deployment={deployment} />
+						</Suspense>
+
 						<hr />
 						<DeploymentMetadata deployment={deployment} />
 					</div>
@@ -65,3 +66,16 @@ export const DeploymentDetailsPage = ({ id }: DeploymentDetailsPageProps) => {
 		</>
 	);
 };
+
+type LoadingSkeletonProps = {
+	numSkeletons?: number;
+};
+const LoadingSkeleton = ({ numSkeletons = 1 }: LoadingSkeletonProps) => (
+	<ul className="flex flex-col gap-1">
+		{Array.from({ length: numSkeletons }).map((_, i) => (
+			<li key={i}>
+				<Skeleton className="h-4 w-full" />
+			</li>
+		))}
+	</ul>
+);

ui-v2/src/components/deployments/deployment-flow-link.tsx

@@ -1,25 +1,25 @@
 import { buildFLowDetailsQuery } from "@/api/flows";
 import { Icon } from "@/components/ui/icons";
-import { useQuery } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
 type DeploymentFlowLinkProps = {
 	flowId: string;
 };
 
 export const DeploymentFlowLink = ({ flowId }: DeploymentFlowLinkProps) => {
-	const { data } = useQuery(buildFLowDetailsQuery(flowId));
+	const { data: flow } = useSuspenseQuery(buildFLowDetailsQuery(flowId));
 
 	return (
 		<div className="flex items-center gap-1 text-sm">
 			Flow
 			<Link
 				to="/flows/flow/$id"
-				params={{ id: flowId }}
+				params={{ id: flow.id }}
 				className="flex items-center gap-1"
 			>
 				<Icon id="Workflow" className="h-4 w-4" />
-				{data?.name}
+				{flow.name}
 			</Link>
 		</div>
 	);

ui-v2/src/components/deployments/deployment-triggers.tsx

@@ -1,18 +1,20 @@
 import type { Automation } from "@/api/automations";
+import { buildListAutomationsRelatedQuery } from "@/api/automations/automations";
 import type { Deployment } from "@/api/deployments";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icons";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 
 type DeploymentTriggersProps = {
-	automations: Array<Automation>;
 	deployment: Deployment;
 };
 
-export const DeploymentTriggers = ({
-	automations,
-	deployment,
-}: DeploymentTriggersProps) => {
+export const DeploymentTriggers = ({ deployment }: DeploymentTriggersProps) => {
+	const { data: automations } = useSuspenseQuery(
+		buildListAutomationsRelatedQuery(`prefect.deployment.${deployment.id}`),
+	);
+
 	return (
 		<div className="flex flex-col gap-1">
 			<div className="text-sm text-muted-foreground">Triggers</div>

ui-v2/src/routes/deployments/deployment.$id.tsx

@@ -1,5 +1,6 @@
 import { buildListAutomationsRelatedQuery } from "@/api/automations/automations";
 import { buildDeploymentDetailsQuery } from "@/api/deployments";
+import { buildFLowDetailsQuery } from "@/api/flows";
 import { DeploymentDetailsPage } from "@/components/deployments/deployment-details-page";
 import { createFileRoute } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
@@ -20,15 +21,18 @@ export type DeploymentDetailsTabOptions = z.infer<typeof searchParams>["tab"];
 export const Route = createFileRoute("/deployments/deployment/$id")({
 	validateSearch: zodValidator(searchParams),
 	component: RouteComponent,
-	loader: ({ context, params }) =>
-		Promise.all([
-			context.queryClient.ensureQueryData(
-				buildDeploymentDetailsQuery(params.id),
-			),
-			context.queryClient.ensureQueryData(
-				buildListAutomationsRelatedQuery(`prefect.deployment.${params.id}`),
-			),
-		]),
+	loader: async ({ params, context: { queryClient } }) => {
+		// ----- Critical data
+		const res = await queryClient.ensureQueryData(
+			buildDeploymentDetailsQuery(params.id),
+		);
+
+		// ----- Deferred data
+		void queryClient.prefetchQuery(
+			buildListAutomationsRelatedQuery(`prefect.deployment.${params.id}`),
+		);
+		void queryClient.prefetchQuery(buildFLowDetailsQuery(res.flow_id));
+	},
 	wrapInSuspense: true,
 });