From b79eb73b67b49e75a62aa9f03d115ab218476920 Mon Sep 17 00:00:00 2001
From: Piotr Matlak <piotr.matlak.contact@gmail.com>
Date: Mon, 11 Dec 2023 11:24:19 +0100
Subject: [PATCH] create skeleton loading page

---
 app/loading.tsx                     |  9 +++++++++
 app/reviews/[slug]/page.tsx         |  6 +++++-
 components/CommentListSekeleton.tsx | 22 ++++++++++++++++++++++
 lib/reviews.ts                      |  2 +-
 4 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/loading.tsx
 create mode 100644 components/CommentListSekeleton.tsx

diff --git a/app/loading.tsx b/app/loading.tsx
new file mode 100644
index 0000000..48afb7e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/reviews/[slug]/page.tsx b/app/reviews/[slug]/page.tsx
index 90b9491..6d2c4b9 100644
--- a/app/reviews/[slug]/page.tsx
+++ b/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>
   );
diff --git a/components/CommentListSekeleton.tsx b/components/CommentListSekeleton.tsx
new file mode 100644
index 0000000..e947849
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/lib/reviews.ts b/lib/reviews.ts
index 856a680..b59a083 100644
--- a/lib/reviews.ts
+++ b/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";