fix(Avatar): handle loading manually to support @nuxt/image

Resolves nuxt/ui-pro#727

src/runtime/components/Avatar.vue

@@ -36,21 +36,24 @@ extendDevtoolsMeta<AvatarProps>({ defaultProps: { src: 'https://avatars.githubus
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { AvatarRoot, AvatarImage, AvatarFallback, useForwardProps } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+import { ref, computed, useAttrs, onMounted } from 'vue'
+import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
+import { reactivePick, useImage } from '@vueuse/core'
+import ImageComponent from '#build/ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 import UIcon from './Icon.vue'
-import ImageComponent from '#build/ui-image-component'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
+const attrs = useAttrs()
 
 const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '').split(' ').map(word => word.charAt(0)).join('').substring(0, 2))
 
+const imageLoaded = ref(false)
+
 const { size } = useAvatarGroup(props)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -69,19 +72,37 @@ const sizePx = computed(() => ({
   '2xl': 44,
   '3xl': 48
 })[props.size || 'md'])
+
+// Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
+onMounted(() => {
+  if (!props.src || ImageComponent !== 'img') {
+    return
+  }
+
+  const { then } = useImage({ ...props, ...attrs, src: props.src! })
+
+  then((img) => {
+    if (img.isReady.value) {
+      imageLoaded.value = true
+    }
+  })
+})
 </script>
 
 <template>
   <AvatarRoot :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <AvatarImage
+    <component
+      :is="ImageComponent"
       v-if="src"
-      :as="ImageComponent"
+      v-show="imageLoaded"
+      role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
-      v-bind="$attrs"
+      v-bind="attrs"
       :class="ui.image({ class: props.ui?.image })"
+      @load="imageLoaded = true"
     />
 
     <AvatarFallback as-child v-bind="{ ...fallbackProps, ...$attrs }">