From 1fd12e4b9ef80ed6f95be00ab8a7f5a2ad0b6c63 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 11 Feb 2025 23:25:49 +0330
Subject: [PATCH] added loading for avatar

---
 frontend/components/global/Avatar.vue | 44 ++++++++++++++++++---------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/frontend/components/global/Avatar.vue b/frontend/components/global/Avatar.vue
index 5f787a0..e1a3a25 100644
--- a/frontend/components/global/Avatar.vue
+++ b/frontend/components/global/Avatar.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// imports
+
+import { useImage } from "@vueuse/core";
+
 // types
 
 type Props = {
@@ -8,25 +12,37 @@ type Props = {
 
 // props
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const { src } = toRefs(props);
+
+// state
+
+const { isLoading } = useImage({ src: src.value });
 </script>
 
 <template>
     <AvatarRoot
-        class="inline-flex size-[45px] select-none items-center justify-center rounded-full align-middle"
+        class="flex-center size-full select-none rounded-full align-middle overflow-hidden"
     >
-        <AvatarImage
-            class="h-full w-full rounded-full object-cover"
-            :src="src"
-            :alt="alt"
+        <Skeleton
+            v-if="isLoading"
+            class="w-full !h-[110%] !rounded-full aspect-square"
         />
-        <AvatarFallback
-            class="flex-center size-full text-sm font-medium rounded-full"
-            :delay-ms="600"
-        >
-            <div class="size-full rounded-full flex-center">
-                <Icon name="ci:profile" size="16" class="**:stroke-black" />
-            </div>
-        </AvatarFallback>
+        <template v-else>
+            <AvatarImage
+                class="!size-full rounded-full object-cover"
+                :src="src"
+                :alt="alt"
+            />
+            <AvatarFallback
+                class="flex-center size-full text-sm font-medium rounded-full"
+                :delay-ms="600"
+            >
+                <div class="size-full rounded-full flex-center">
+                    <Icon name="ci:profile" size="16" class="**:stroke-black" />
+                </div>
+            </AvatarFallback>
+        </template>
     </AvatarRoot>
 </template>