add gist skeleton loading

.dockerignore

@@ -2,3 +2,4 @@
 out
 node_modules
 .devcontainer
+build

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,8 +27,6 @@ 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}
@@ -59,8 +59,6 @@ export default async function Page({
           />
         ))}
       </div>
-        </div>
-      </main>
     </>
   );
 }

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>