Reduce the requests for Avatar images

[sbaechler]

Currently, the Avatar component does a Ajax request to check if the avatar image is available and to decide if it should show the image or the fallback.

Right now there is no caching of any kind. So when you do a navigation, the request is sent again. This is especially problematic if you have a list of avatars.

I think it would be helpful if we could check if the image was in the browser cache before doing the request.

[lauri865]

Add cache-control headers, and your avatars will be served from memory/disk cache on subsequent requests. Alternatively, use a service-worker to handle it on client-side.

[sbaechler]

Radix-UI uses a cache-control: no-cache header which forces the browser to always revalidate the image, even if the image server responds with long cache headers.

Here is an example from the shadcn/ui website.

I guess the issue could be solved if the Cache-Control request header was removed.

[lauri865]

I guess you have "disable cache" turned on in the devtools. Radix doesn't set any headers.

[sbaechler]

I just noticed. 🤦‍♂️ When I remove the checkbox, everything is fine.

We can close this issue then.