Scale3-Labs
diff --git a/‎app/(protected)/layout.tsx‎
Lines changed: 28 additions & 1 deletion b/‎app/(protected)/layout.tsx‎
Lines changed: 28 additions & 1 deletion
diff --git a/‎app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx‎
Lines changed: 42 additions & 1 deletion b/‎app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx‎
Lines changed: 42 additions & 1 deletion
diff --git a/‎app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx‎
Lines changed: 61 additions & 1 deletion b/‎app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx‎
Lines changed: 61 additions & 1 deletion
@@ -1,9 +1,11 @@
 import { Header } from "@/components/shared/header";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { authOptions } from "@/lib/auth/options";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
+import { PageSkeleton } from "./projects/page-client";
 
 export default async function Layout({
   children,
@@ -16,7 +18,7 @@ export default async function Layout({
   }
 
   return (
-    <Suspense fallback={<div>Loading...</div>}>
+    <Suspense fallback={<PageLoading />}>
       <main className="min-h-screen w-full">
         <Header email={session?.user?.email as string} />
         <Separator />
@@ -25,3 +27,28 @@ export default async function Layout({
     </Suspense>
   );
 }
+
+function PageLoading() {
+  return (
+    <main className="min-h-screen w-full">
+      <header className="flex flex-col gap-2 w-full px-12 z-30 sticky top-0 bg-primary-foreground">
+        <div className="flex justify-between items-center w-full pt-3">
+          <div className="text-xl font-bold flex items-center gap-0">
+            Langtrace AI
+          </div>
+          <div className="flex items-end gap-3">
+            <Skeleton className="w-20 h-16" />
+            <div className="flex flex-col mr-4">
+              <p className="text-sm text-muted-foreground">
+                <Skeleton className="w-20 h-16" />
+              </p>
+            </div>
+            <Skeleton className="w-20 h-16" />
+          </div>
+        </div>
+        <Skeleton className="w-full h-0.5" />
+      </header>
+      <PageSkeleton />
+    </main>
+  );
+}
@@ -1,6 +1,7 @@
 "use client";
 
 import { CreateData } from "@/components/project/dataset/create-data";
+import DatasetRowSkeleton from "@/components/project/dataset/dataset-row-skeleton";
 import { EditData } from "@/components/project/dataset/edit-data";
 import { Spinner } from "@/components/shared/spinner";
 import { Button } from "@/components/ui/button";
@@ -12,6 +13,7 @@ import { useParams } from "next/navigation";
 import { useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
+import { toast } from "sonner";
 
 export default function Dataset() {
   const dataset_id = useParams()?.dataset_id as string;
@@ -36,6 +38,10 @@ export default function Dataset() {
       const response = await fetch(
         `/api/dataset?dataset_id=${dataset_id}&page=${page}&pageSize=${PAGE_SIZE}`
       );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch dataset");
+      }
       const result = await response.json();
       return result;
     },
@@ -66,10 +72,16 @@ export default function Dataset() {
       }
       setShowLoader(false);
     },
+    onError: (error) => {
+      setShowLoader(false);
+      toast.error("Failed to fetch dataset", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
   });
 
   if (fetchDataset.isLoading || !fetchDataset.data || !currentData) {
-    return <div>Loading...</div>;
+    return <PageSkeleton />;
   } else {
     return (
       <div className="w-full py-6 px-6 flex flex-col gap-4">
@@ -130,3 +142,32 @@ export default function Dataset() {
     );
   }
 }
+
+function PageSkeleton() {
+  return (
+    <div className="w-full py-6 px-6 flex flex-col gap-4">
+      <div className="flex gap-4 items-center w-fit">
+        <Button
+          disabled={true}
+          variant="secondary"
+          onClick={() => window.history.back()}
+        >
+          <ChevronLeft className="mr-1" />
+          Back
+        </Button>
+        <CreateData disabled={true} />
+      </div>
+      <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen overflow-y-scroll">
+        <div className="grid grid-cols-5 items-center justify-stretch gap-3 py-3 px-4 bg-muted">
+          <p className="text-xs font-medium">Created at</p>
+          <p className="text-xs font-medium">Input</p>
+          <p className="text-xs font-medium">Output</p>
+          <p className="text-xs font-medium text-end">Note</p>
+        </div>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <DatasetRowSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -5,13 +5,15 @@ import { EditPrompt } from "@/components/project/dataset/edit-data";
 import { Spinner } from "@/components/shared/spinner";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { PAGE_SIZE } from "@/lib/constants";
 import { Prompt } from "@prisma/client";
 import { ChevronLeft } from "lucide-react";
 import { useParams } from "next/navigation";
 import { useState } from "react";
 import { useBottomScrollListener } from "react-bottom-scroll-listener";
 import { useQuery } from "react-query";
+import { toast } from "sonner";
 
 export default function Promptset() {
   const promptset_id = useParams()?.promptset_id as string;
@@ -36,6 +38,10 @@ export default function Promptset() {
       const response = await fetch(
         `/api/promptset?promptset_id=${promptset_id}&page=${page}&pageSize=${PAGE_SIZE}`
       );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error?.message || "Failed to fetch promptset");
+      }
       const result = await response.json();
       return result;
     },
@@ -66,10 +72,16 @@ export default function Promptset() {
       }
       setShowLoader(false);
     },
+    onError: (error) => {
+      setShowLoader(false);
+      toast.error("Failed to fetch promptset", {
+        description: error instanceof Error ? error.message : String(error),
+      });
+    },
   });
 
   if (fetchPromptset.isLoading || !fetchPromptset.data || !currentData) {
-    return <div>Loading...</div>;
+    return <PageSkeleton />;
   } else {
     return (
       <div className="w-full py-6 px-6 flex flex-col gap-4">
@@ -121,3 +133,51 @@ export default function Promptset() {
     );
   }
 }
+
+function PageSkeleton() {
+  return (
+    <div className="w-full py-6 px-6 flex flex-col gap-4">
+      <div className="flex gap-4 items-center w-fit">
+        <Button
+          disabled={true}
+          variant="secondary"
+          onClick={() => window.history.back()}
+        >
+          <ChevronLeft className="mr-1" />
+          Back
+        </Button>
+        <CreatePrompt disabled={true} />
+      </div>
+      <div className="flex flex-col gap-3 rounded-md border border-muted max-h-screen overflow-y-scroll">
+        <div className="grid grid-cols-4 items-center justify-stretch gap-3 py-3 px-4 bg-muted">
+          <p className="text-xs font-medium">Created at</p>
+          <p className="text-xs font-medium">Value</p>
+          <p className="text-xs font-medium text-left">Note</p>
+          <p className="text-xs font-medium text-end"></p>
+        </div>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <PromptsetRowSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function PromptsetRowSkeleton() {
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-5 items-start justify-stretch gap-3 py-3 px-4">
+        <div className="text-xs">
+          <Skeleton className="w-full h-6" />
+        </div>
+        <div className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </div>
+        <div className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </div>
+      </div>
+      <Separator orientation="horizontal" />
+    </div>
+  );
+}