From 36d7402be1f823c753c7cd44cca82bbb5fd4cddd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 24 Jan 2025 17:29:53 +0100
Subject: [PATCH] fix(Avatar): hide fallback when image is loaded

Resolves nuxt/ui-pro#727
---
 src/runtime/components/Avatar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/Avatar.vue b/src/runtime/components/Avatar.vue
index 6ec1f1b7..5175d74c 100644
--- a/src/runtime/components/Avatar.vue
+++ b/src/runtime/components/Avatar.vue
@@ -105,7 +105,7 @@ onMounted(() => {
       @load="imageLoaded = true"
     />
 
-    <AvatarFallback as-child v-bind="{ ...fallbackProps, ...$attrs }">
+    <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
       <slot>
         <UIcon v-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
         <span v-else :class="ui.fallback({ class: props.ui?.fallback })">{{ fallback || '&nbsp;' }}</span>