updates

app/(app)/recap/[machineId]/loading.tsx

@@ -1,13 +1,5 @@
+import { RecapDetailPageSkeleton } from "../RecapPageSkeletons";
+
 export default function LoadingRecapDetail() {
-  return (
-    <div className="p-4 sm:p-6">
-      <div className="h-16 animate-pulse rounded-2xl border border-white/10 bg-black/40" />
-      <div className="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
-        {Array.from({ length: 4 }).map((_, index) => (
-          <div key={index} className="h-24 animate-pulse rounded-2xl border border-white/10 bg-black/30" />
-        ))}
-      </div>
-      <div className="mt-4 h-48 animate-pulse rounded-2xl border border-white/10 bg-black/30" />
-    </div>
-  );
+  return <RecapDetailPageSkeleton />;
 }

app/(app)/recap/[machineId]/page.tsx

@@ -1,9 +1,11 @@
+import { Suspense } from "react";
 import { notFound, redirect } from "next/navigation";
 import { requireSession } from "@/lib/auth/requireSession";
 import { getRecapMachineDetailCached, parseRecapDetailRangeInput } from "@/lib/recap/redesign";
+import { RecapDetailPageSkeleton } from "../RecapPageSkeletons";
 import RecapDetailClient from "./RecapDetailClient";
 
-export default async function RecapMachineDetailPage({
+async function RecapDetailData({
   params,
   searchParams,
 }: {
@@ -33,3 +35,17 @@ export default async function RecapMachineDetailPage({
     />
   );
 }
+
+export default function RecapMachineDetailPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ machineId: string }>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  return (
+    <Suspense fallback={<RecapDetailPageSkeleton />}>
+      <RecapDetailData params={params} searchParams={searchParams} />
+    </Suspense>
+  );
+}