From 40a57edaf98eb182ac83ba3d5b40372f21489880 Mon Sep 17 00:00:00 2001
From: Valentyne Stigloher <pixunil@posteo.eu>
Date: Mon, 17 Mar 2025 12:24:02 +0100
Subject: [PATCH] (admin) defer display of images in storage view

---
 components/admin/AdminStorageItem.vue | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/components/admin/AdminStorageItem.vue b/components/admin/AdminStorageItem.vue
index 1ba948860..9c65d2a0c 100644
--- a/components/admin/AdminStorageItem.vue
+++ b/components/admin/AdminStorageItem.vue
@@ -9,20 +9,30 @@ 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);
-        return;
+        if (error === undefined) {
+            return;
+        }
+        throw error;
     }
     await $fetch(contentUrl.value, { method: 'DELETE' });
     if (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}`">
-            <pre v-else class="mb-0">{{ contentAsyncData.data }}</pre>
+            <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>