(admin) defer display of images in storage view

components/admin/AdminStorageItem.vue

@@ -9,21 +9,31 @@ const props = defineProps<{
 
 const chunk = computed(() => props.itemKey.replace(/^.+:/, ''));
 
+const isOpen = ref(false);
+
 const contentUrl = computed(() => `/api/admin/storage/items/${props.itemKey}`);
 
 const contentAsyncData = useFetch(contentUrl.value, {
     immediate: false,
 });
 
+watch(isOpen, async () => {
+    if (isOpen.value) {
+        await contentAsyncData.execute();
+    }
+});
+
 const adminStorageRefresh = inject(adminStorageRefreshInjectionKey);
 const dialogue = useDialogue();
 const remove = async () => {
     try {
         await dialogue.confirm(`Are you sure you want to remove ${props.itemKey}?`, 'danger');
     } catch (error) {
-        console.error(error);
+        if (error === undefined) {
             return;
         }
+        throw error;
+    }
     await $fetch(contentUrl.value, { method: 'DELETE' });
     if (adminStorageRefresh) {
         await adminStorageRefresh();
@@ -32,7 +42,7 @@ const remove = async () => {
 </script>
 
 <template>
-    <details @toggle="$event.newState === 'open' ? contentAsyncData.execute() : undefined">
+    <details @toggle="isOpen = $event.newState === 'open'">
         <summary>
             <span class="py-1 d-inline-flex justify-content-between align-items-start">
                 <code>{{ chunk }}</code>
@@ -46,8 +56,15 @@ const remove = async () => {
         </summary>
 
         <div class="ps-3">
-            <img v-if="itemKey.endsWith('.png')" :src="contentUrl" :alt="`Image content for storage key ${itemKey}`">
+            <template v-if="contentAsyncData.status.value === 'success'">
+                <img
+                    v-if="itemKey.endsWith('.png')"
+                    :src="contentUrl"
+                    :alt="`Image content for storage key ${itemKey}`"
+                >
                 <pre v-else class="mb-0">{{ contentAsyncData.data }}</pre>
+            </template>
+            <Spinner v-else />
         </div>
     </details>
 </template>