[@mantine/core] Image: rollback loading changes

mantinedev · Feb 5, 2022 · a577d24 · a577d24
1 parent 194059d
commit a577d24
Showing 1 changed file with 8 additions and 13 deletions.
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, useEffect, useRef } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { DefaultProps, MantineNumberSize, ClassNames } from '@mantine/styles';
-import { useMergedRef } from '@mantine/hooks';
+import { useDidUpdate } from '@mantine/hooks';
 import { Text } from '../Text';
 import { Box } from '../Box';
 import { ImageIcon } from './ImageIcon';
@@ -70,15 +70,10 @@ 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, internalImgRef);
-
-    useEffect(() => {
-      const { current } = internalImgRef;
-      if (current?.complete) {
-        setError(current.naturalHeight === 0);
-        setLoaded(current.naturalHeight !== 0);
-      }
+
+    useDidUpdate(() => {
+      setLoaded(false);
+      setError(false);
     }, [src]);
 
     return (
@@ -90,8 +85,7 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>(
               src={src}
               alt={alt}
               style={{ objectFit: fit, width, height }}
-              ref={mergedImgRef}
-              {...imageProps}
+              ref={imageRef}
               onLoad={(event) => {
                 setLoaded(true);
                 typeof imageProps?.onLoad === 'function' && imageProps.onLoad(event);
@@ -100,6 +94,7 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>(
                 setError(true);
                 typeof imageProps?.onError === 'function' && imageProps.onError(event);
               }}
+              {...imageProps}
             />
 
             {isPlaceholder && (