Merge pull request #88 from 01-binary/skeleton-fix

Skeleton fix

Author: 01-binary

.changeset/few-olives-like.md

@@ -0,0 +1,5 @@
+---
+"notion-to-jsx": patch
+---
+
+add loading state to image skeleton component

packages/notion-to-jsx/src/components/Cover/index.tsx

@@ -17,7 +17,7 @@ const Cover = ({ src, alt }: Props) => {
   return (
     <div className={coverContainer}>
       <div className={skeletonWrapper({ isLoaded })}>
-        <Skeleton variant="image" />
+        <Skeleton variant="image" isLoading={!isLoaded} />
       </div>
       <img
         src={src}

packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx

@@ -47,7 +47,7 @@ const Image = ({
     <div className={imageContainer}>
       <div className={imageWrapper} style={getImageStyles(format, isColumn)}>
         <div className={skeletonWrapper({ isLoaded })}>
-          <Skeleton variant="image" />
+          <Skeleton variant="image" isLoading={!isLoaded} />
         </div>
         <img
           className={imageStyle({

packages/notion-to-jsx/src/components/Skeleton/index.tsx

@@ -18,6 +18,10 @@ type SkeletonProps = {
    * 추가 CSS 클래스명
    */
   className?: string;
+  /**
+   * 로딩 상태
+   */
+  isLoading?: boolean;
 };
 
 /**
@@ -29,6 +33,7 @@ const Skeleton = ({
   width,
   height,
   className,
+  isLoading = true,
 }: SkeletonProps) => {
   const getVariantClass = () => {
     switch (variant) {
@@ -42,6 +47,10 @@ const Skeleton = ({
     }
   };
 
+  if (!isLoading) {
+    return null;
+  }
+
   return (
     <div
       className={`${styles.skeleton} ${getVariantClass()} ${className || ''}`}