@vx-oss/heroui-v2-use-image 2.1.14-alpha.2 → 2.1.15-beta.0

package/dist/index.js

@@ -40,43 +40,55 @@ function useImage(props = {}) {
     shouldBypassImageLoad = false
   } = props;
   const isHydrated = (0, import_heroui_v2_react_utils.useIsHydrated)();
-  const imageRef = (0, import_react.useRef)(isHydrated ? new Image() : null);
+  const imageRef = (0, import_react.useRef)(null);
   const [status, setStatus] = (0, import_react.useState)("pending");
-  (0, import_react.useEffect)(() => {
-    if (!imageRef.current) return;
-    imageRef.current.onload = (event) => {
-      flush();
-      setStatus("loaded");
-      onLoad == null ? void 0 : onLoad(event);
-    };
-    imageRef.current.onerror = (error) => {
-      flush();
-      setStatus("failed");
-      onError == null ? void 0 : onError(error);
-    };
-  }, [imageRef.current]);
-  const flush = () => {
+  const flush = (0, import_react.useCallback)(() => {
     if (imageRef.current) {
       imageRef.current.onload = null;
       imageRef.current.onerror = null;
       imageRef.current = null;
     }
-  };
+  }, []);
   const load = (0, import_react.useCallback)(() => {
     if (!src) return "pending";
     if (ignoreFallback || shouldBypassImageLoad) return "loaded";
+    flush();
     const img = new Image();
-    img.src = src;
+    img.onload = (event) => {
+      flush();
+      setStatus("loaded");
+      onLoad == null ? void 0 : onLoad(event);
+    };
+    img.onerror = (error) => {
+      flush();
+      setStatus("failed");
+      onError == null ? void 0 : onError(error);
+    };
     if (crossOrigin) img.crossOrigin = crossOrigin;
     if (srcSet) img.srcset = srcSet;
     if (sizes) img.sizes = sizes;
     if (loading) img.loading = loading;
+    img.src = src;
     imageRef.current = img;
-    if (img.complete && img.naturalWidth) {
-      return "loaded";
+    if (img.complete) {
+      if (img.naturalWidth && img.naturalHeight) {
+        return "loaded";
+      }
+      return "failed";
     }
     return "loading";
-  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading, shouldBypassImageLoad]);
+  }, [
+    src,
+    crossOrigin,
+    srcSet,
+    sizes,
+    onLoad,
+    onError,
+    ignoreFallback,
+    loading,
+    shouldBypassImageLoad,
+    flush
+  ]);
   (0, import_heroui_v2_use_safe_layout_effect.useSafeLayoutEffect)(() => {
     if (isHydrated) {
       setStatus(load());

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/index.ts
-import { useRef, useState, useEffect, useCallback } from "react";
+import { useRef, useState, useCallback } from "react";
 import { useIsHydrated } from "@vx-oss/heroui-v2-react-utils";
 import { useSafeLayoutEffect } from "@vx-oss/heroui-v2-use-safe-layout-effect";
 function useImage(props = {}) {
@@ -15,43 +15,55 @@ function useImage(props = {}) {
     shouldBypassImageLoad = false
   } = props;
   const isHydrated = useIsHydrated();
-  const imageRef = useRef(isHydrated ? new Image() : null);
+  const imageRef = useRef(null);
   const [status, setStatus] = useState("pending");
-  useEffect(() => {
-    if (!imageRef.current) return;
-    imageRef.current.onload = (event) => {
-      flush();
-      setStatus("loaded");
-      onLoad == null ? void 0 : onLoad(event);
-    };
-    imageRef.current.onerror = (error) => {
-      flush();
-      setStatus("failed");
-      onError == null ? void 0 : onError(error);
-    };
-  }, [imageRef.current]);
-  const flush = () => {
+  const flush = useCallback(() => {
     if (imageRef.current) {
       imageRef.current.onload = null;
       imageRef.current.onerror = null;
       imageRef.current = null;
     }
-  };
+  }, []);
   const load = useCallback(() => {
     if (!src) return "pending";
     if (ignoreFallback || shouldBypassImageLoad) return "loaded";
+    flush();
     const img = new Image();
-    img.src = src;
+    img.onload = (event) => {
+      flush();
+      setStatus("loaded");
+      onLoad == null ? void 0 : onLoad(event);
+    };
+    img.onerror = (error) => {
+      flush();
+      setStatus("failed");
+      onError == null ? void 0 : onError(error);
+    };
     if (crossOrigin) img.crossOrigin = crossOrigin;
     if (srcSet) img.srcset = srcSet;
     if (sizes) img.sizes = sizes;
     if (loading) img.loading = loading;
+    img.src = src;
     imageRef.current = img;
-    if (img.complete && img.naturalWidth) {
-      return "loaded";
+    if (img.complete) {
+      if (img.naturalWidth && img.naturalHeight) {
+        return "loaded";
+      }
+      return "failed";
     }
     return "loading";
-  }, [src, crossOrigin, srcSet, sizes, onLoad, onError, loading, shouldBypassImageLoad]);
+  }, [
+    src,
+    crossOrigin,
+    srcSet,
+    sizes,
+    onLoad,
+    onError,
+    ignoreFallback,
+    loading,
+    shouldBypassImageLoad,
+    flush
+  ]);
   useSafeLayoutEffect(() => {
     if (isHydrated) {
       setStatus(load());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vx-oss/heroui-v2-use-image",
-  "version": "2.1.14-alpha.2",
+  "version": "2.1.15-beta.0",
   "description": "React hook for progressing image loading",
   "keywords": [
     "use-image"
@@ -25,8 +25,8 @@
     "url": "https://github.com/vezham/heroui-v2/issues"
   },
   "dependencies": {
-    "@vx-oss/heroui-v2-use-safe-layout-effect": "2.1.9-alpha.2",
-    "@vx-oss/heroui-v2-react-utils": "2.1.15-alpha.2"
+    "@vx-oss/heroui-v2-use-safe-layout-effect": "2.1.9-beta.0",
+    "@vx-oss/heroui-v2-react-utils": "2.1.15-beta.0"
   },
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0"