Add loading

components/PostCard.tsx

@@ -13,7 +13,7 @@ const PostCard = ({ post }: Props) => {
         <a>
           <article
             className={cn(
-              'rounded-xl py-4 px-5 md:p-7',
+              'rounded-xl py-4 px-5 md:p-7 ',
               'hover:bg-sky-100 hover:bg-opacity-50',
               // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
               'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',

components/RUA/loading/PostCardLoading.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import cn from 'classnames';
+
+const PostCardLoading = () => {
+  return (
+    <article
+      className={cn(
+        'rounded-xl py-4 px-5 md:p-7 animate-pulse',
+        'bg-sky-100 bg-opacity-50',
+        'dark:bg-rua-gray-800 dark:bg-opacity-100',
+        'flex items-center justify-between text-gray-800 ',
+        'mb-4 dark:text-gray-200'
+      )}
+    >
+      <div className="flex-1">
+        <h2 className="mb-4 bg-gray-300 rounded-lg w-96 h-9 dark:bg-gray-500"></h2>
+
+        <div className="flex items-center text-sm">
+          <div className="w-16 h-5 mr-4 bg-gray-300 rounded-md last:mr-0 dark:bg-gray-500"></div>
+          <div className="w-16 h-5 bg-gray-300 rounded-md dark:bg-gray-500"></div>
+        </div>
+      </div>
+
+      <div className="w-24 h-6 bg-gray-300 rounded-md dark:bg-gray-500"></div>
+    </article>
+  );
+};
+
+export default PostCardLoading;

pages/blog.tsx

@@ -4,7 +4,12 @@ import { postLists } from 'lib/posts';
 import cn from 'classnames';
 import dynamic from 'next/dynamic';
 
-const PostCard = dynamic(() => import('components/PostCard'));
+const PostCardLoading = dynamic(
+  () => import('components/RUA/loading/PostCardLoading')
+);
+const PostCard = dynamic(() => import('components/PostCard'), {
+  loading: () => <PostCardLoading />,
+});
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
 
 const Blog = ({ posts }: InferGetStaticPropsType<typeof getStaticProps>) => {

pages/gists.tsx

@@ -9,8 +9,11 @@ import Link from 'next/link';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
+const Loading = dynamic(() => import('components/RUA/loading/RUALoading'));
 const MainLayout = dynamic(() => import('layouts/MainLayout'));
-const GistsCode = dynamic(() => import('components/gists/GistsCode'));
+const GistsCode = dynamic(() => import('components/gists/GistsCode'), {
+  loading: () => <Loading />,
+});
 const Anchor = dynamic(() => import('components/mdx/Anchor'));
 
 dayjs.extend(relativeTime);