Add gist page fallback

components/gists/gists-code-skeleton.tsx

@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+import { memo } from 'react';
+import styles from './gists-code.module.css';
+
+const bodyClass = clsx(
+  'rounded-lg',
+  'h-4 bg-gray-300',
+  'mb-2 last:mb-0 animate-pulse'
+);
+const allLength = [
+  500, 400, 300, 200, 332, 402, 105, 399, 501, 285, 378, 123, 325, 456,
+];
+
+const GistsCode = () => {
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <div className="h-[30px] bg-[#f6f8fa] dark:bg-[hsl(220,13%,18%)] flex">
+          <div className="flex items-center h-full mx-3">
+            <div
+              className={clsx(
+                'box-border inline-block',
+                'w-[13px] h-[13px] mr-2',
+                'rounded-full bg-[#ce5347]'
+              )}
+            ></div>
+            <div
+              className={clsx(
+                'box-border inline-block',
+                'w-[13px] h-[13px] mr-2',
+                'rounded-full bg-[#d6a243]'
+              )}
+            ></div>
+            <div
+              className={clsx(
+                'box-border inline-block',
+                'w-[13px] h-[13px]',
+                'rounded-full bg-[#58a942]'
+              )}
+            ></div>
+          </div>
+
+          <div
+            className={clsx(
+              'px-4 bg-white',
+              'leading-[30px]',
+              'dark:bg-[hsl(220,13%,18%)] dark:border-b dark:border-b-[rgb(128,203,196)]',
+              'overflow-hidden whitespace-nowrap overflow-ellipsis',
+              'flex items-center'
+            )}
+          >
+            <span
+              className={clsx(
+                'bg-gray-300 animate-pulse',
+                'w-20 h-4 block rounded'
+              )}
+            ></span>
+          </div>
+        </div>
+
+        <pre>
+          {allLength.map((item, index) => (
+            <div
+              key={index}
+              className={bodyClass}
+              style={{ width: item }}
+            ></div>
+          ))}
+        </pre>
+      </div>
+    </>
+  );
+};
+
+export default memo(GistsCode);

components/gists/gists-skeleton.tsx

@@ -12,9 +12,12 @@ import { Fragment, ReactElement, Suspense } from 'react';
 import { useRouter } from 'next/router';
 import clsx from 'clsx';
 
-const GistsCode = dynamic(() => import('components/gists/gists-code'), {
-  suspense: true,
-});
+const GistsCode = dynamic(
+  () => import('components/gists/gists-code-skeleton'),
+  {
+    suspense: true,
+  }
+);
 
 dayjs.extend(relativeTime);
 
@@ -54,7 +57,7 @@ const GistSkeleton = () => {
             </p>
 
             <Suspense fallback>
-              {/*<GistsCode file={gist.files[f]} showFileName />*/}
+              <GistsCode />
             </Suspense>
           </div>
         </div>

pages/g/[id].tsx

@@ -23,13 +23,13 @@ dayjs.extend(relativeTime);
 const Gist = ({ gist }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const router = useRouter();
 
-  // if (router.isFallback) {
-  return (
-    <Suspense fallback>
-      <GistsSkeleton />
-    </Suspense>
-  );
-  // }
+  if (router.isFallback) {
+    return (
+      <Suspense fallback>
+        <GistsSkeleton />
+      </Suspense>
+    );
+  }
 
   return (
     <>