add gist skeleton loading

app/g/[id]/page.tsx

@@ -1,4 +1,5 @@
 import GistsCode from 'app/gists/gists-code';
+import clsx from 'clsx';
 import LinkAnchor from 'components/mdx/link-anchor';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
@@ -7,6 +8,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import avatar from 'public/images/img/avatar.svg';
+import GistsCodeSkeleton from 'app/gists/gists-code-skeleton';
 
 export const revalidate = 600;
 
@@ -25,42 +27,38 @@ export default async function Page({
 
   return (
     <>
-      <main className="max-w-5xl px-4 mx-auto lg:px-0">
-        <div className="pb-4 text-sm">
-          <div className="flex items-center py-1 ">
-            <Image
-              src={avatar}
-              alt="Avatar"
-              priority
-              width={32}
-              height={32}
-              className="rounded-full "
-            />
-            <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
-              <Link href="/gists">
-                <LinkAnchor external={false}>{gist.login}</LinkAnchor>
-              </Link>
-              /{Object.keys(gist.files)[0]}
-            </h1>
-          </div>
+      <div className="flex items-center py-1 ">
+        <Image
+          src={avatar}
+          alt="Avatar"
+          priority
+          width={32}
+          height={32}
+          className="rounded-full "
+        />
+        <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap overflow-ellipsis">
+          <Link href="/gists">
+            <LinkAnchor external={false}>{gist.login}</LinkAnchor>
+          </Link>
+          /{Object.keys(gist.files)[0]}
+        </h1>
+      </div>
 
-          <p className="pl-10 text-gray-400 ">
-            Last active: {dayjs(gist.updated_at).fromNow()}
-          </p>
+      <p className="pl-10 text-gray-400 ">
+        Last active: {dayjs(gist.updated_at).fromNow()}
+      </p>
 
-          <div className="py-4">
-            <p className="pb-2 text-lg text-gray-500">{gist.description}</p>
+      <div className="py-4">
+        <p className="pb-2 text-lg text-gray-500">{gist.description}</p>
 
-            {Object.keys(gist.files).map((f) => (
-              <GistsCode
-                key={gist.files[f].raw_url}
-                file={gist.files[f]}
-                showFileName
-              />
-            ))}
-          </div>
-        </div>
-      </main>
+        {Object.keys(gist.files).map((f) => (
+          <GistsCode
+            key={gist.files[f].raw_url}
+            file={gist.files[f]}
+            showFileName
+          />
+        ))}
+      </div>
     </>
   );
 }

app/g/layout.tsx

@@ -7,5 +7,11 @@ export default async function PageLayout({
 }: {
   children: ReactNode;
 }) {
-  return <>{children}</>;
+  return (
+    <>
+      <main className="max-w-5xl px-4 mx-auto lg:px-0">
+        <div className="pb-4 text-sm">{children}</div>
+      </main>
+    </>
+  );
 }

app/g/loading.tsx

@@ -1,5 +1,56 @@
+import GistsCodeSkeleton from 'app/gists/gists-code-skeleton';
+import clsx from 'clsx';
+
 const loading = () => {
-  return <>loading</>;
+  return (
+    <>
+      <div className="flex items-center py-1 ">
+        <div
+          className={clsx(
+            'w-8 h-8 rounded-full',
+            'bg-gray-200 animate-pulse dark:bg-rua-gray-600',
+          )}
+        ></div>
+        <h1
+          className={clsx(
+            'ml-2 overflow-hidden text-xl',
+            'whitespace-nowrap overflow-ellipsis',
+            'flex items-center',
+          )}
+        >
+          <div
+            className={clsx(
+              'w-32 h-5 bg-gray-200',
+              'animate-pulse rounded-md',
+              'dark:bg-rua-gray-600',
+            )}
+          ></div>
+          <span className="mx-1">/</span>
+          <div
+            className={clsx(
+              'w-32 h-5 bg-gray-200',
+              'animate-pulse rounded-md',
+              'dark:bg-rua-gray-600',
+            )}
+          ></div>
+        </h1>
+      </div>
+
+      <p className="text-gray-400 pl-11 ">
+        <div
+          className={clsx(
+            'w-32 h-4 bg-gray-200',
+            'animate-pulse rounded-md',
+            'dark:bg-rua-gray-600',
+          )}
+        ></div>
+      </p>
+
+      <div className="py-4">
+        <GistsCodeSkeleton />
+      </div>
+    </>
+  );
 };
 
 export default loading;

app/gists/gists-code-skeleton.tsx

@@ -6,6 +6,7 @@ const bodyClass = clsx(
   'rounded-lg',
   'h-4 bg-gray-300',
   'mb-2 last:mb-0 animate-pulse',
+  'dark:bg-rua-gray-600',
 );
 const allLength = [
   500, 400, 300, 200, 332, 402, 105, 399, 501, 285, 378, 123, 325, 456,
@@ -53,6 +54,7 @@ const GistsCode = () => {
               className={clsx(
                 'bg-gray-300 animate-pulse',
                 'w-20 h-4 block rounded',
+                'dark:bg-rua-gray-600',
               )}
             ></span>
           </div>