fix(web): prevent timeline DOM retention during scroll

web/src/lib/components/timeline/AssetLayout.svelte

@@ -2,20 +2,16 @@
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { filterIsInOrNearViewport } from '$lib/managers/timeline-manager/utils.svelte';
   import type { ViewerAsset } from '$lib/managers/timeline-manager/viewer-asset.svelte';
-  import type { VirtualScrollManager } from '$lib/managers/VirtualScrollManager/VirtualScrollManager.svelte';
-  import { uploadAssetsStore } from '$lib/stores/upload';
   import type { CommonPosition } from '$lib/utils/layout-utils';
   import type { Snippet } from 'svelte';
   import { flip } from 'svelte/animate';
   import { scale } from 'svelte/transition';
 
-  let { isUploading } = uploadAssetsStore;
-
   type Props = {
     viewerAssets: ViewerAsset[];
     width: number;
     height: number;
-    manager: VirtualScrollManager;
+    suspendTransitions: boolean;
     thumbnail: Snippet<
       [
         {
@@ -27,10 +23,7 @@
     customThumbnailLayout?: Snippet<[asset: TimelineAsset]>;
   };
 
-  const { viewerAssets, width, height, manager, thumbnail, customThumbnailLayout }: Props = $props();
-
-  const transitionDuration = $derived(manager.suspendTransitions && !$isUploading ? 0 : 150);
-  const scaleDuration = $derived(transitionDuration === 0 ? 0 : transitionDuration + 100);
+  const { viewerAssets, width, height, suspendTransitions, thumbnail, customThumbnailLayout }: Props = $props();
 </script>
 
 <!-- Image grid -->
@@ -40,6 +33,7 @@
     {@const asset = viewerAsset.asset!}
 
     <!-- note: don't remove data-asset-id - its used by web e2e tests -->
+    <!-- Be careful with $derived values in out:scale, because Svelte can retain DOM nodes -->
     <div
       data-asset-id={asset.id}
       class="absolute"
@@ -47,8 +41,8 @@
       style:inset-inline-start={position.left + 'px'}
       style:width={position.width + 'px'}
       style:height={position.height + 'px'}
-      out:scale|global={{ start: 0.1, duration: scaleDuration }}
-      animate:flip={{ duration: transitionDuration }}
+      out:scale|global={{ start: 0.1, duration: suspendTransitions ? 0 : 250 }}
+      animate:flip={{ duration: suspendTransitions ? 0 : 150 }}
     >
       {@render thumbnail({ asset, position })}
       {@render customThumbnailLayout?.(asset)}