Add deleting progress indicator

- add callback to confirmDelete
- set deleting flag to show progress overlay

src/platform/assets/components/MediaAssetCard.vue

@@ -46,6 +46,18 @@
         @image-loaded="handleImageLoaded"
       />
 
+      <div v-if="isDeleting" class="absolute inset-0 bg-black/50 z-10">
+        <div class="flex items-center justify-center h-full relative">
+          <div
+            class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-white absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          ></div>
+          <i
+            class="icon-[lucide--trash-2] size-6 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          >
+          </i>
+        </div>
+      </div>
+
       <!-- Action buttons overlay (top-left) -->
       <div
         v-if="showActionsOverlay"
@@ -129,6 +141,7 @@
     :show-delete-button="showDeleteButton"
     @zoom="handleZoomClick"
     @asset-deleted="emit('asset-deleted')"
+    @asset-deleting="isDeleting = $event"
   />
 </template>
 
@@ -198,6 +211,7 @@ const contextMenu = ref<InstanceType<typeof MediaAssetContextMenu>>()
 
 const isVideoPlaying = ref(false)
 const showVideoControls = ref(false)
+const isDeleting = ref(false)
 
 // Store actual image dimensions
 const imageDimensions = ref<{ width: number; height: number } | undefined>()
@@ -272,7 +286,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

@@ -55,6 +55,7 @@ const { asset, assetType, fileKind, showDeleteButton } = defineProps<{
 const emit = defineEmits<{
   zoom: []
   'asset-deleted': []
+  'asset-deleting': [boolean]
 }>()
 
 const contextMenu = ref<InstanceType<typeof ContextMenu>>()
@@ -172,7 +173,9 @@ const contextMenuItems = computed<MenuItem[]>(() => {
       icon: 'icon-[lucide--trash-2]',
       command: async () => {
         if (asset) {
-          const success = await actions.confirmDelete(asset)
+          const success = await actions.confirmDelete(asset, (deleting) => {
+            emit('asset-deleting', deleting)
+          })
           if (success) {
             emit('asset-deleted')
           }

src/platform/assets/composables/useMediaAssetActions.ts

@@ -139,7 +139,10 @@ export function useMediaAssetActions() {
    * @param asset The asset to delete
    * @returns true if the asset was deleted, false otherwise
    */
-  const confirmDelete = async (asset: AssetItem): Promise<boolean> => {
+  const confirmDelete = async (
+    asset: AssetItem,
+    onDeleting?: (deleting: boolean) => void
+  ): Promise<boolean> => {
     const assetType = getAssetType(asset)
 
     return new Promise((resolve) => {
@@ -152,8 +155,13 @@ export function useMediaAssetActions() {
           type: 'delete',
           itemList: [asset.name],
           onConfirm: async () => {
-            const success = await deleteAsset(asset, assetType)
-            resolve(success)
+            onDeleting?.(true)
+            try {
+              const success = await deleteAsset(asset, assetType)
+              resolve(success)
+            } finally {
+              onDeleting?.(false)
+            }
           },
           onCancel: () => {
             resolve(false)