diff --git a/app/gists/file-content-skeleton.tsx b/app/gists/file-content-skeleton.tsx
new file mode 100644
index 0000000..bd28827
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/gists/loading.tsx b/app/gists/loading.tsx
new file mode 100644
index 0000000..744a9fe
--- /dev/null
+++ b/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} />
+      ))}
+    </>
+  );
+}