add post page loading

app/p/[slug]/loading.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import dynamic from 'next/dynamic';
+
+const PostToc = dynamic(() => import('components/post/post-toc'));
+const lines = Array(4).fill(null);
+
+const Page = async () => {
+  return (
+    <>
+      <main
+        id="article"
+        className={clsx(
+          'relative max-w-4xl px-4 mx-auto my-10',
+          'lg:w-[56rem] w-full flex-1',
+          'mt-8',
+        )}
+      >
+        <div className="flex flex-col items-center">
+          <h1
+            className={clsx(
+              'w-[500px] h-12 bg-gray-300',
+              'dark:bg-gray-500 rounded-lg animate-pulse',
+            )}
+          ></h1>
+          <time
+            className={clsx(
+              'mt-8 mb-10 w-40',
+              'rounded-lg bg-gray-300',
+              'dark:bg-gray-500 animate-pulse',
+              'h-3',
+            )}
+          ></time>
+        </div>
+
+        <PostToc toc={[]} tocLength={0} />
+
+        {lines.map((_, i) => (
+          <div
+            className={clsx(
+              'h-4 w-full bg-gray-200',
+              'animate-pulse rounded-lg',
+              'dark:bg-rua-gray-700',
+              'mb-2',
+            )}
+            key={i}
+          ></div>
+        ))}
+
+        <div
+          className={clsx(
+            'h-4 w-64 bg-gray-200',
+            'animate-pulse rounded-lg',
+            'dark:bg-rua-gray-700',
+            'mb-2',
+          )}
+        ></div>
+      </main>
+    </>
+  );
+};
+
+export default Page;

components/pages/blog/post-card-loading.tsx

@@ -1,5 +1,5 @@
-import React, { memo } from 'react';
 import clsx from 'clsx';
+import { memo } from 'react';
 
 const PostCardLoading = () => {
   return (

components/pages/gists/gists-skeleton.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx';
-// import GistsCode from './gists-code';
 
 const GistSkeleton = () => {
   return (
@@ -38,8 +37,6 @@ const GistSkeleton = () => {
             <p className="pb-2 text-lg text-gray-500">
               <span className={'w-16 animate-pulse'}></span>
             </p>
-
-            {/* <GistsCode /> */}
           </div>
         </div>
       </main>