Image Placeholder isn't displayed while image is loading

[AdleyJulian]

What package has an issue

@mantine/core

Describe the bug

The component prop description for withPlaceholder says "Enable placeholder when image is loading and when image fails to load", however the current behavior is only when the image fails to load.

What version of @mantine/hooks page do you have in package.json?

"^6.0.10"

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

Add a loading state.

const [error, setError] = useState(!src);
const [loaded, setLoaded] = useState(false);
const isPlaceholder = withPlaceholder && (error || !loaded);

Update loaded state.

onError={(event) => {
setError(true);
typeof imageProps?.onError === 'function' && imageProps.onError(event);
}}
onLoad={() => setLoaded(true)}

[rtivital]

We previously had this logic with the loading state, there was a race condition that prevented placeholders from switching to image with ssr frameworks, see #629. It is not planned to change this logic.

[fabiendeborde]

@rtivital
Hello, I know this issue is closed and there won't be a fix on this placeholder logic, but could you please reflect this stance in the documentation ?
As @AdleyJulian stated, the documentation indicate that the placeholder will show during image loading while it is not.

It is not really a big deal, but I just lost a few minutes trying to debug why the placeholder wasn't working until I got here.

[rtivital]

Documentation is up to date – https://mantine.dev/core/image/

[fabiendeborde]

Oh, sorry I am still using v6, I didn't check v7 yet...
Thanks for you quick answer!