From a577d24f5a8878efde98056bd4c45359e22f38e7 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Sat, 5 Feb 2022 15:18:58 +0300
Subject: [PATCH] [@mantine/core] Image: rollback loading changes

---
 .../src/components/Image/Image.tsx            | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/mantine-core/src/components/Image/Image.tsx b/src/mantine-core/src/components/Image/Image.tsx
index 5902a03817e..ccc221a1ed0 100644
--- 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 && (