From 7ca345dd0e04e737b8af0acf830d1400080aa6ac Mon Sep 17 00:00:00 2001
From: Diex5 <diexfive@gmail.com>
Date: Wed, 25 Sep 2024 12:38:51 +0200
Subject: [PATCH] feat: skeletors

---
 components/CardSkeletor.vue             | 96 +++++++++++++++++++++++++
 components/Project/ProjectGridGroup.vue |  6 +-
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 components/CardSkeletor.vue

diff --git a/components/CardSkeletor.vue b/components/CardSkeletor.vue
new file mode 100644
index 0000000..6861586
--- /dev/null
+++ b/components/CardSkeletor.vue
@@ -0,0 +1,96 @@
+<template>
+  <div
+    flex
+    w-full
+    items-center
+    gap-16px
+    hover:bg="#121212"
+    transition-all
+    animate-pulse
+  >
+    <div
+      grid
+      grid-cols="2 lg:10"
+      w-full
+      gap-24px
+      items-center
+    >
+      <div
+        col-span="1 lg:2"
+        flex
+        items-center
+        gap="12px lg:16px"
+        relative
+        w-full
+        h-full
+        h="48px lg:64px"
+      >
+        <div class="bg-app-text-grey w-64px h-64px " />
+        <div
+          flex
+          flex-col
+          gap-y-4px
+          lg:flex-row
+          justify-center
+        >
+          <div
+            w-fit
+            flex
+            items-center
+            gap-8px
+          >
+            <div class="bg-app-text-grey w-100px h-10px " />
+          </div>
+          <div
+            class="bg-app-text-grey w-150px h-10px lg:hidden"
+            lg:animate-none
+            animate-pulse
+          />
+        </div>
+      </div>
+
+      <div
+        lg:col-span-2
+        flex
+        items-center
+        justify-end
+        w-full
+        gap-16px
+      >
+        <div
+          class="bg-app-text-grey lg:w-full w-80px h-10px "
+        />
+      </div>
+      <div
+        class="bg-app-text-grey w-full h-10px "
+        lg:block
+        hidden
+      />
+      <div
+        class="bg-app-text-grey w-full h-10px "
+        lg:block
+        hidden
+      />
+      <div
+        class="bg-app-text-grey w-full h-10px "
+        lg:block
+        hidden
+      />
+      <div
+        class="bg-app-text-grey w-10px h-10px  "
+        lg:block
+        hidden
+      />
+      <div
+        class="bg-app-text-grey w-80px h-16px "
+        lg:block
+        hidden
+      />
+      <div
+        class="bg-app-text-grey w-50px ml-auto h-32px "
+        lg:block
+        hidden
+      />
+    </div>
+  </div>
+</template>
diff --git a/components/Project/ProjectGridGroup.vue b/components/Project/ProjectGridGroup.vue
index 08c34ad..d1e46a7 100644
--- a/components/Project/ProjectGridGroup.vue
+++ b/components/Project/ProjectGridGroup.vue
@@ -63,8 +63,12 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
           :key="project.id"
           :project="project"
         />
+
         <template #fallback>
-          Loading...
+          <CardSkeletor
+            v-for="i in 6"
+            :key="i"
+          />
         </template>
       </ClientOnly>
     </div>