Open ShukantPal opened 1 year ago
It's a bit contrived as I'm not sure why you'd unmount an avatar image in a real life application, but I think that's a fair change request.
I ran into the same problem, we allow users to uplaod an avatar, but we also allow them to delete the avatar (the changes are reflected instantly - using swr), after the avatar url changes back to null, the fallback is not rendered.
EDIT: If someone stumbles upon this maybe using shadc/ui there is a workarround for this which seems to work here
The same here: we allow user to delete the avatar but then the fallback doesn't render anymore. It's not the intuitive and expected behavior for a fallback.
Bug report
Take the following component
Assume that the avatar image is "loaded". Now if the
src
is changed toundefined
, the image will be unmounted. However, there's no logic inAvatarImage
to set the loading status back to "idle": https://github.com/radix-ui/primitives/blob/02b036d4181131dfc0224044ba5f17d260bce2f8/packages/react/avatar/src/Avatar.tsx#L121That means the loading status will remain "loaded". The fallback won't render after the image unmounts, as a result: https://github.com/radix-ui/primitives/blob/02b036d4181131dfc0224044ba5f17d260bce2f8/packages/react/avatar/src/Avatar.tsx#L110
Current Behavior
Expected behavior
Reproducible example
https://codesandbox.io/s/in0wzp
In this example, I unmount and re-mount the image in a 1s cycle. You can see that the initials show up the first couple of times but after that the avatar goes blank every other second.
Suggested solution
Reset image loading status to
idle
on image unmount, here:https://github.com/radix-ui/primitives/blob/02b036d4181131dfc0224044ba5f17d260bce2f8/packages/react/avatar/src/Avatar.tsx#L75
(because there can't be multiple images per avatar AFAIK)
Your environment