Add gists page loading skeleton

app/gists/file-content-skeleton.tsx

@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+export default function FileContentLoading() {
+  return (
+    <div className={clsx('pb-4')}>
+      {/* Username */}
+      <h1
+        className={clsx(
+          'md:text-lg h-7 bg-gray-200',
+          'animate-pulse w-48 rounded-lg',
+          'dark:bg-rua-gray-700',
+          'mb-2'
+        )}
+      ></h1>
+      {/* last active */}
+      <div
+        className={clsx(
+          'h-4 w-72 bg-gray-200',
+          'animate-pulse rounded-lg',
+          'dark:bg-rua-gray-700'
+        )}
+      ></div>
+      {/* code block */}
+      <div
+        className={clsx(
+          'w-full h-[488px] rounded-lg',
+          'animate-pulse dark:bg-rua-gray-700',
+          'mt-3 bg-gray-200'
+        )}
+      ></div>
+    </div>
+  );
+}

app/gists/loading.tsx

@@ -0,0 +1,13 @@
+import FileContentLoading from './file-content-skeleton';
+
+export default function Loading() {
+  const num = Array(3).fill(null);
+
+  return (
+    <>
+      {num.map((_, i) => (
+        <FileContentLoading key={i} />
+      ))}
+    </>
+  );
+}