add content-loader

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>

components/ArchiveCardLoader.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ContentLoader } from "vue-content-loader";
+</script>
+
+<template>
+  <div
+    class="font-ibmmono px-10 mb-4 text-slate-800 group shadow-sm bg-white rounded-lg py-4"
+  >
+    <content-loader
+      viewBox="0 0 476 45"
+      :speed="2"
+      primaryColor="#f3f3f3"
+      secondaryColor="#ecebeb"
+    >
+      <rect x="9" y="6" rx="0" ry="0" width="38" height="34" />
+      <rect x="58" y="6" rx="0" ry="0" width="369" height="9" />
+      <rect x="71" y="29" rx="0" ry="0" width="113" height="9" />
+      <rect x="191" y="28" rx="0" ry="0" width="113" height="9" />
+    </content-loader>
+  </div>
+</template>

package.json

@@ -15,5 +15,8 @@
     "nuxt": "3.0.0",
     "nuxt-icon": "^0.1.8",
     "prettier": "^2.8.0"
+  },
+  "dependencies": {
+    "vue-content-loader": "^2.0.1"
   }
 }

pages/blogs.vue

@@ -3,7 +3,9 @@ definePageMeta({
   layout: "list",
 });
 
-const { data } = await useAsyncData("blogs", () => queryContent("/").find());
+const { data, pending } = await useAsyncData("blogs", () =>
+  queryContent("/").find()
+);
 
 const getAllPost = computed(() => {
   const allpost = data.value || [];
@@ -28,7 +30,12 @@ const getAllPost = computed(() => {
   <div
     class="container mx-auto max-w-6xl font-ibmmono antialiased min-h-[72vh]"
   >
-    <div>
+    <div v-if="pending">
+      <template v-for="n in 5" :key="n">
+        <archive-card-loader />
+      </template>
+    </div>
+    <div v-else>
       <template v-for="pp in getAllPost" :key="pp">
         <archiev-card
           :title="pp.title"

yarn.lock

@@ -5999,6 +5999,11 @@ vue-bundle-renderer@^1.0.0:
   dependencies:
     ufo "^1.0.0"
 
+vue-content-loader@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/vue-content-loader/-/vue-content-loader-2.0.1.tgz#c6a3ff0e653671e5e8cff9e0c3814e6d04d3411d"
+  integrity sha512-pkof4+q2xmzNEdhqelxtJejeP/vQUJtLle4/v2ueG+HURqM9Q/GIGC8GJ2bVVWeLfTDET51jqimwQdmxJTlu0g==
+
 vue-devtools-stub@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz#a65b9485edecd4273cedcb8102c739b83add2c81"