fix(avatar): update default bg color (#214)

components/account/AccountAvatar.vue

@@ -4,6 +4,8 @@ import type { Account } from 'masto'
 defineProps<{
   account: Account
 }>()
+
+const loaded = $ref(false)
 </script>
 
 <template>
@@ -12,7 +14,9 @@ defineProps<{
     :src="account.avatar"
     :alt="account.username"
     loading="lazy"
-    rounded-full bg-gray:10
+    rounded-full
+    :class="loaded ? 'bg-gray' : 'bg-gray:10'"
     v-bind="$attrs"
+    @load="loaded = true"
   >
 </template>

components/account/AccountHeader.vue

@@ -80,7 +80,7 @@ watchEffect(() => {
     <div p4 mt--17 flex flex-col gap-4>
       <div relative>
         <div flex="~ col gap-2 1">
-          <button w-30 h-30 rounded-full bg-gray border-4 border-bg-base z-2 @click="previewAvatar">
+          <button w-30 h-30 rounded-full border-4 border-bg-base z-2 @click="previewAvatar">
             <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
           </button>
           <div flex flex-col>