Avatars flash on mount even if cached

[lauri865]

Bug report

Current Behavior

Avatars never render on first mount, even if cached.

Expected behavior

If avatar image is cached by the browser, the image should render straight away on initial mount.

Reproducible example

Refresh this page: https://www.radix-ui.com/docs/primitives/components/avatar

Suggested solution

Instead of loading the image in useEffect, the image loading should be started directly in the useState initializer. If the image is cached, image.complete of new Image will return true synchronously, and then the state value can be returned as "loaded" right away.

[frykten]

This ticket could be closed: https://github.com/radix-ui/primitives/pull/2340

[lauri865]

@frykten, it does not fix this judging by the code. img.onload is not triggered synchronously / on the same tick, so simply changing to useLayoutEffect does nothing to detect on first render whether the image is loaded or not.

[freshgiammi]

This is also the case when providing a base64 string as src.

I'm expecting the component not to flash and show fallback, but render the image directly since there's no network request involved here. However, I see the state moving from loading to loaded, which in turn makes the fallback render when no delay is set.

Reproduction: https://codesandbox.io/s/radix-avatar-b64issue-rr24j8

[pondorasti]

+1

[wouter173]

+1

[romulovalez]

+1