Optimize posts fetch

src/components/app/posts-list/index.tsx

@@ -1,5 +1,4 @@
 import { LoadMorePosts } from "./load-more-posts";
-import { PostsList as PostListClient } from "./posts-list";
 export { PostsListSkeleton } from "./skeleton";
 
 import { fetchAllPosts } from "@/lib/data";
@@ -8,16 +7,11 @@ interface PostsListProps {}
 
 async function loadMorePosts(offset: number) {
   "use server";
-  const posts = await fetchAllPosts(offset);
 
-  return <PostListClient posts={posts} />;
+  return fetchAllPosts(offset);
 }
 
 export const PostsList: React.FC<PostsListProps> = async () => {
   const posts = await fetchAllPosts();
-  return (
-    <LoadMorePosts loadMoreAction={loadMorePosts}>
-      <PostListClient posts={posts} />
-    </LoadMorePosts>
-  );
+  return <LoadMorePosts loadMoreAction={loadMorePosts} posts={posts} />;
 };

src/components/app/posts-list/load-more-posts.tsx

@@ -3,14 +3,16 @@ import React, { useEffect, useState, useTransition } from "react";
 import { useInView } from "react-intersection-observer";
 import { PostsListSkeleton } from "./skeleton";
 import { POST_LIST_PAGE_SIZE } from "@/lib/constants";
+import { BlogPost } from "@/lib/definitions";
+import { PostsList } from "./posts-list";
 
 interface LoadMorePostsPops {
-  children: React.ReactNode;
-  loadMoreAction: (offset: number) => Promise<React.ReactElement>;
+  posts: BlogPost[];
+  loadMoreAction: (offset: number) => Promise<BlogPost[]>;
 }
 
 export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
-  children,
+  posts: initialPosts,
   loadMoreAction,
 }) => {
   const { ref, inView } = useInView({
@@ -21,26 +23,25 @@ export const LoadMorePosts: React.FC<LoadMorePostsPops> = ({
   // First page is already fetched, So we start with POST_LIST_PAGE_SIZE offset
   const currentOffsetRef = React.useRef<number | null>(POST_LIST_PAGE_SIZE);
   const [isPending, startTransition] = useTransition();
-  const [posts, setPosts] = useState<React.ReactElement[]>([]);
+  const [posts, setPosts] = useState<BlogPost[]>(initialPosts);
 
   useEffect(() => {
     if (!inView || currentOffsetRef.current === null) return;
 
     startTransition(async () => {
       currentOffsetRef.current! += POST_LIST_PAGE_SIZE;
       const newPosts = await loadMoreAction(currentOffsetRef.current!);
-      setPosts((prevPosts) => [...prevPosts, newPosts]);
+      setPosts((prevPosts) => [...prevPosts, ...newPosts]);
       // End of pages we can stop loading more
-      if (newPosts.props.posts.length < POST_LIST_PAGE_SIZE) {
+      if (newPosts.length < POST_LIST_PAGE_SIZE) {
         currentOffsetRef.current = null;
       }
     });
   }, [inView, loadMoreAction]);
 
   return (
     <section>
-      {children}
-      {posts}
+      <PostsList posts={posts} />
       <div ref={ref}>{isPending ? <PostsListSkeleton /> : null}</div>
     </section>
   );