notion-to-jsx 1.2.13 → 1.2.15

package/dist/index.mjs

@@ -105,7 +105,7 @@ var RichTexts = ({ richTexts }) => {
 var RichTexts_default = RichTexts;
 
 // src/components/Renderer/components/Image/Image.tsx
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 
 // src/components/Renderer/components/Image/styles.css.ts
 import { createRuntimeFn as _7a4683 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -171,12 +171,23 @@ var Image = ({
   isColumn = false
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
+  const imgRef = useRef(null);
+  useEffect(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+  const handleLoad = () => {
+    setIsLoaded(true);
+  };
   return /* @__PURE__ */ jsxs("div", { className: imageContainer, children: [
     /* @__PURE__ */ jsxs("div", { className: imageWrapper, style: getImageStyles(format, isColumn), children: [
       /* @__PURE__ */ jsx4("div", { className: skeletonWrapper({ isLoaded }), children: /* @__PURE__ */ jsx4(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
       /* @__PURE__ */ jsx4(
         "img",
         {
+          ref: imgRef,
           className: imageStyle({
             loaded: isLoaded,
             hasAspectRatio: !!format?.block_aspect_ratio
@@ -184,7 +195,7 @@ var Image = ({
           src,
           alt,
           loading: "lazy",
-          onLoad: () => setIsLoaded(true),
+          onLoad: handleLoad,
           width: format?.block_width,
           height: format?.block_height,
           style: getImageTagStyle(format)
@@ -258,7 +269,7 @@ var Bookmark = ({ url, metadata }) => {
 var Bookmark_default = Bookmark;
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
-import { useState as useState2, useEffect } from "react";
+import { useState as useState2, useEffect as useEffect2 } from "react";
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
 var content2 = "styles_content__o1p3m12";
@@ -398,7 +409,7 @@ var LinkPreview = ({ url }) => {
   const [linkType, setLinkType] = useState2(
     "unknown"
   );
-  useEffect(() => {
+  useEffect2(() => {
     const loadLinkData = async () => {
       setLoading(true);
       const type = getLinkType(url);
@@ -916,7 +927,7 @@ var Title = ({ title: title3 }) => {
 var Title_default = Title;
 
 // src/components/Cover/index.tsx
-import { useState as useState4 } from "react";
+import { useState as useState4, useRef as useRef2, useEffect as useEffect3 } from "react";
 
 // src/components/Cover/styles.css.ts
 import { createRuntimeFn as _7a4684 } from "@vanilla-extract/recipes/createRuntimeFn";
@@ -928,15 +939,26 @@ var skeletonWrapper2 = _7a4684({ defaultClassName: "styles_skeletonWrapper__p0cp
 import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
   const [isLoaded, setIsLoaded] = useState4(false);
+  const imgRef = useRef2(null);
+  useEffect3(() => {
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalHeight !== 0) {
+      setIsLoaded(true);
+    }
+  }, [src]);
+  const handleLoad = () => {
+    setIsLoaded(true);
+  };
   return /* @__PURE__ */ jsxs9("div", { className: coverContainer, children: [
     /* @__PURE__ */ jsx19("div", { className: skeletonWrapper2({ isLoaded }), children: /* @__PURE__ */ jsx19(Skeleton_default, { variant: "image", isLoading: !isLoaded }) }),
     /* @__PURE__ */ jsx19(
       "img",
       {
+        ref: imgRef,
         src,
         alt,
         className: imageStyle2({ isLoaded }),
-        onLoad: () => setIsLoaded(true),
+        onLoad: handleLoad,
         loading: "lazy"
       }
     )