Add gist code loading

components/gists/GistsCode.tsx

@@ -6,8 +6,10 @@ import rehypePrism from '@mapbox/rehype-prism';
 import remarkGfm from 'remark-gfm';
 import { createElement, Fragment, useEffect, useState } from 'react';
 import rehypeReact from 'rehype-react';
-import useInView from 'lib/hooks/useInView';
 import classNames from 'classnames';
+import useInView from 'lib/hooks/useInView';
+import loadingImage from 'public/images/img/mona-loading-default.gif';
+import Image from 'next/image';
 
 interface Props {
   gist: Gist;
@@ -30,7 +32,7 @@ const GistsCode = ({ gist, f }: Props) => {
       const raw = await res.text();
       setRawCode(`\`\`\`${format ?? ''}\n${raw}`);
     }
-  }, [format, url, inView]);
+  }, [format, inView, url]);
 
   const code = unified()
     .use(remarkParse)
@@ -45,20 +47,27 @@ const GistsCode = ({ gist, f }: Props) => {
 
   return (
     <>
-      <div
+      <div ref={ref} className={classNames('pb-4 text-sm')}>
-        className={classNames('pb-4 text-sm')}
-        style={{
-          minHeight: !inView ? '320px' : 'auto',
-        }}
-        ref={ref}
-      >
         <h1 className="md:text-lg">
           {gist.owner.login} / {file[f].filename}
         </h1>
         <p className="text-gray-400">Update at: {gist.updated_at}</p>
         <p className="text-gray-500">{gist.description}</p>
 
-        {code}
+        {rawCode ? (
+          <div className={classNames(!rawCode && 'min-h-[300px]')}>{code}</div>
+        ) : (
+          <div
+            className={classNames(
+              'h-[300px] flex',
+              'flex-col items-center justify-center'
+            )}
+          >
+            <Image width={50} height={50} src={loadingImage} alt="Loading" />
+
+            <span className="my-4">rua rua rua...</span>
+          </div>
+        )}
       </div>
     </>
   );

components/mdx/Image.tsx

@@ -6,7 +6,7 @@ const Image = ({ alt, ...rest }: Props) => {
   return (
     <>
       <span className="block text-center">
-        <NextImage alt={alt} {...rest} />
+        <NextImage alt={alt} placeholder="blur" {...rest} />
         {alt && <span className="block text-center text-gray-400">{alt}</span>}
       </span>
     </>

pages/g/[id].tsx

@@ -0,0 +1,23 @@
+import { GetStaticProps } from 'next';
+import dynamic from 'next/dynamic';
+import { ReactElement } from 'react';
+import { NextPageWithLayout } from 'types';
+
+const MainLayout = dynamic(() => import('layouts/MainLayout'));
+
+const Gist: NextPageWithLayout = () => {
+  return <></>;
+};
+
+export const getStaticProps:GetStaticProps  = async ({params}) => {
+  return {
+    props: {},
+    revalidate: 60,
+  };
+};
+
+Gist.getLayout = function getLayout(page: ReactElement) {
+  return <MainLayout>{page}</MainLayout>;
+};
+
+export default Gist;

pages/gists.tsx

@@ -1,4 +1,3 @@
-import MainLayout from 'layouts/MainLayout';
 import { InferGetStaticPropsType } from 'next';
 import { ReactElement } from 'react';
 import { Gist, GithubUser } from 'types';
@@ -7,6 +6,7 @@ import classNames from 'classnames';
 import dynamic from 'next/dynamic';
 import avatar from 'public/images/img/avatar.svg';
 
+const MainLayout = dynamic(() => import('layouts/MainLayout'));
 const GistsCode = dynamic(() => import('components/gists/GistsCode'));
 
 const Gists = ({
@@ -17,7 +17,13 @@ const Gists = ({
     <>
       <main className="max-w-5xl px-4 mx-auto lg:px-0">
         <div className="md:flex">
-          <div className="flex items-center flex-1 max-w-[280px] md:block">
+          <div
+            className={classNames(
+              'flex items-center flex-1',
+              'max-w-[280px] md:block',
+              'mb-4'
+            )}
+          >
             <div
               className={classNames(
                 'w-16 h-16 mr-4 overflow-hidden',

pages/p/my-develop-environmental.mdx

@@ -19,7 +19,7 @@ export default ({ children }) => <Layout {...meta}>{children}</Layout>;
 
 最近迁移了自己的小服务器，也顺便把本机的环境重新设置了一下，其中环节还是有点复杂的小细节的。所以打算整理下思路，方便以后再设置同样环境。
 
-<Image src={image1} priority />
+<Image src={image1} placeholder="" priority />
 
 ## 对于服务器