From 916d90cc2cf51effd4b25feae5e22f304b04068c Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Mon, 20 May 2024 16:07:00 +0200
Subject: [PATCH] feat: loading skeletons

---
 src/app/dashboard/[id]/loading.tsx            |  5 +++
 src/app/dashboard/loading.tsx                 | 11 ++++++
 .../app/BotFormSkeleton/BotFormSkeleton.tsx   | 39 +++++++++++++++++++
 src/components/app/UserCard/UserCard.tsx      |  2 -
 .../app/UserCardSkeleton/UserCardSkeleton.tsx | 21 ++++++++++
 src/components/ui/skeleton.tsx                | 15 +++++++
 6 files changed, 91 insertions(+), 2 deletions(-)
 create mode 100644 src/app/dashboard/[id]/loading.tsx
 create mode 100644 src/app/dashboard/loading.tsx
 create mode 100644 src/components/app/BotFormSkeleton/BotFormSkeleton.tsx
 create mode 100644 src/components/app/UserCardSkeleton/UserCardSkeleton.tsx
 create mode 100644 src/components/ui/skeleton.tsx

diff --git a/src/app/dashboard/[id]/loading.tsx b/src/app/dashboard/[id]/loading.tsx
new file mode 100644
index 0000000..654ea92
--- /dev/null
+++ b/src/app/dashboard/[id]/loading.tsx
@@ -0,0 +1,5 @@
+import BotFormSkeleton from "@/components/app/BotFormSkeleton/BotFormSkeleton";
+
+export default function Loading() {
+    return <BotFormSkeleton />
+}
\ No newline at end of file
diff --git a/src/app/dashboard/loading.tsx b/src/app/dashboard/loading.tsx
new file mode 100644
index 0000000..5e8e57e
--- /dev/null
+++ b/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>
+    )
+}
\ No newline at end of file
diff --git a/src/components/app/BotFormSkeleton/BotFormSkeleton.tsx b/src/components/app/BotFormSkeleton/BotFormSkeleton.tsx
new file mode 100644
index 0000000..b8a0cc0
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/components/app/UserCard/UserCard.tsx b/src/components/app/UserCard/UserCard.tsx
index 28297f5..9da6f4f 100644
--- a/src/components/app/UserCard/UserCard.tsx
+++ b/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"
diff --git a/src/components/app/UserCardSkeleton/UserCardSkeleton.tsx b/src/components/app/UserCardSkeleton/UserCardSkeleton.tsx
new file mode 100644
index 0000000..d32063d
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000..01b8b6d
--- /dev/null
+++ b/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 }