Add skeleton in drawer

apps/blog/src/components/DrawerComment/Skeleton.tsx

@@ -0,0 +1,30 @@
+import Typography from "@marshallku/ui/Typography";
+import { classNames } from "@marshallku/utils";
+import { DRAWER_COMMENT_COUNT } from "#constants";
+import styles from "./index.module.scss";
+
+const cx = classNames(styles, "drawer-comment");
+
+function DrawerCommentSkeleton() {
+    return (
+        <ol className={cx()}>
+            {Array.from({ length: DRAWER_COMMENT_COUNT }).map((_, index) => (
+                <li className={cx("__comment")} key={index}>
+                    <div className={cx("__link")}>
+                        <figure className={cx("__avatar", "__skeleton")} />
+                        <div className={cx("__skeleton-body")}>
+                            <Typography className={cx("__body", "__skeleton")} marginBottom={4}>
+                                Loading...
+                            </Typography>
+                            <Typography variant="c2" className={cx("__skeleton")}>
+                                Loading...
+                            </Typography>
+                        </div>
+                    </div>
+                </li>
+            ))}
+        </ol>
+    );
+}
+
+export default DrawerCommentSkeleton;

apps/blog/src/components/DrawerComment/index.module.scss

@@ -41,4 +41,40 @@
         -webkit-box-orient: vertical;
         overflow: hidden;
     }
+
+    &__skeleton {
+        @keyframes skeleton-loading {
+            0% {
+                transform: translateX(100%) skewX(-10deg);
+            }
+            100% {
+                transform: translateX(-100%) skewX(-10deg);
+            }
+        }
+
+        position: relative;
+        overflow: hidden;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(
+                90deg,
+                color(background-dimmed) 0%,
+                color(sub) 50%,
+                color(background-dimmed) 100%
+            );
+            animation: skeleton-loading 1.4s ease-in-out infinite;
+        }
+    }
+
+    &__skeleton-body {
+        width: 100%;
+        flex-grow: 1;
+        color: transparent;
+    }
 }

apps/blog/src/components/DrawerContent/index.tsx

@@ -7,6 +7,7 @@ import { Icon, IconProps } from "@marshallku/icon";
 import { classNames } from "@marshallku/utils";
 import Hamburger from "#components/Hamburger";
 import DrawerComment from "#components/DrawerComment";
+import DrawerCommentSkeleton from "#components/DrawerComment/Skeleton";
 import styles from "./index.module.scss";
 
 interface DrawerContentProps {
@@ -91,8 +92,8 @@ function DrawerContent({ opened, closeDrawer, willClose, setWillClose }: DrawerC
                         ))}
                     </ul>
                 </nav>
-                <ErrorBoundary fallback={null}>
-                    <Suspense fallback={null}>
+                <ErrorBoundary fallback={<DrawerCommentSkeleton />}>
+                    <Suspense fallback={<DrawerCommentSkeleton />}>
                         <DrawerComment closeDrawer={close} />
                     </Suspense>
                 </ErrorBoundary>