[AVATAR] Reload on error

[juliusmarminge]

Feature request

Overview

I'd like to retry loading the image on error. I tried something using the onLoadingStatusChanged but didn't manage to get it working.

For context, this is my current hacky playground:

const AvatarImage = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Image>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
>(({ className, ...props }, ref) => {
  const [retries, setRetries] = React.useState(0);
  return (
    <AvatarPrimitive.Image
      onLoadingStatusChange={(status) => {
        console.log("status", { status, retries, ref });
        if (status === "error" && retries < 3) {
          setTimeout(() => {
            console.log("retrying", { retries, ref });
            setRetries((retries) => retries + 1);
          }, 200);
        }
      }}
      ref={ref}
      className={twMerge("aspect-square h-full w-full", className)}
      {...props}
    />
  );
});

but the retrying is only logged once, and the ref is always null:

Is this possible and I'm just dumb and can't figure it out? Could this be a built in prop perhaps?

<AvatarPrimitive.Image
  // Retry loading the image 3 times with 100ms intervals
  retryTimes={3}
  retryInterval={100}
/>

Examples in other libraries

N/A

Who does this impact? Who is this for?

The usecase is for when updating a profile picture, sometimes it takes a short while for the image to have the correct metadata on the server to be rendered properly by the browser. This causes the image to error immediately after being uploaded. I'd like to just retry loading the image a couple times (like retry it 3 times in 100ms intervals).

Additional context

[juliusmarminge]

oh wait i am stupid... that callback doesn't fire multiple times since the status doesn't change again after it's error...

yea solved it in user-code

[juliusmarminge]

Actually it didn't work since you unmount the image on error