feat: add loading state to image skeleton component

Author: 01-binary

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 || ''}`}