From a52ff676d7acef3c645202f0f4c1f8e2bd6b1f2d Mon Sep 17 00:00:00 2001
From: Sam Tape <sctape@gmail.com>
Date: Thu, 1 Dec 2022 22:47:18 -0600
Subject: [PATCH] [@mantine/core] Image: Fix image component update bug with
 placeholder

If you render an Image component with a valid src, then update the src prop to
null, the placeholder does not render. With this fix, the placeholder will be
properly rendered when the component updates.
---
 src/mantine-core/src/Image/Image.test.tsx | 7 +++++++
 src/mantine-core/src/Image/Image.tsx      | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/mantine-core/src/Image/Image.test.tsx b/src/mantine-core/src/Image/Image.test.tsx
index 0c1d2e12043..7f24ac4bbe0 100644
--- a/src/mantine-core/src/Image/Image.test.tsx
+++ b/src/mantine-core/src/Image/Image.test.tsx
@@ -45,6 +45,13 @@ describe('@mantine/core/Image', () => {
     expect(withoutPlaceholder.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(0);
   });
 
+  it('renders a placeholder after having src updated to null', () => {
+    const { rerender, container } = render(<Image src="test-src" withPlaceholder />);
+    expect(container.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(0);
+    rerender(<Image src={null} withPlaceholder />);
+    expect(container.querySelectorAll('.mantine-Image-placeholder')).toHaveLength(1);
+  });
+
   it('renders given caption', () => {
     const { container: withoutCaption } = render(<Image src="test" />);
     const { container: withCaption } = render(<Image src="test" caption="test-caption" />);
diff --git a/src/mantine-core/src/Image/Image.tsx b/src/mantine-core/src/Image/Image.tsx
index eb7e33026a3..696e6fce701 100644
--- a/src/mantine-core/src/Image/Image.tsx
+++ b/src/mantine-core/src/Image/Image.tsx
@@ -82,7 +82,7 @@ export const Image = forwardRef<HTMLDivElement, ImageProps>((props: ImageProps,
   const isPlaceholder = withPlaceholder && error;
 
   useDidUpdate(() => {
-    setError(false);
+    setError(!src);
   }, [src]);
 
   return (