improved loading performance of blog a lot more

probablyjassin · Nov 25, 2024 · bb64b4f · bb64b4f
1 parent 0118b38
commit bb64b4f
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 36 deletions.
diff --git a/app.vue b/app.vue
@@ -24,28 +24,6 @@ useHead({
 	],
 });
 
-interface BlogPost {
-	_path: string;
-	title: string;
-	description?: string;
-	image?: string;
-	date?: string;
-	_file: string;
-	_dir: string;
-}
-
-const { data: posts, status, error, refresh, clear } = await useAsyncData("blog-posts", async () =>
-	await queryContent<BlogPost>("blog")
-		.where({
-			_partial: false,
-			_draft: false,
-			_path: { $ne: "/blog" }, // Exclude index page
-		})
-		.sort({ _path: 1 })
-		.find()
-);
-
-const postsState = useState<BlogPost[]>("posts", () => posts.value || []);
 </script>
 
 <style>

diff --git a/components/RelatedPosts.vue b/components/RelatedPosts.vue
@@ -1,13 +1,24 @@
 <template>
-    <section v-if="postsState?.length" class="mt-8">
-        <h2 class="text-2xl font-bold mb-4">Did you also read these? 👀</h2>
-        <ul>
-            <li v-for="post in shuffled(postsState.filter((p) => p._path !== $route.path).slice(0, 3))"
-                :key="post._path">
-                <NuxtLink :to="post._path" class="text-primary underline">{{ post.title }}</NuxtLink>
-            </li>
-        </ul>
-    </section>
+    <Suspense>
+        <template #default>
+            <section v-if="posts?.length" class="mt-8">
+                <h2 class="text-2xl font-bold mb-4">Did you also read these? 👀</h2>
+                <ul>
+                    <li v-for="post in shuffled(posts.filter((p) => p._path !== $route.path).slice(0, 3))"
+                        :key="post._path">
+                        <NuxtLink :to="post._path" class="text-primary underline">{{ post.title }}</NuxtLink>
+                    </li>
+                </ul>
+            </section>
+        </template>
+        <template #fallback>
+            <div class="animate-pulse">
+                <div class="h-4 bg-[var(--text-200)] rounded w-3/4 mb-4"></div>
+                <div class="h-4 bg-[var(--text-200)] rounded w-1/2 mb-4"></div>
+            </div>
+        </template>
+    </Suspense>
+
 </template>
 
 <script setup lang="ts">
@@ -21,7 +32,16 @@ interface BlogPost {
     _dir: string;
 }
 
-const postsState = useState<BlogPost[]>("posts", () => []);
+const { data: posts, status, error, refresh, clear } = await useLazyAsyncData("blog-posts", async () =>
+    await queryContent<BlogPost>("blog")
+        .where({
+            _partial: false,
+            _draft: false,
+            _path: { $ne: "/blog" }, // Exclude index page
+        })
+        .sort({ _path: 1 })
+        .find()
+);
 
 const shuffled = <T>(items: T[]): T[] =>
     items

diff --git a/pages/blog/[...slug].vue b/pages/blog/[...slug].vue
@@ -7,7 +7,7 @@
 						<main>
 							<ContentLoader />
 							<hr />
-							<RelatedPosts v-if="showRelated" :current-path="$route.path" />
+							<RelatedPosts v-if="showRelated" />
 						</main>
 					</template>
 					<template #fallback>

diff --git a/pages/blog/index.vue b/pages/blog/index.vue
@@ -4,8 +4,7 @@
 			<main class="max-w-4xl mb-4 mx-auto px-4">
 				<h1 class="text-4xl font-bold mb-8">Things I wrote about</h1>
 
-				<div v-if="pending && !posts?.length"
-					class="animate-pulse grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+				<div v-if="!posts?.length" class="animate-pulse grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
 					<div v-for="i in 6" :key="i" class="mb-8 bg-slate-800 rounded-3xl h-[35em]">
 						<div class="px-6 w-full rounded-lg border border-[var(--primary-200)]"></div>
 					</div>
@@ -64,7 +63,7 @@ interface BlogPost {
 	_dir: string;
 }
 
-const { data: posts, pending } = await useAsyncData("blog-posts", () =>
+const { data: posts, status, error, refresh, clear } = await useAsyncData("blog-posts", () =>
 	queryContent<BlogPost>("blog")
 		.where({
 			_partial: false,