Merge pull request #43 from web3privacy/pb/skeletons

feat: skeletors
web3privacy · Sep 25, 2024 · d06cf7e · d06cf7e
2 parents 2cf38c5 + 7ca345d
commit d06cf7e
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 1 deletion.
diff --git a/components/CardSkeletor.vue 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
@@ -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>