Dylan/s3en 2127 loading states for all pages (#57)

* loading for data set * adding loading page for promptset * dataset loading * prompts loading * prompts loading * metrics loading, chart loading * evaluations loading * refactor traces * trace row loading * more loading * Rename loading to skeleton * Minor fix --------- Co-authored-by: Karthik Kalyanaraman <karthik@scale3labs.com>
Scale3-Labs · Apr 13, 2024 · 16a819d · 16a819d
1 parent 86e4437
commit 16a819d
Show file tree

Hide file tree

Showing 33 changed files with 1,631 additions and 1,092 deletions.
diff --git a/app/(protected)/layout.tsx b/app/(protected)/layout.tsx
@@ -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>
+  );
+}
diff --git a/app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx b/app/(protected)/project/[project_id]/datasets/dataset/[dataset_id]/page.tsx
@@ -2,6 +2,7 @@
 
 import { CreateData } from "@/components/project/dataset/create-data";
 import { EditData } from "@/components/project/dataset/edit-data";
+import DatasetRowSkeleton from "@/components/project/dataset/dataset-row-skeleton";
 import { Spinner } from "@/components/shared/spinner";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
@@ -69,7 +70,7 @@ export default function Dataset() {
   });
 
   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 +131,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>
+  );
+}
diff --git a/app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx b/app/(protected)/project/[project_id]/datasets/promptset/[promptset_id]/page.tsx
@@ -5,6 +5,7 @@ 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";
@@ -69,7 +70,7 @@ export default function Promptset() {
   });
 
   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 +122,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">
+        <p className="text-xs">
+          <Skeleton className="w-full h-6" />
+        </p>
+        <p className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </p>
+        <p className="text-xs h-12 overflow-y-scroll">
+          <Skeleton className="w-full h-6" />
+        </p>
+      </div>
+      <Separator orientation="horizontal" />
+    </div>
+  );
+}