From 0b08af7082956ca66f5e2160c700dc190b293358 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Sun, 16 Jun 2024 17:38:32 +0200
Subject: [PATCH] fix(web): update avatar color immediately (#10393)

---
 .../navigation-bar/account-info-panel.svelte  |  6 ++---
 .../shared-components/user-avatar.svelte      | 22 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
index 743e808939..60bc0b6c61 100644
--- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
@@ -29,6 +29,7 @@
       }
 
       $preferences = await updateMyPreferences({ userPreferencesUpdateDto: { avatar: { color } } });
+      $user = { ...$user, profileImagePath: '', avatarColor: $preferences.avatar.color };
       isShowSelectAvatar = false;
 
       notificationController.show({
@@ -52,9 +53,7 @@
       class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
     >
       <div class="relative">
-        {#key $user}
-          <UserAvatar user={$user} size="xl" />
-        {/key}
+        <UserAvatar user={$user} size="xl" />
         <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
           <CircleIconButton
             color="primary"
@@ -96,6 +95,7 @@
     </div>
   </div>
 </FocusTrap>
+
 {#if isShowSelectAvatar}
   <AvatarSelector
     user={$user}
diff --git a/web/src/lib/components/shared-components/user-avatar.svelte b/web/src/lib/components/shared-components/user-avatar.svelte
index fac7890d74..02f4ca93f2 100644
--- a/web/src/lib/components/shared-components/user-avatar.svelte
+++ b/web/src/lib/components/shared-components/user-avatar.svelte
@@ -5,7 +5,6 @@
 <script lang="ts">
   import { getProfileImageUrl } from '$lib/utils';
   import { type UserAvatarColor } from '@immich/sdk';
-  import { onMount, tick } from 'svelte';
 
   interface User {
     id: string;
@@ -16,7 +15,7 @@
   }
 
   export let user: User;
-  export let color: UserAvatarColor = user.avatarColor;
+  export let color: UserAvatarColor | undefined = undefined;
   export let size: Size = 'full';
   export let rounded = true;
   export let interactive = false;
@@ -27,15 +26,16 @@
   let img: HTMLImageElement;
   let showFallback = true;
 
-  onMount(async () => {
-    if (!user.profileImagePath) {
-      return;
-    }
+  $: img, user, void tryLoadImage();
 
-    await img.decode();
-    await tick();
-    showFallback = false;
-  });
+  const tryLoadImage = async () => {
+    try {
+      await img.decode();
+      showFallback = false;
+    } catch {
+      showFallback = true;
+    }
+  };
 
   const colorClasses: Record<UserAvatarColor, string> = {
     primary: 'bg-immich-primary dark:bg-immich-dark-primary text-immich-dark-fg dark:text-immich-fg',
@@ -60,7 +60,7 @@
     xxxl: 'w-28 h-28',
   };
 
-  $: colorClass = colorClasses[color];
+  $: colorClass = colorClasses[color || user.avatarColor];
   $: sizeClass = sizeClasses[size];
   $: title = label ?? `${user.name} (${user.email})`;
   $: interactiveClass = interactive