From bc5a4b730ddb4e5020b0f3eab7089bb64a724ad3 Mon Sep 17 00:00:00 2001
From: nurRiyad <asadnurriyad@gmail.com>
Date: Thu, 22 Dec 2022 02:41:38 +0600
Subject: [PATCH] update asycData with lazy asyncData

Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
---
 components/ListHero.vue |  2 +-
 pages/blogs.vue         |  2 +-
 pages/index.vue         | 21 ++++++++++++++++++---
 pages/tags/[topic].vue  |  2 +-
 pages/tags/index.vue    |  2 +-
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/components/ListHero.vue b/components/ListHero.vue
index a20d940..c2997ca 100644
--- a/components/ListHero.vue
+++ b/components/ListHero.vue
@@ -4,7 +4,7 @@ const route = useRoute();
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = await useAsyncData("listhero", () =>
+const { data } = await useLazyAsyncData("listhero", () =>
   queryContent(`/${routeType.value}`).find()
 );
 
diff --git a/pages/blogs.vue b/pages/blogs.vue
index c8b854a..508de35 100644
--- a/pages/blogs.vue
+++ b/pages/blogs.vue
@@ -3,7 +3,7 @@ definePageMeta({
   layout: "list",
 });
 
-const { data, pending } = await useAsyncData("blogs", () =>
+const { data, pending } = await useLazyAsyncData("blogs", () =>
   queryContent("/").find()
 );
 
diff --git a/pages/index.vue b/pages/index.vue
index 3683ba1..4a0ecff 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-const { data } = await useAsyncData("index", () => queryContent("/").find());
+const { data, pending } = await useLazyAsyncData("index", () =>
+  queryContent("/").find()
+);
 
 // get all the unique types from content
 const getTopCategory = computed(() => {
@@ -35,7 +37,14 @@ const getRecentContent = computed(() => {
   <div
     class="container px-4 mx-auto max-w-6xl flex font-ibmmono gap-14 antialiased min-h-[72vh]"
   >
-    <div class="flex-1">
+    <div v-if="pending">
+      <h1>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
+        accusamus maxime optio neque praesentium! Id ipsa deleniti vero magni
+        expedita?
+      </h1>
+    </div>
+    <div v-else class="flex-1">
       <h1 class="text-xl pb-8 text-[#e60067]">RECENTLY PUBLISHED</h1>
       <div class="space-y-8">
         <template v-for="rp in getRecentContent" :key="rp">
@@ -49,7 +58,13 @@ const getRecentContent = computed(() => {
         </template>
       </div>
     </div>
-    <div class="basis-1/4">
+    <div v-if="pending">
+      <h1>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam labore
+        accusamus sit distinctio fugit commodi quam debitis ratione alias illum?
+      </h1>
+    </div>
+    <div v-else class="basis-1/4">
       <div>
         <h2 class="text-xl pb-8 text-[#e60067]">TOP CATEGORIES</h2>
         <template v-for="cat in getTopCategory" :key="cat">
diff --git a/pages/tags/[topic].vue b/pages/tags/[topic].vue
index 8006436..90b281a 100644
--- a/pages/tags/[topic].vue
+++ b/pages/tags/[topic].vue
@@ -8,7 +8,7 @@ const route = useRoute();
 const routeType = computed(() => {
   return route.params.topic || "";
 });
-const { data } = await useAsyncData("topic", () =>
+const { data } = await useLazyAsyncData("topic", () =>
   queryContent(`/${routeType.value}`).find()
 );
 
diff --git a/pages/tags/index.vue b/pages/tags/index.vue
index 0d62362..1464d84 100644
--- a/pages/tags/index.vue
+++ b/pages/tags/index.vue
@@ -2,7 +2,7 @@
 definePageMeta({
   layout: "list",
 });
-const { data } = await useAsyncData("tags", () => queryContent("/").find());
+const { data } = await useLazyAsyncData("tags", () => queryContent("/").find());
 
 const getTopCategory = computed(() => {
   const allpost = data.value || [];