feat: loading skeletons

src/app/dashboard/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import BotFormSkeleton from "@/components/app/BotFormSkeleton/BotFormSkeleton";
+
+export default function Loading() {
+    return <BotFormSkeleton />
+}

src/app/dashboard/loading.tsx

@@ -0,0 +1,11 @@
+import UserCardSkeleton from "@/components/app/UserCardSkeleton/UserCardSkeleton";
+
+export default function Loading() {
+    return (
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 p-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+                <UserCardSkeleton key={i} />
+            ))}
+        </div>
+    )
+}

src/components/app/BotFormSkeleton/BotFormSkeleton.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function BotFormSkeleton() {
+  return (
+    <form>
+      <div className="flex flex-col items-center justify-center">
+        <div className="grid grid-cols-2 p-2 gap-4 sm:p-4 sm:w-[50%] w-full">
+          <div>
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-10 w-full mt-2" />
+          </div>
+          <div>
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-10 w-full mt-2" />
+          </div>
+          <div>
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-10 w-full mt-2" />
+          </div>
+          <div>
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-10 w-full mt-2" />
+          </div>
+          <div className="col-span-2">
+            <Skeleton className="h-6 w-full" />
+            <Skeleton className="h-10 w-full mt-2" />
+          </div>
+        </div>
+        <div className="flex items-center justify-center p-2 gap-2">
+          <Skeleton className="h-10 w-48" />
+          <Skeleton className="h-10 w-20 ml-4" />
+        </div>
+      </div>
+      <div className="flex items-center justify-center p-2">
+        <Skeleton className="h-24 w-[400px]" />
+      </div>
+    </form>
+  );
+}

src/components/app/UserCard/UserCard.tsx

@@ -1,7 +1,5 @@
 import { Avatar, AvatarImage } from "@/components/ui/avatar"
 import { Button } from "@/components/ui/button"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
 import type { Bot } from "@prisma/client"
 import Link from "next/link"
 import VerifiedSwitch from "../VerifiedSwitch/VerifiedSwitch"

src/components/app/UserCardSkeleton/UserCardSkeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function UserCardSkeleton() {
+  return (
+    <div className="rounded-lg border bg-card text-card-foreground shadow-sm p-4">
+      <div className="flex items-center justify-center space-x-4">
+        <Skeleton className="w-14 h-14 rounded-full" />
+        <Skeleton className="flex-grow text-center font-extrabold text-2xl h-6" />
+      </div>
+      <div className="pt-4">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full mt-2" />
+      </div>
+      <div className="flex justify-end mt-4 gap-4">
+        <Skeleton className="h-8 w-20" />
+        <Skeleton className="h-8 w-20 ml-4" />
+        <Skeleton className="h-8 w-20 ml-4" />
+      </div>
+    </div>
+  );
+}

src/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-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }