show avatar placeholder when loading user avatar

src/views/desktop/MainLayout.vue

@@ -107,7 +107,13 @@
                             <v-icon :icon="(theme === 'light' ? icons.themeLight : (theme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
                         </v-btn>
                         <v-avatar class="cursor-pointer" color="primary" variant="tonal">
-                            <v-img :src="currentUserAvatar" v-if="currentUserAvatar"/>
+                            <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
+                                <template v-slot:placeholder>
+                                    <div class="d-flex align-center justify-center fill-height">
+                                        <v-icon :icon="icons.user"/>
+                                    </div>
+                                </template>
+                            </v-img>
                             <v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
                             <v-menu activator="parent" width="230" location="bottom end" offset="14px">
                                 <v-list>
@@ -115,7 +121,13 @@
                                         <template #prepend>
                                             <v-list-item-action start>
                                                 <v-avatar color="primary" variant="tonal">
-                                                    <v-img :src="currentUserAvatar" v-if="currentUserAvatar"/>
+                                                    <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
+                                                        <template v-slot:placeholder>
+                                                            <div class="d-flex align-center justify-center fill-height">
+                                                                <v-icon :icon="icons.user"/>
+                                                            </div>
+                                                        </template>
+                                                    </v-img>
                                                     <v-icon :icon="icons.user" v-else-if="!currentUserAvatar"/>
                                                 </v-avatar>
                                             </v-list-item-action>

src/views/desktop/user/settings/UserBasicSettingTab.vue

@@ -9,7 +9,13 @@
 
                 <v-card-text class="d-flex">
                     <v-avatar rounded="lg" color="primary" variant="tonal" size="100" class="me-4">
-                        <v-img :src="oldProfile.avatar" v-if="oldProfile.avatar"/>
+                        <v-img :src="oldProfile.avatar" v-if="oldProfile.avatar">
+                            <template v-slot:placeholder>
+                                <div class="d-flex align-center justify-center fill-height">
+                                    <v-icon size="48" :icon="icons.user"/>
+                                </div>
+                            </template>
+                        </v-img>
                         <v-icon size="48" :icon="icons.user" v-else-if="!oldProfile.avatar"/>
                     </v-avatar>
                     <div class="d-flex flex-column justify-center gap-5">