Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Avatars flash on mount even if cached #2044

Open
lauri865 opened this issue Mar 25, 2023 · 8 comments · May be fixed by #3008
Open

Avatars flash on mount even if cached #2044

lauri865 opened this issue Mar 25, 2023 · 8 comments · May be fixed by #3008
Labels
Package: react/avatar Type: Bug Confirmed bug

Comments

@lauri865
Copy link

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
Copy link

frykten commented Aug 29, 2023

This ticket could be closed: #2340

@lauri865
Copy link
Author

lauri865 commented Aug 29, 2023 •
edited
Loading

@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
Copy link

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
Copy link

+1

1 similar comment
@wouter173
Copy link

+1

@romulovalez
Copy link

+1

@rkkautsar rkkautsar linked a pull request Jul 9, 2024 that will close this issue
Open
@0xbulma
Copy link

0xbulma commented Aug 30, 2024

+1

1 similar comment
@jmreidy
Copy link

jmreidy commented Sep 4, 2024

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Package: react/avatar Type: Bug Confirmed bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Avatar] Fix flashing when image is already cached rkkautsar/radix-ui-primitives
9 participants
@jmreidy @romulovalez @benoitgrelard @lauri865 @freshgiammi @wouter173 @frykten @pondorasti @0xbulma