From 3507f2916248a989a699afe2cf097b7e37b19af3 Mon Sep 17 00:00:00 2001
From: ZeroWave022 <36341766+ZeroWave022@users.noreply.github.com>
Date: Sun, 25 Aug 2024 17:07:29 +0200
Subject: [PATCH] feat: Add loading animation to storage page

---
 .../[locale]/(default)/storage/loading.tsx    | 24 +++++++++++++++++++
 src/components/storage/SkeletonCard.tsx       | 17 +++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 src/app/[locale]/(default)/storage/loading.tsx
 create mode 100644 src/components/storage/SkeletonCard.tsx

diff --git a/src/app/[locale]/(default)/storage/loading.tsx b/src/app/[locale]/(default)/storage/loading.tsx
new file mode 100644
index 0000000..f88b271
--- /dev/null
+++ b/src/app/[locale]/(default)/storage/loading.tsx
@@ -0,0 +1,24 @@
+import { SkeletonCard } from '@/components/storage/SkeletonCard';
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export default function StorageSkeleton() {
+  return (
+    <>
+      <div className='my-4 flex flex-col justify-center gap-2 lg:flex-row'>
+        <Skeleton className='h-10 w-full' />
+        <Skeleton className='h-10 w-full lg:w-[250px]' />
+        <Skeleton className='h-10 w-full lg:w-[250px]' />
+      </div>
+      <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+        <SkeletonCard />
+      </div>
+    </>
+  );
+}
diff --git a/src/components/storage/SkeletonCard.tsx b/src/components/storage/SkeletonCard.tsx
new file mode 100644
index 0000000..8c3cafb
--- /dev/null
+++ b/src/components/storage/SkeletonCard.tsx
@@ -0,0 +1,17 @@
+import { Skeleton } from '@/components/ui/Skeleton';
+
+export function SkeletonCard() {
+  return (
+    <div className='flex h-[350px] flex-col gap-5'>
+      <div className='flex flex-col items-center justify-center gap-2'>
+        <Skeleton className='h-[192px] w-[192px] rounded-lg' />
+        <Skeleton className='h-[24px] w-[120px] rounded-full' />
+        <Skeleton className='h-[14px] w-[70px] rounded-full' />
+      </div>
+      <div className='flex items-center justify-center gap-2'>
+        <Skeleton className='h-[14px] w-[70px] rounded-full' />
+        <Skeleton className='h-8 w-[100px] rounded-lg' />
+      </div>
+    </div>
+  );
+}