add image fallback

src/components/Emoji.vue

@@ -4,13 +4,20 @@
             v-if="image.frames"
             class="avatar"
             :style="generateEmojiStyle(imageUrl, image.framesOverTime, image.frames, image.loopStyle, size)"></div>
-        <img v-else :src="imageUrl" class="avatar" :style="{ width: size + 'px', height: size + 'px' }" />
+        <Avatar v-else class="rounded" :style="{ width: size + 'px', height: size + 'px' }">
+            <AvatarImage :src="imageUrl" class="object-cover" />
+            <AvatarFallback class="rounded">
+                <ImageOff class="size-4 text-muted-foreground" />
+            </AvatarFallback>
+        </Avatar>
     </div>
 </template>
 
 <script setup>
     import { onMounted, ref, watch } from 'vue';
+    import { ImageOff } from 'lucide-vue-next';
 
+    import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
     import { extractFileId, generateEmojiStyle } from '../shared/utils';
     import { useGalleryStore } from '../stores';
 

src/views/Notifications/columns.jsx

@@ -1,4 +1,9 @@
 import Location from '../../components/Location.vue';
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage
+} from '../../components/ui/avatar';
 import { Badge } from '../../components/ui/badge';
 import { Button } from '../../components/ui/button';
 import {
@@ -12,6 +17,7 @@ import {
     Ban,
     BellOff,
     Check,
+    ImageOff,
     Link,
     MessageCircle,
     Reply,
@@ -403,32 +409,43 @@ export const createColumns = ({
                 }
 
                 if (original.details?.imageUrl) {
-                    return (
+                    const detailsUrl = getSmallThumbnailUrl(
-                        <img
-                            class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
-                            src={getSmallThumbnailUrl(
                         original.details.imageUrl
-                            )}
+                    );
+                    return (
+                        <Avatar
+                            class="cursor-pointer size-7.5 rounded"
                             onClick={() =>
                                 showFullscreenImageDialog(
                                     original.details.imageUrl
                                 )
                             }
-                            loading="lazy"
+                        >
+                            <AvatarImage
+                                src={detailsUrl}
+                                class="object-cover"
                             />
+                            <AvatarFallback class="rounded">
+                                <ImageOff class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                        </Avatar>
                     );
                 }
 
                 if (original.imageUrl) {
+                    const imgUrl = getSmallThumbnailUrl(original.imageUrl);
                     return (
-                        <img
+                        <Avatar
-                            class="cursor-pointer h-7.5 w-7.5 rounded object-cover"
+                            class="cursor-pointer size-7.5 rounded"
-                            src={getSmallThumbnailUrl(original.imageUrl)}
                             onClick={() =>
                                 showFullscreenImageDialog(original.imageUrl)
                             }
-                            loading="lazy"
+                        >
-                        />
+                            <AvatarImage src={imgUrl} class="object-cover" />
+                            <AvatarFallback class="rounded">
+                                <ImageOff class="size-4 text-muted-foreground" />
+                            </AvatarFallback>
+                        </Avatar>
                     );
                 }
 

src/views/Sidebar/components/FriendItem.vue

@@ -4,7 +4,12 @@
             <div
                 class="avatar"
                 :class="isFriendActiveOrOffline ? undefined : userStatusClass(friend.ref, friend.pendingOffline)">
-                <img :src="userImage(friend.ref, true)" loading="lazy" />
+                <Avatar class="size-full rounded-full">
+                    <AvatarImage :src="userImage(friend.ref, true)" class="object-cover" />
+                    <AvatarFallback>
+                        <User class="size-5 text-muted-foreground" />
+                    </AvatarFallback>
+                </Avatar>
             </div>
             <div class="detail h-9 flex flex-col justify-between">
                 <span v-if="!hideNicknames && friend.$nickName" class="name" :style="{ color: friend.ref.$userColour }">
@@ -48,23 +53,14 @@
                 ><Trash2 class="h-4 w-4" />
             </Button>
         </template>
-
-        <!-- <div v-else class="skeleton" aria-busy="true" aria-label="Loading">
-            <div>
-                <Skeleton class="h-10 w-10 rounded-full" />
-                <div>
-                    <Skeleton class="h-3.5 w-1/2" />
-                    <Skeleton class="mt-1.5 h-3 w-full" />
-                </div>
-            </div>
-        </div> -->
     </div>
 </template>
 
 <script setup>
+    import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+    import { Trash2, User } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { Spinner } from '@/components/ui/spinner';
-    import { Trash2 } from 'lucide-vue-next';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';