perf(web): asset delete (#7555)

* perf(web): asset delete

* update asset delete on search page

* don't use arrow function in class

web/src/lib/components/photos-page/asset-grid.svelte

@@ -72,7 +72,7 @@
 
   const trashOrDelete = async (force: boolean = false) => {
     isShowDeleteConfirmation = false;
-    await deleteAssets(!(isTrashEnabled && !force), (assetId) => assetStore.removeAsset(assetId), idsSelectedAssets);
+    await deleteAssets(!(isTrashEnabled && !force), (assetIds) => assetStore.removeAssets(assetIds), idsSelectedAssets);
     assetInteractionStore.clearMultiselect();
   };
 
@@ -169,7 +169,7 @@
         (await handleNext()) || (await handlePrevious()) || handleClose();
 
         // delete after find the next one
-        assetStore.removeAsset(asset.id);
+        assetStore.removeAssets([asset.id]);
         break;
       }
 
@@ -414,7 +414,7 @@
       <slot name="empty" />
     {/if}
     <section id="virtual-timeline" style:height={$assetStore.timelineHeight + 'px'}>
-      {#each $assetStore.buckets as bucket, bucketIndex (bucketIndex)}
+      {#each $assetStore.buckets as bucket (bucket.bucketDate)}
         <IntersectionObserver
           on:intersected={intersectedHandler}
           on:hidden={() => assetStore.cancelBucket(bucket)}

web/src/lib/stores/assets.store.ts

@@ -59,14 +59,14 @@ interface DeleteAsset {
   value: string;
 }
 
-interface TrashAsset {
+interface TrashAssets {
   type: 'trash';
-  value: string;
+  value: string[];
 }
 
 export const photoViewer = writable<HTMLImageElement | null>(null);
 
-type PendingChange = AddAsset | UpdateAsset | DeleteAsset | TrashAsset;
+type PendingChange = AddAsset | UpdateAsset | DeleteAsset | TrashAssets;
 
 export class AssetStore {
   private store$ = writable(this);
@@ -105,7 +105,7 @@ export class AssetStore {
         this.addPendingChanges({ type: 'add', value: asset });
       }),
       websocketEvents.on('on_asset_trash', (ids) => {
-        this.addPendingChanges(...ids.map((id): TrashAsset => ({ type: 'trash', value: id })));
+        this.addPendingChanges({ type: 'trash', value: ids });
       }),
       websocketEvents.on('on_asset_update', (asset) => {
         this.addPendingChanges({ type: 'update', value: asset });
@@ -137,13 +137,13 @@ export class AssetStore {
 
         case 'trash': {
           if (!this.options.isTrashed) {
-            this.removeAsset(value);
+            this.removeAssets(value);
           }
           break;
         }
 
         case 'delete': {
-          this.removeAsset(value);
+          this.removeAssets([value]);
           break;
         }
       }
@@ -363,7 +363,7 @@ export class AssetStore {
 
     const recalculate = asset.fileCreatedAt !== _asset.fileCreatedAt;
     if (recalculate) {
-      this.removeAsset(asset.id);
+      this.removeAssets([asset.id]);
       this.addAssetToBucket(_asset);
       return;
     }
@@ -373,33 +373,29 @@ export class AssetStore {
   }
 
   removeAssets(ids: string[]) {
-    // TODO: this could probably be more efficient
-    for (const id of ids) {
-      this.removeAsset(id);
-    }
-  }
+    const idSet = new Set(ids);
+    this.assets = this.assets.filter((asset) => !idSet.has(asset.id));
 
-  removeAsset(id: string) {
-    this.assets = this.assets.filter((asset) => asset.id !== id);
-    delete this.assetToBucket[id];
-
-    for (let index = 0; index < this.buckets.length; index++) {
+    // Iterate in reverse to allow array splicing.
+    for (let index = this.buckets.length - 1; index >= 0; index--) {
       const bucket = this.buckets[index];
-      for (let index_ = 0; index_ < bucket.assets.length; index_++) {
+      for (let index_ = bucket.assets.length - 1; index_ >= 0; index_--) {
         const asset = bucket.assets[index_];
-        if (asset.id !== id) {
+        if (!idSet.has(asset.id)) {
           continue;
         }
 
         bucket.assets.splice(index_, 1);
-        if (bucket.assets.length === 0) {
+        bucket.bucketCount = bucket.assets.length;
+        if (bucket.bucketCount === 0) {
           this.buckets.splice(index, 1);
         }
 
-        this.emit(true);
-        return;
+        delete this.assetToBucket[asset.id];
       }
     }
+
+    this.emit(false);
   }
 
   async getPreviousAssetId(assetId: string): Promise<string | null> {

web/src/lib/utils/actions.ts

@@ -2,7 +2,7 @@ import { notificationController, NotificationType } from '$lib/components/shared
 import { deleteAssets as deleteBulk } from '@immich/sdk';
 import { handleError } from './handle-error';
 
-export type OnDelete = (assetId: string) => void;
+export type OnDelete = (assetIds: string[]) => void;
 export type OnRestore = (ids: string[]) => void;
 export type OnArchive = (ids: string[], isArchived: boolean) => void;
 export type OnFavorite = (ids: string[], favorite: boolean) => void;
@@ -11,9 +11,7 @@ export type OnStack = (ids: string[]) => void;
 export const deleteAssets = async (force: boolean, onAssetDelete: OnDelete, ids: string[]) => {
   try {
     await deleteBulk({ assetBulkDeleteDto: { ids, force } });
-    for (const id of ids) {
-      onAssetDelete(id);
-    }
+    onAssetDelete(ids);
 
     notificationController.show({
       message: `${force ? 'Permanently deleted' : 'Trashed'} ${ids.length} assets`,

web/src/routes/(user)/albums/[albumId]/+page.svelte

@@ -328,12 +328,6 @@
     }
   };
 
-  const handleRemoveAssets = (assetIds: string[]) => {
-    for (const assetId of assetIds) {
-      assetStore.removeAsset(assetId);
-    }
-  };
-
   const handleCloseSelectAssets = () => {
     viewMode = ViewMode.VIEW;
     timelineInteractionStore.clearMultiselect();
@@ -434,10 +428,10 @@
           {/if}
           <DownloadAction menuItem filename="{album.albumName}.zip" />
           {#if isOwned || isAllUserOwned}
-            <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
+            <RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => assetStore.removeAssets(assetIds)} />
           {/if}
           {#if isAllUserOwned}
-            <DeleteAssets menuItem onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+            <DeleteAssets menuItem onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
             <ChangeDate menuItem />
             <ChangeLocation menuItem />
           {/if}

web/src/routes/(user)/archive/+page.svelte

@@ -28,14 +28,14 @@
 
 {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-    <ArchiveAction unarchive onArchive={(ids) => assetStore.removeAssets(ids)} />
+    <ArchiveAction unarchive onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
     <AssetSelectContextMenu icon={mdiPlus} title="Add">
       <AddToAlbum />
       <AddToAlbum shared />
     </AssetSelectContextMenu>
-    <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+    <DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
       <DownloadAction menuItem />
       <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />

web/src/routes/(user)/favorites/+page.svelte

@@ -31,17 +31,17 @@
 <!-- Multiselection mode app bar -->
 {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
-    <FavoriteAction removeFavorite onFavorite={(ids) => assetStore.removeAssets(ids)} />
+    <FavoriteAction removeFavorite onFavorite={(assetIds) => assetStore.removeAssets(assetIds)} />
     <CreateSharedLink />
     <SelectAllAssets {assetStore} {assetInteractionStore} />
     <AssetSelectContextMenu icon={mdiPlus} title="Add">
       <AddToAlbum />
       <AddToAlbum shared />
     </AssetSelectContextMenu>
-    <DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
+    <DeleteAssets onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
       <DownloadAction menuItem />
-      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => assetStore.removeAssets(ids)} />
+      <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
       <ChangeDate menuItem />
       <ChangeLocation menuItem />
     </AssetSelectContextMenu>

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -443,11 +443,11 @@
         <AddToAlbum />
         <AddToAlbum shared />
       </AssetSelectContextMenu>
-      <DeleteAssets onAssetDelete={(assetId) => $assetStore.removeAsset(assetId)} />
+      <DeleteAssets onAssetDelete={(assetIds) => $assetStore.removeAssets(assetIds)} />
       <AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
         <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
-        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
+        <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(assetIds) => $assetStore.removeAssets(assetIds)} />
         <MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
         <ChangeDate menuItem />
         <ChangeLocation menuItem />

web/src/routes/(user)/photos/+page.svelte

@@ -61,14 +61,14 @@
     </AssetSelectContextMenu>
     <DeleteAssets
       on:escape={() => (handleEscapeKey = true)}
-      onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
+      onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)}
     />
     <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
       <FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
       <DownloadAction menuItem />
-      <ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
+      <ArchiveAction menuItem onArchive={(assetIds) => assetStore.removeAssets(assetIds)} />
       {#if $selectedAssets.size > 1}
-        <StackAction onStack={(ids) => assetStore.removeAssets(ids)} />
+        <StackAction onStack={(assetIds) => assetStore.removeAssets(assetIds)} />
       {/if}
       <ChangeDate menuItem />
       <ChangeLocation menuItem />

web/src/routes/(user)/search/+page.svelte

@@ -95,8 +95,9 @@
   $: isAllArchived = [...selectedAssets].every((asset) => asset.isArchived);
   $: isAllFavorite = [...selectedAssets].every((asset) => asset.isFavorite);
 
-  const onAssetDelete = (assetId: string) => {
-    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
+  const onAssetDelete = (assetIds: string[]) => {
+    const assetIdSet = new Set(assetIds);
+    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => !assetIdSet.has(a.id));
   };
   const handleSelectAll = () => {
     selectedAssets = new Set(searchResultAssets);

web/src/routes/(user)/trash/+page.svelte

@@ -65,8 +65,8 @@
 {#if $isMultiSelectState}
   <AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
     <SelectAllAssets {assetStore} {assetInteractionStore} />
-    <DeleteAssets force onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
-    <RestoreAssets onRestore={(ids) => assetStore.removeAssets(ids)} />
+    <DeleteAssets force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
+    <RestoreAssets onRestore={(assetIds) => assetStore.removeAssets(assetIds)} />
   </AssetSelectControlBar>
 {/if}