From e2d3b008163e2e9f3daa9571a9d656bd57d5c142 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Wed, 21 Dec 2022 22:55:45 +0600
Subject: [PATCH] add content-loader

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/ArchiveCardLoader.vue | 21 +++++++++++++++++++++
 package.json                     |  3 +++
 pages/blogs.vue                  | 11 +++++++++--
 yarn.lock                        |  5 +++++
 4 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 components/ArchiveCardLoader.vue

diff --git a/components/ArchiveCardLoader.vue b/components/ArchiveCardLoader.vue
new file mode 100644
index 0000000..c7b112e
--- /dev/null
+++ b/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>
diff --git a/package.json b/package.json
index b37d1c8..1b4c2b7 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/pages/blogs.vue b/pages/blogs.vue
index 47fa468..c8b854a 100644
--- a/pages/blogs.vue
+++ b/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"
diff --git a/yarn.lock b/yarn.lock
index fd41843..fdb0d90 100644
--- a/yarn.lock
+++ b/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"