Fix loading skeletons (#106)

src/app/component/PostSkeleton.tsx

@@ -1,12 +1,61 @@
 export const PostSkeleton = () => {
   return (
-    <div className="max-w-4xl p-8">
-      <div className="mb-6 h-5 w-3/5 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-      <div className="mb-5 h-2 w-5/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-      <div className="mb-4 h-2 w-4/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-      <div className="mb-4 h-2 w-9/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-      <div className="mb-4 h-2 w-10/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-      <div className="h-2 w-7/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+    <div className="group flex w-full cursor-pointer flex-row items-center rounded-2xl duration-300 hover:bg-neutral-300/50 md:gap-8 md:p-8 dark:hover:bg-neutral-900">
+      <div className="hidden lg:flex lg:items-center lg:gap-x-8">
+        <div className="rounded-lg bg-neutral-700 lg:size-12 dark:bg-gray-700"></div>
+
+        <div className="relative object-contain lg:size-24">
+          <svg
+            className="text-neutral-700 dark:text-gray-700"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            viewBox="0 0 20 18"
+          >
+            <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+          </svg>
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col items-start gap-2">
+        <div className="flex w-full gap-x-2 lg:hidden">
+          <div className="relative block size-10 object-contain lg:hidden lg:size-24">
+            <svg
+              className="text-neutral-700 dark:text-gray-700"
+              aria-hidden="true"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 18"
+            >
+              <path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
+            </svg>
+          </div>
+          <div className="flex w-full gap-2">
+            <div className="mb-3 h-8 w-1/2 rounded-full bg-neutral-700 md:w-2/5 dark:bg-gray-700"></div>
+          </div>
+        </div>
+
+        <div className="mb-2 hidden h-10 w-2/5 rounded-full bg-neutral-700 lg:block dark:bg-gray-700"></div>
+
+        <div className="mb-2 h-3 w-11/12 rounded-full bg-neutral-700 md:h-5 md:w-3/5 dark:bg-gray-700"></div>
+
+        <div className="mb-2 flex w-full flex-wrap gap-x-2 md:mb-4">
+          {new Array(3).fill("").map((_, i) => (
+            <div
+              key={i}
+              className="h-5 w-2/12 rounded-full bg-neutral-700 md:h-7 md:w-1/12 dark:bg-gray-700"
+            ></div>
+          ))}
+        </div>
+
+        <div className="mb-1 h-3 w-11/12 rounded-full bg-neutral-700 md:h-5 dark:bg-gray-700"></div>
+        <div className="mb-1 h-3 w-10/12 rounded-full bg-neutral-700 md:h-5 dark:bg-gray-700"></div>
+        <div className="mb-1 h-3 w-11/12 rounded-full bg-neutral-700 md:h-5 dark:bg-gray-700"></div>
+      </div>
+
+      <div className="ml-auto hidden rounded-lg bg-neutral-700 px-4 py-2 lg:block dark:bg-gray-700">
+        <div className="mb-6 h-10 w-10 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+      </div>
     </div>
   );
 };

src/app/loading.tsx

@@ -2,20 +2,34 @@ import { PostSkeleton } from "./component/PostSkeleton";
 
 export default function Loading() {
   return (
-    <div className="flex min-h-screen flex-col p-4 md:p-24">
-      <div className="mb-6 ml-8 h-10 w-4/5 animate-pulse rounded-full bg-neutral-700 md:mb-20 dark:bg-gray-700"></div>
-      <div className="flex animate-pulse flex-col items-center">
-        <div className="mb-8 mt-4 flex w-full flex-col justify-start gap-2">
-          <div className="mb-8 ml-8 flex w-full flex-col justify-start gap-2">
-            <div className="mb-4 h-6 w-3/5 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
-            <div className="mb-4 h-3 w-2/5 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+    <main className="flex min-h-screen w-full animate-pulse flex-col items-center px-4 pt-10 md:px-8">
+      <header className="flex w-full flex-col items-center gap-4 pb-10">
+        <div className="mr-auto h-10 w-10/12 rounded-full bg-neutral-700 md:mb-4 lg:m-0 lg:mb-4 lg:w-8/12 2xl:w-2/6 dark:bg-gray-700"></div>
+        <div className="mb-4 mr-auto h-10 w-7/12 rounded-full bg-neutral-700 md:hidden lg:m-0 dark:bg-gray-700"></div>
+
+        <div className="mb-4 h-[50px] w-[300px] rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+
+        <div className="w-full md:w-11/12 lg:w-8/12 2xl:w-2/6">
+          <div className="mb-4 h-5 w-3/12 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+          <div className="w-full">
+            <div className="mb-4 h-[32px] rounded-full bg-neutral-700 dark:bg-gray-700"></div>
           </div>
+          <div className="mb-4 h-3 w-2/5 rounded-full bg-neutral-700 dark:bg-gray-700"></div>
+        </div>
+      </header>
 
+      <div className="w-full md:w-11/12 2xl:w-[1129.65px]">
+        <div className="flex flex-col gap-10 overflow-hidden md:gap-4">
           {new Array(5).fill("").map((_, i) => (
             <PostSkeleton key={i} />
           ))}
         </div>
+
+        <div className="flex flex-col items-center pt-8">
+          <div className="mb-4 h-4 w-11/12 rounded-full bg-neutral-700 md:w-5/12 dark:bg-gray-700"></div>
+          <div className="mb-4 h-2 w-11/12 rounded-full bg-neutral-700 md:w-4/12 dark:bg-gray-700"></div>
+        </div>
       </div>
-    </div>
+    </main>
   );
 }