From 748cf68055770b914088899c562af72a15d1f212 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 2 Jul 2023 23:34:09 +0800
Subject: [PATCH] show avatar placeholder when loading user avatar

---
 src/views/desktop/MainLayout.vue                 | 16 ++++++++++++++--
 .../user/settings/UserBasicSettingTab.vue        |  8 +++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/views/desktop/MainLayout.vue b/src/views/desktop/MainLayout.vue
index bf937df2..7625fde1 100644
--- a/src/views/desktop/MainLayout.vue
+++ b/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>
diff --git a/src/views/desktop/user/settings/UserBasicSettingTab.vue b/src/views/desktop/user/settings/UserBasicSettingTab.vue
index 145f54d6..f3a52cbd 100644
--- a/src/views/desktop/user/settings/UserBasicSettingTab.vue
+++ b/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">