create skeleton loading page

app/loading.tsx

@@ -0,0 +1,9 @@
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+
+export default function Loading() {
+  return (
+    <div className="flex justify-center py-6">
+      <ArrowPathIcon className="animate-spin h-6 text-orange-700 w-6" />
+    </div>
+  );
+}

app/reviews/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { notFound } from "next/navigation";
 import CommentList from "@/components/CommentList";
 import CommentForm from "@/components/CommentForm";
 import { ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import { Suspense } from "react";
+import CommentListSkeleton from "@/components/CommentListSekeleton";
 
 interface ReviewPageParams {
   slug: string;
@@ -65,7 +67,9 @@ const ReviewPage = async ({ params: { slug } }: ReviewPageProps) => {
           Comments
         </h2>
         <CommentForm slug={slug} title={review.title} />
-        <CommentList slug={slug} />
+        <Suspense fallback={<CommentListSkeleton />}>
+          <CommentList slug={slug} />
+        </Suspense>
       </section>
     </div>
   );

components/CommentListSekeleton.tsx

@@ -0,0 +1,22 @@
+import { UserCircleIcon } from "@heroicons/react/24/outline";
+
+export default function CommentListSkeleton() {
+  return (
+    <ul className="animate-pulse border mt-3 rounded">
+      {[1, 2, 3].map((index) => (
+        <li
+          key={index}
+          className="border-b px-3 py-2 last:border-none odd:bg-orange-100"
+        >
+          <div className="flex gap-3 items-center pb-1 text-slate-300">
+            <UserCircleIcon className="h-6 w-6" />
+            <div className="bg-gray-300 rounded h-3 w-24" />
+          </div>
+          <p className="py-1">
+            <div className="bg-gray-300 rounded h-3 w-2/3" />
+          </p>
+        </li>
+      ))}
+    </ul>
+  );
+}

lib/reviews.ts

@@ -1,4 +1,4 @@
-import "server-only"; //checks if all requests are made form the server components
+import "server-only";
 
 import { marked } from "marked";
 import qs from "qs";