[Feature]: Consider renaming Avatar component

[smc13]

Describe the feature

The Avatar component doesn't appear to have any special accessibility requirements that justify its name and with V2 and a rebrand in the works I wonder if its worth renaming this component to something that more closely represents what it does? Possibly just Image or LazyImage.

In our component library we've also extended the logic with an Intersection observer to delay loading of the image until its needed (behind an async prop on the root) and a statuses prop on the fallback component allowing for different fallbacks for loading and errors statuses

Additional information

• [ ] I intend to submit a PR for this feature.
• [ ] I have already implemented and/or tested this feature.

[zernonia]

Thanks for the suggestion @smc13 . You are right that there's no specific a11y for Avatar component, however the design of that component mostly targeting user profile's avatar. Although there's no restriction why we can't use it for general image, but it's not what it was designed for.

The Avatar is design for handling user avatar's url. In most cases are expecting dynamic url, and provide a fallback if the image is not generated or unavailable.

If you have static images, you don't need to render with Avatar. You native <img> will do or other package such as NuxtImage

[smc13]

Thanks for the response @zernonia, my thinking was that its not only avatars that expect dynamic urls with the need for a fallback.

As an example Mastodon uses a blurhash as a fallback while loading media on posts. Obviously this can be done using a native img element with something like this:

<script lang="ts" setup>
  const status = ref<'loading' | 'loaded' | 'error'>(false)
</script>

<template>
  <div>
    <img src="..." @load="status = 'loaded'" @error="status = 'error'" />
    <BlurHash v-if="status !== 'loaded'" hash="..." />
    <RetryButton v-if="status === 'error'" />
  </div>
</template>

and I actually started with something like this before finding the avatar component that does mostly the same thing but nicer.

I can't comment on NuxtImage as I dont use nuxt.