[Avatar] Fix flashing when image is already cached

[daveycodez]

NextUI Version

2.4.2

Describe the bug

Avatars flicker and animate when they should be rendered instantly when cached, Radix shows a fix here ->

radix-ui/primitives#3008

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Using Avatar should render immediately if the image is cached with no loading animation or flickerAvatars flicker and animate when they should be rendered instantly when cached, Radix shows a fix here ->

radix-ui/primitives#3008

Expected behavior

Using Avatar should render immediately if the image is cached with no loading animation or flickerAvatars flicker and animate when they should be rendered instantly when cached, Radix shows a fix here ->

radix-ui/primitives#3008

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1123 [Avatar] Fix flashing when image is already cached

[uigywnkiub]

+, even with Image from next as Avatar or User props...

[awesome-pro]

@wingkwong I am working on it.

[rkkautsar]

@abhinandan-verma hi very sorry I have already worked on this since it's similar to my MR in radix. I didn't see your comment here when I worked on it. I have put up an MR here if you want to review: #3444. Let me know if it's acceptable or you can close it if you already has something else. Thanks

[awesome-pro]

@rkkautsar Thanks for your MR. I was working on it, but Your MR seems more effective.
Kindly update the PR summary , description to make it more understandable.

[ameytessact]

is there any temporary fix until the PR is merged? I am facing the same issue with NextImage passed as ImgComponent.

[daveycodez]

@abhinandan-verma Has this made it into 2.4.6 by any chance?

[uigywnkiub]

Still bug in 2.4.5 and 2.4.6

[daveycodez]

Should we just go ahead and use Radix for this component? Any ETA?

[daveycodez]

It's October so I just published a fix while we wait

https://github.com/daveyplate/nextui-fixed-avatar

npm install @daveyplate/nextui-fixed-avatar

[uigywnkiub]

It's October so I just published a fix while we wait

https://github.com/daveyplate/nextui-fixed-avatar

npm install @daveyplate/nextui-fixed-avatar

Wow nice aha

[daveycodez]

Hey @jrgarciadev this is still broken in 2.6.2, it seems to only work when you add disableAnimation prop but this disables the fade in for uncached images. Although even with disableAnimation there is a very quick flicker still