v0.18.0

web/app/(dashboard)/dashboard/projects/[slug]/[env]/services/[serviceId]/rollouts/[rolloutId]/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export default function Loading() {
+	return (
+		<div className="space-y-6">
+			<div className="flex items-center gap-4">
+				<Skeleton className="size-8 rounded-md" />
+				<div className="flex-1 min-w-0">
+					<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+						<Skeleton className="h-8 w-28 rounded-md" />
+						<Skeleton className="h-5 w-28" />
+						<Skeleton className="h-5 w-36" />
+						<Skeleton className="h-5 w-24" />
+					</div>
+				</div>
+			</div>
+
+			<div className="space-y-2">
+				<Skeleton className="h-5 w-24" />
+				<Skeleton className="h-[480px] rounded-lg" />
+			</div>
+		</div>
+	);
+}

web/components/service/details/rollout-history.tsx

@@ -17,7 +17,7 @@ import {
 	ItemGroup,
 	ItemTitle,
 } from "@/components/ui/item";
-import { Spinner } from "@/components/ui/spinner";
+import { Skeleton } from "@/components/ui/skeleton";
 import type { RolloutStatus } from "@/db/types";
 import { formatRelativeTime } from "@/lib/date";
 import { fetcher } from "@/lib/fetcher";
@@ -108,6 +108,32 @@ function formatDuration(start: string, end: string | null): string {
 	return `${seconds}s`;
 }
 
+function RolloutHistorySkeleton({ actions }: { actions?: React.ReactNode }) {
+	return (
+		<div className="space-y-4 max-w-5xl mx-auto">
+			<div className="flex items-center justify-between gap-4">
+				<Skeleton className="h-7 w-36" />
+				{actions ? <div className="shrink-0">{actions}</div> : null}
+			</div>
+
+			<div className="grid gap-2">
+				{[1, 2, 3].map((item) => (
+					<div
+						key={item}
+						className="flex items-center gap-3 rounded-lg border p-4"
+					>
+						<Skeleton className="h-7 w-28 rounded-md" />
+						<div className="min-w-0 flex-1 space-y-2">
+							<Skeleton className="h-4 w-48 max-w-full" />
+							<Skeleton className="h-3 w-64 max-w-full" />
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
 export function RolloutHistory({
 	serviceId,
 	projectSlug,
@@ -140,11 +166,7 @@ export function RolloutHistory({
 	const rollouts = data?.rollouts || [];
 
 	if (isLoading) {
-		return (
-			<div className="flex items-center justify-center py-12">
-				<Spinner className="size-6" />
-			</div>
-		);
+		return <RolloutHistorySkeleton actions={actions} />;
 	}
 
 	return (

web/components/service/service-layout-client.tsx

@@ -151,7 +151,9 @@ export function ServiceLayoutClient({
 
 	const isActiveTab = (href: string) => {
 		if (href === basePath) {
-			return pathname === basePath;
+			return (
+				pathname === basePath || pathname.startsWith(`${basePath}/rollouts`)
+			);
 		}
 		return pathname.startsWith(href);
 	};