diff --git a/app/gists/page.tsx b/app/gists/page.tsx
index 81dfd7a..6bf0475 100644
--- a/app/gists/page.tsx
+++ b/app/gists/page.tsx
@@ -4,6 +4,7 @@ import UserInfo from './user-info';
 import { Suspense } from 'react';
 import Pagination from 'components/rua/rua-pagination';
 import FileContent from './file-content';
+import UserInfoLoading from './user-info-skeleton';
 
 export default async function Page() {
   const gists = await getGists();
@@ -17,7 +18,7 @@ export default async function Page() {
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <Suspense fallback>
+          <Suspense fallback={<UserInfoLoading />}>
             {/* @ts-expect-error Async Server Component */}
             <UserInfo />
           </Suspense>
diff --git a/app/gists/user-info-skeleton.tsx b/app/gists/user-info-skeleton.tsx
new file mode 100644
index 0000000..30916c6
--- /dev/null
+++ b/app/gists/user-info-skeleton.tsx
@@ -0,0 +1,69 @@
+import clsx from 'clsx';
+import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
+
+const UserInfoLoading = () => {
+  return (
+    <>
+      <div
+        className={clsx(
+          'flex md:items-center flex-1',
+          'max-w-[280px] md:block',
+          'mb-4 flex-col md:flex-row'
+        )}
+      >
+        <div className="flex md:flex-col">
+          <div
+            className={clsx(
+              'w-16 h-16 mr-4 overflow-hidden',
+              'md:w-72 md:h-72 bg-gray-200 rounded-full',
+              'animate-pulse dark:bg-rua-gray-800'
+            )}
+          ></div>
+
+          <div>
+            <h1
+              className={clsx(
+                'text-xl font-bold font-Barlow md:text-2xl w-44',
+                'animate-pulse h-6 rounded-lg',
+                'bg-gray-200 dark:bg-rua-gray-800',
+                'my-2'
+              )}
+            ></h1>
+
+            <h2
+              className={clsx(
+                'text-xl text-gray-400 font-Barlow md:text-2xl',
+                'animate-pulse h-5 rounded-lg w-32',
+                'bg-gray-200 dark:bg-rua-gray-800'
+              )}
+            ></h2>
+          </div>
+        </div>
+
+        <div
+          className={clsx(
+            'my-4 w-44 h-4 rounded-lg animate-pulse',
+            'bg-gray-200 dark:bg-rua-gray-800'
+          )}
+        ></div>
+
+        <div>
+          <div className="flex items-center mb-1 animate-pulse">
+            <FiMail className="mr-2" />
+            <div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
+          </div>
+          <div className="flex items-center mb-1 animate-pulse">
+            <FiLink className="mr-2" />
+            <div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
+          </div>
+          <div className="flex items-center mb-1 animate-pulse">
+            <FiTwitter className="mr-2" />
+            <div className="w-40 h-4 bg-gray-200 rounded-lg"></div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default UserInfoLoading;