Improved loading states

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() {

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 (

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 }