feat: add spin loader while scrolling

Author: luannguyenQV

apps/web/@/molecules/post-list/index.tsx

@@ -4,6 +4,8 @@ import { useCallback, useState } from "react"
 import { useSearchParams } from "next/navigation"
 
 import { getPosts, PostStatus, TPostItem } from "database"
+import { Loader } from "lucide-react"
+import { PostSkeleton } from "ui"
 
 import useInfiniteScroll from "@/hooks/useInfinityScroll"
 
@@ -47,7 +49,11 @@ export default function PostList({ containerClassName }: PostListProps) {
         ref={setNode}
         className="h-10 w-full"
       >
-        {loading && <div>Loading...</div>}
+        {loading && (
+          <div className="flex min-h-10 items-center justify-center">
+            <Loader className="animate-spin" />
+          </div>
+        )}
       </div>
     </div>
   )

apps/web/@/molecules/posts/post-item/index.tsx

@@ -9,7 +9,6 @@ import APP_ROUTES from "@/constants/routes"
 import TagList from "@/molecules/tag/tag-list"
 import { generatePath } from "@/utils/generatePath"
 
-import BookmarkButton from "./bookmark-button"
 import CommentButton from "./comment-button"
 import LikeButton from "./like-button"
 import PostMeta from "./post-meta"
@@ -49,10 +48,10 @@ export default function PostItem({ post }: { post: TPostItem }) {
           </div>
         </div>
       </div>
-      {post.Image && (
+      {post.image && (
         <div className="flex items-center">
           <Image
-            src={post.Image.url}
+            src={post.image.previewUrl}
             alt={post.title}
             width={160}
             height={120}

apps/web/app/[lang]/(public)/page.tsx

@@ -1,5 +1,8 @@
+import { Suspense } from "react"
 import { Metadata } from "next"
 
+import { PostSkeleton } from "ui"
+
 import Filter from "@/molecules/home/filter"
 import PostList from "@/molecules/post-list"
 
@@ -12,7 +15,9 @@ export default async function Page() {
   return (
     <div>
       <Filter />
-      <PostList containerClassName="mt-4" />
+      <Suspense fallback={<PostSkeleton total={10} />}>
+        <PostList containerClassName="mt-4" />
+      </Suspense>
     </div>
   )
 }

packages/database/src/posts/selects.ts

@@ -14,6 +14,7 @@ export const postSelect = {
     select: {
       id: true,
       url: true,
+      previewUrl: true,
     },
   },
   author: {

packages/ui/@/molecules/skeleton/posts.tsx

@@ -0,0 +1,40 @@
+import * as React from "react"
+
+import { Skeleton } from "../../components/ui/skeleton"
+import { cn } from "../../lib/utils"
+
+interface PostSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  total?: number
+  containerClassName?: string
+}
+
+function PostSkeleton({
+  total = 1,
+  className,
+  containerClassName = "",
+  ...props
+}: PostSkeletonProps) {
+  return (
+    <div className={cn("flex flex-col gap-4", containerClassName)}>
+      {Array.from({ length: total }).map((_, index) => (
+        <div
+          className={cn("flex gap-4", className)}
+          {...props}
+          key={index}
+        >
+          <div className="flex flex-1 flex-col items-start gap-4">
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-4 w-[50%]" />
+            <div className="flex items-center space-x-2">
+              <Skeleton className="h-4 w-[100px]" />
+              <Skeleton className="h-4 w-[100px]" />
+            </div>
+          </div>
+          <Skeleton className="h-[100px] w-[160px]" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export { PostSkeleton }

packages/ui/index.ts

@@ -230,3 +230,5 @@ export {
 export { cn } from "././@/lib/utils"
 
 export { LoadingButton } from "./@/components/ui/loading-button"
+
+export { PostSkeleton } from "./@/molecules/skeleton/posts"