From 9bfb4dfd069067b1c859b6ace6c8395a8a72adac Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 20 Feb 2023 16:59:00 +0100
Subject: [PATCH] fix(web): loading profile image (#1803)

---
 .../navigation-bar/account-info-panel.svelte  | 27 +++++++-------
 .../navigation-bar/navigation-bar.svelte      | 36 +++++++++----------
 2 files changed, 30 insertions(+), 33 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 b51fcb8fc7..d033c5d3ba 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
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { clickOutside } from '$lib/utils/click-outside';
-	import { api, UserResponseDto } from '@api';
+	import { UserResponseDto } from '@api';
 	import { createEventDispatcher } from 'svelte';
 	import { page } from '$app/stores';
 	import { fade } from 'svelte/transition';
@@ -10,18 +10,14 @@
 
 	export let user: UserResponseDto;
 
+	// Show fallback while loading profile picture and hide when image loads.
+	let showProfilePictureFallback = true;
+
 	const dispatch = createEventDispatcher();
 
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
 	};
-
-	const getUserProfileImage = async () => {
-		if (!user.profileImagePath) {
-			return null;
-		}
-		return api.userApi.getProfileImage(user.id).catch(() => null);
-	};
 </script>
 
 <div
@@ -34,23 +30,26 @@
 >
 	<div class="bg-white dark:bg-immich-dark-primary/10 rounded-3xl mx-4 mt-4 pb-4">
 		<div class="flex place-items-center place-content-center">
-			<button
-				class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4"
+			<div
+				class="flex place-items-center place-content-center rounded-full bg-immich-primary dark:bg-immich-dark-primary dark:immich-dark-primary/80 h-20 w-20 text-gray-100 hover:bg-immich-primary dark:text-immich-dark-bg mt-4 select-none"
 			>
-				{#await getUserProfileImage() then}
+				{#if user.profileImagePath}
 					<img
 						transition:fade={{ duration: 100 }}
+						class:hidden={showProfilePictureFallback}
 						src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
 						alt="profile-img"
 						class="inline rounded-full h-20 w-20 object-cover shadow-md border-2 border-immich-primary dark:border-immich-dark-primary"
 						draggable="false"
+						on:load={() => (showProfilePictureFallback = false)}
 					/>
-				{:catch}
+				{/if}
+				{#if showProfilePictureFallback}
 					<div transition:fade={{ duration: 200 }} class="text-lg">
 						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
 					</div>
-				{/await}
-			</button>
+				{/if}
+			</div>
 		</div>
 
 		<p class="text-lg text-immich-primary dark:text-immich-dark-primary font-medium mt-4">
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
index 5a8606de70..348f7e1a3c 100644
--- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
+++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -14,15 +14,12 @@
 
 	let shouldShowAccountInfo = false;
 
+	// Show fallback while loading profile picture and hide when image loads.
+	let showProfilePictureFallback = true;
+
 	const dispatch = createEventDispatcher();
 	let shouldShowAccountInfoPanel = false;
 
-	const getUserProfileImage = async () => {
-		if (!user.profileImagePath) {
-			return null;
-		}
-		return api.userApi.getProfileImage(user.id).catch(() => null);
-	};
 	const getFirstLetter = (text?: string) => {
 		return text?.charAt(0).toUpperCase();
 	};
@@ -96,19 +93,20 @@
 				<button
 					class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
 				>
-					{#await getUserProfileImage() then hasProfileImage}
-						{#if hasProfileImage}
-							<img
-								transition:fade={{ duration: 100 }}
-								src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
-								alt="profile-img"
-								class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
-								draggable="false"
-							/>
-						{:else}
-							{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
-						{/if}
-					{/await}
+					{#if user.profileImagePath}
+						<img
+							transition:fade={{ duration: 100 }}
+							class:hidden={showProfilePictureFallback}
+							src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
+							alt="profile-img"
+							class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
+							draggable="false"
+							on:load={() => (showProfilePictureFallback = false)}
+						/>
+					{/if}
+					{#if showProfilePictureFallback}
+						{getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
+					{/if}
 				</button>
 
 				{#if shouldShowAccountInfo}