doom-design-system 0.4.6 → 0.4.7

package/dist/components/Image/Image.js

@@ -11,32 +11,31 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import { useState, useEffect, useCallback, useRef, useMemo, } from "react";
 import clsx from "clsx";
 import styles from "./Image.module.css";
 import { Skeleton } from "../Skeleton/Skeleton.js";
+const toCssValue = (val) => {
+    if (val === undefined || val === null)
+        return undefined;
+    if (typeof val === "number")
+        return `${val}px`;
+    return val;
+};
+const getIntrinsicSize = (val) => {
+    if (typeof val === "number")
+        return val;
+    if (typeof val === "string" && !val.endsWith("%")) {
+        const parsed = parseFloat(val);
+        return isNaN(parsed) ? undefined : parsed;
+    }
+    return undefined;
+};
 export function Image(_a) {
     var { src, alt, className, fit, style, onLoad, onError, fallbackSrc, aspectRatio, rounded = true, width, height } = _a, props = __rest(_a, ["src", "alt", "className", "fit", "style", "onLoad", "onError", "fallbackSrc", "aspectRatio", "rounded", "width", "height"]);
     const [status, setStatus] = useState("loading");
     const [showSkeleton, setShowSkeleton] = useState(true);
-    // Helper to extract intrinsic numeric value and convert to CSS
-    const toCssValue = (val) => {
-        if (val === undefined || val === null)
-            return undefined;
-        if (typeof val === "number")
-            return `${val}px`;
-        return val;
-    };
-    const getIntrinsicSize = (val) => {
-        if (typeof val === "number")
-            return val;
-        if (typeof val === "string" && !val.endsWith("%")) {
-            const parsed = parseFloat(val);
-            return isNaN(parsed) ? undefined : parsed;
-        }
-        return undefined;
-    };
-    const computedAspectRatio = React.useMemo(() => {
+    const computedAspectRatio = useMemo(() => {
         if (aspectRatio)
             return aspectRatio;
         const w = getIntrinsicSize(width);
@@ -44,6 +43,13 @@ export function Image(_a) {
         return w && h ? `${w} / ${h}` : undefined;
     }, [aspectRatio, width, height]);
     const prevSrcRef = useRef(src);
+    const imgRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        if ((_a = imgRef.current) === null || _a === void 0 ? void 0 : _a.complete) {
+            setStatus("loaded");
+        }
+    }, []);
     // Reset state when source changes
     useEffect(() => {
         if (prevSrcRef.current !== src) {
@@ -91,5 +97,5 @@ export function Image(_a) {
     return (_jsxs("div", { className: clsx(styles.wrapper, rounded && styles.rounded, className), style: Object.assign({ aspectRatio: computedAspectRatio, width: toCssValue(width), height: toCssValue(height) }, style), children: [_jsx("div", { className: clsx(styles.skeletonLayer, status === "loaded" && styles.fadeOut), "aria-hidden": "true", children: showSkeleton && (_jsx(Skeleton, { style: {
                         width: "100%",
                         height: "100%",
-                    } })) }), _jsx("img", Object.assign({ src: src, alt: alt, className: clsx(styles.image, fit && styles[`fit-${fit}`], status === "loaded" ? styles.visible : styles.hidden), onLoad: handleLoad, onError: handleError, width: width, height: height }, props))] }));
+                    } })) }), _jsx("img", Object.assign({ ref: imgRef, src: src, alt: alt, className: clsx(styles.image, fit && styles[`fit-${fit}`], status === "loaded" ? styles.visible : styles.hidden), onLoad: handleLoad, onError: handleError, width: width, height: height }, props))] }));
 }