fix: use proper transition with objects for avatars

Author: paoloricciuti

src/lib/components/AvatarWithFallback.svelte

@@ -5,6 +5,7 @@
 	export let avatarUrl: string = '';
 	export let altText: string = '';
 	export let channelId: string = '';
+	export let listId: string = '';
 
 	let currentUrl = '';
 	let showFallback = false;
@@ -25,7 +26,31 @@
 
 {#if !showFallback}
 	<img
-		use:transition={`avatar-${channelId}`}
+		use:transition={{
+			name: `avatar-${channelId}`,
+			shouldApply({ navigation }) {
+				// here we are navigating from main page to detail page
+				if (navigation.to?.params?.id != null) {
+					// we should apply if the id we are navigating to
+					// has the listId of this avatar
+					return navigation.to.params.id === listId;
+				}
+				// here we are navigating back from the detail to the home, we should apply
+				// only if we are coming from the page with the same id as listId
+				return navigation.from?.params?.id === listId;
+			},
+			applyImmediately({ navigation }) {
+				// here we are navigating from main page to detail page
+				if (navigation.to?.params?.id != null) {
+					// we should apply immediately if the id we are navigating to
+					// has the listId of this avatar
+					return navigation.to.params.id === listId;
+				}
+				// here we are navigating back from the detail to the home, we should apply
+				// immediately only if we are coming from the page with the same id as listId
+				return navigation.from?.params?.id === listId;
+			},
+		}}
 		class="mr-1 inline-block h-14 w-14 rounded-full"
 		referrerpolicy="no-referrer"
 		src={currentUrl}

src/lib/components/ChannelCard.svelte

@@ -2,6 +2,7 @@
 	import AvatarWithFallback from '$/lib/components/AvatarWithFallback.svelte';
 	import type { YouTubeChannelMetaAPIResponse } from '$/lib/server/YouTubeAPI';
 	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 
 	export let channel: YouTubeChannelMetaAPIResponse;
 	export let locale: string;
@@ -42,7 +43,8 @@
 				<AvatarWithFallback
 					channelId={channel.originId}
 					avatarUrl={channel.avatarUrl}
-					altText={channel.name} />
+					altText={channel.name}
+					listId={$page.params?.id} />
 				<div>
 					<div class="font-bold">{channel.name}</div>
 					<div>{channel.customUrl}</div>

src/lib/components/ListCard.svelte

@@ -33,7 +33,8 @@
 					<AvatarWithFallback
 						channelId={item?.meta?.youtubeMeta?.originId}
 						avatarUrl={item?.meta?.youtubeMeta?.avatarUrl}
-						altText={item?.meta?.youtubeMeta?.name} />
+						altText={item?.meta?.youtubeMeta?.name}
+						listId={list.id} />
 				{/each}
 				{#if hiddenItems > 0}
 					<span