From 8ffdb9180c3b185ffff31c39de72f051d9adbcd2 Mon Sep 17 00:00:00 2001
From: jinsoo <binary01@kakao.com>
Date: Wed, 4 Jun 2025 22:28:15 +0900
Subject: [PATCH 1/3] feat: add loading state to image skeleton component

---
 .../src/components/Renderer/components/Image/Image.tsx   | 2 +-
 packages/notion-to-jsx/src/components/Skeleton/index.tsx | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx b/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx
index 6b1c4b8..206c202 100644
--- a/packages/notion-to-jsx/src/components/Renderer/components/Image/Image.tsx
+++ b/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({
diff --git a/packages/notion-to-jsx/src/components/Skeleton/index.tsx b/packages/notion-to-jsx/src/components/Skeleton/index.tsx
index 76c6b8e..20a50eb 100644
--- a/packages/notion-to-jsx/src/components/Skeleton/index.tsx
+++ b/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 || ''}`}

From 5de03d9d13234e949c6da116f6a9979790bbe366 Mon Sep 17 00:00:00 2001
From: jinsoo <binary01@kakao.com>
Date: Wed, 4 Jun 2025 22:28:29 +0900
Subject: [PATCH 2/3] chore: changeset

---
 .changeset/few-olives-like.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/few-olives-like.md

diff --git a/.changeset/few-olives-like.md b/.changeset/few-olives-like.md
new file mode 100644
index 0000000..ffa3ac6
--- /dev/null
+++ b/.changeset/few-olives-like.md
@@ -0,0 +1,5 @@
+---
+"notion-to-jsx": patch
+---
+
+add loading state to image skeleton component

From 5cb32ae5cd0c628b2f976e4105eaa53717d88da1 Mon Sep 17 00:00:00 2001
From: jinsoo <binary01@kakao.com>
Date: Wed, 4 Jun 2025 22:30:57 +0900
Subject: [PATCH 3/3] feat: add cover component with image and video support
 for Notion blocks

---
 packages/notion-to-jsx/src/components/Cover/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/notion-to-jsx/src/components/Cover/index.tsx b/packages/notion-to-jsx/src/components/Cover/index.tsx
index b144245..77d3a38 100644
--- a/packages/notion-to-jsx/src/components/Cover/index.tsx
+++ b/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}