Race condition between hydration and image load event

[Stouffi]

What package has an issue

@mantine/core

Describe the bug

When an Image with placeholder is server-side rendered, the component displayed in browser can be hydrated after load event and in this case will keep displaying placeholder.

In which browser did the problem occur

Any

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

No response

Do you know how to fix the issue

Yes

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

Yes

Possible fix

Looking at this issue's comment https://github.com/facebook/react/issues/15446#issuecomment-484709466

I could implement a fix for Image with a useEffect

useEffect(() => {
  const { current } = internalImgRef;
  if (current?.complete) {
    setError(current.naturalHeight === 0);
    setLoaded(current.naturalHeight !== 0);
  }
}, [src])

[rtivital]

Thanks for reporting, you can submit a PR with a fix

[rtivital]

Released in 3.5.3

[Stouffi]

@rtivital please consider reopening this issue because of https://github.com/mantinedev/mantine/commit/a577d24f5a8878efde98056bd4c45359e22f38e7 rolling back #630

from 3.6.6 the race condition with hydration and load event can still make the placeholder visible.

Could you also explain why rolling back was necessary?

[rtivital]

I had to roll back because Image stopped working with dynamic values and after hydration in Next.js, rolling back fixed the issue

[Yonben]

@rtivital Not sure I understood what you meant with your last answer. I updated to latest (3.6.11) and it's still happening to me.

I get placeholder permanently most of the time when server rendered. When navigating my app and having the client rendering it, works fine though.

[rtivital]

@Yonben I'm saying that:

• I cannot reproduce this issue with Next.js ssr
• PR that was sent to fix this issue that I cannot reproduce broke images loading
• I had to rollback PR changes in order to make it work in Next.js.

If you can provide an example repo that reproduces this issue we'll be able to debug.

[Yonben]

Will do my best and tag you if I manage to :) Thanks a lot!

[Yonben]

@rtivital Here it is. https://codesandbox.io/s/focused-panka-ieeh66?file=/pages/avatar/%5Bname%5D.js If on this page you go to /avatar/<arandomname> you will get the placeholder. However if then you use the input and click the button to change the route on the client side, it will work.

Thanks for the help 🙏

Edit: forgot to actually put the link...

[rtivital]

Thanks for reproduction, I'll have a look

[rtivital]

Fixed in 5.4.2