From 2317f8527a550b600677e50e071bf522ccd7816e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6ssner?= <jakob.roessner@outlook.de>
Date: Thu, 17 Oct 2024 19:40:55 +1100
Subject: [PATCH] Improved loading states

---
 app/play/[level]/page.tsx  | 26 +++++++++++++++++++++++++-
 app/play/page.tsx          | 13 ++++++++++++-
 components/ui/skeleton.tsx | 15 +++++++++++++++
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/skeleton.tsx

diff --git a/app/play/[level]/page.tsx b/app/play/[level]/page.tsx
index 4e6860c..3d6b2a2 100644
--- a/app/play/[level]/page.tsx
+++ b/app/play/[level]/page.tsx
@@ -41,7 +41,31 @@ export default function PlayLevelPage({
   const [showOriginalMap, setShowOriginalMap] = useState(true);
 
   if (!map) {
-    return <div>Loading...</div>;
+    return (
+      <div className="container mx-auto min-h-screen flex flex-col items-center py-12 pb-24 gap-8">
+        <div className="w-full flex justify-between items-center">
+          <Button variant="outline" asChild className="flex gap-2 items-center">
+            <Link href="/play" passHref>
+              <ChevronLeftIcon /> Play Different Night
+            </Link>
+          </Button>
+          {flags?.showTestPage && (
+            <Tabs
+              value={mode}
+              onValueChange={(value) => setMode(value as "play" | "test")}
+            >
+              <TabsList>
+                <TabsTrigger value="play">Play</TabsTrigger>
+                <TabsTrigger value="test">Test AI</TabsTrigger>
+              </TabsList>
+            </Tabs>
+          )}
+        </div>
+        <h1 className="text-3xl font-bold text-center">Night #{level}</h1>
+
+        <p>Loading...</p>
+      </div>
+    );
   }
 
   function handleRetryClicked() {
diff --git a/app/play/page.tsx b/app/play/page.tsx
index 2b2e21e..dcc04fa 100644
--- a/app/play/page.tsx
+++ b/app/play/page.tsx
@@ -12,12 +12,23 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
 
 export default function PlayPage() {
   const maps = useQuery(api.maps.getMaps);
 
   if (!maps) {
-    return <div>Loading...</div>;
+    return (
+      <div className="container mx-auto min-h-screen py-12 pb-24 gap-8">
+        <h1 className="text-3xl font-bold mb-6 text-center">Choose a Night</h1>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <Skeleton key={index} className="h-96" />
+          ))}
+        </div>
+      </div>
+    );
   }
 
   return (
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..d7e45f7
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }