[@mantine/core] Image: fix possible permanent placeholder after hydra…

…tion (#630)
mantinedev · Jan 8, 2022 · f7b9c5b · f7b9c5b
1 parent e00f6c2
commit f7b9c5b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 5 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.9.0
+v14.17.0
diff --git a/src/mantine-core/src/components/Image/Image.tsx b/src/mantine-core/src/components/Image/Image.tsx
@@ -1,6 +1,6 @@
-import React, { useState, forwardRef } from 'react';
+import React, { useState, forwardRef, useEffect, useRef } from 'react';
 import { DefaultProps, MantineNumberSize, ClassNames } from '@mantine/styles';
-import { useDidUpdate } from '@mantine/hooks';
+import { useDidUpdate, useMergedRef } from '@mantine/hooks';
 import { Text } from '../Text';
 import { Box } from '../Box';
 import { ImageIcon } from './ImageIcon';
@@ -70,6 +70,16 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>(
     const [loaded, setLoaded] = useState(false);
     const [error, setError] = useState(!src);
     const isPlaceholder = withPlaceholder && (!loaded || error);
+    const internalImgRef = useRef<HTMLImageElement>(null);
+    const mergedImgRef = useMergedRef(...[...(imageRef ? [imageRef] : []), internalImgRef]);
+
+    useEffect(() => {
+      const { current } = internalImgRef;
+      if (current?.complete) {
+        setError(current.naturalHeight === 0);
+        setLoaded(current.naturalHeight !== 0);
+      }
+    }, [src]);
 
     useDidUpdate(() => {
       setLoaded(false);
@@ -85,7 +95,8 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>(
               src={src}
               alt={alt}
               style={{ objectFit: fit, width, height }}
-              ref={imageRef}
+              ref={mergedImgRef}
+              {...imageProps}
               onLoad={(event) => {
                 setLoaded(true);
                 typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);
@@ -94,7 +105,6 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>(
                 setError(true);
                 typeof imageProps?.onError === 'function' && imageProps.onError(event);
               }}
-              {...imageProps}
             />
 
             {isPlaceholder && (