Add asset deletion progress indicator (#7906)

## Summary

Currently the delay between user action and visual response is too long
and it looks like it hasn't worked.
This adds a visual indicator that the action is processing.

## Changes

- add loading indicator while asset is deleting

## Screenshots (if applicable)
(Artifically delayed deletion)


https://github.com/user-attachments/assets/a9a8b9fe-896d-4666-b643-ec8b990f6444

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7906-Add-asset-deletion-progress-indicator-2e26d73d365081ed82b8e770ba3d0615)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: Jin Yi <jin12cc@gmail.com>

src/platform/assets/components/MediaAssetCard.vue

@@ -48,6 +48,10 @@
         @image-loaded="handleImageLoaded"
       />
 
+      <LoadingOverlay :loading="isDeleting">
+        <i class="icon-[lucide--trash-2] size-5" />
+      </LoadingOverlay>
+
       <!-- Action buttons overlay (top-left) -->
       <div
         v-if="showActionsOverlay"
@@ -130,7 +134,9 @@ import { useElementHover } from '@vueuse/core'
 import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
 
 import IconGroup from '@/components/button/IconGroup.vue'
+import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import Button from '@/components/ui/button/Button.vue'
+import { useAssetsStore } from '@/stores/assetsStore'
 import {
   formatDuration,
   formatSize,
@@ -167,6 +173,13 @@ const { asset, loading, selected, showOutputCount, outputCount } = defineProps<{
   outputCount?: number
 }>()
 
+const assetsStore = useAssetsStore()
+
+// Get deletion state from store
+const isDeleting = computed(() =>
+  asset ? assetsStore.isAssetDeleting(asset.id) : false
+)
+
 const emit = defineEmits<{
   click: []
   zoom: [asset: AssetItem]
@@ -252,7 +265,7 @@ const metaInfo = computed(() => {
 })
 
 const showActionsOverlay = computed(() => {
-  if (loading || !asset) return false
+  if (loading || !asset || isDeleting.value) return false
   return isHovered.value || selected || isVideoPlaying.value
 })
 

src/platform/assets/components/MediaAssetContextMenu.vue

@@ -247,8 +247,8 @@ const contextMenuItems = computed<MenuItem[]>(() => {
       icon: 'icon-[lucide--trash-2]',
       command: async () => {
         if (asset) {
-          const success = await actions.confirmDelete(asset)
-          if (success) {
+          const confirmed = await actions.deleteAssets(asset)
+          if (confirmed) {
             emit('asset-deleted')
           }
         }