add: frontend preview download

frontend/src/components/ItemDetails.vue

@@ -1,13 +1,17 @@
 <template>
     <div class="flex md6 lg4">
-        <va-inner-loading loading>
-            <va-card id="preview" class="content-container">
-                <img
-                    :src="`${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`"
-                    :alt="`${this.itemDetails.description}`"
-                />
-            </va-card>
-        </va-inner-loading>
+        <va-card id="preview" class="content-container">
+            <va-image
+                :src="`${this.baseURL}/static/previews/${this.itemDetails.fadr}+/${this.itemDetails.internal_id}.bmp`"
+                :alt="`${this.itemDetails.description}`">
+                <template #loader>
+                    <va-progress-circle indeterminate />
+                </template>
+                <template #error>
+                    Image not found! :(
+                </template>
+            </va-image>
+        </va-card>
         <va-card id="description" class="content-container">
             <va-card-title>Description</va-card-title>
             <va-card-content>{{ itemDetails.description }}</va-card-content>
@@ -21,8 +25,7 @@
                         <table class="va-table va-table--striped">
                             <tbody>
                                 <tr
-                                    v-for="[key, value] of Object.entries(this.itemDetails).filter(([k, _v]) => !(this.hidden.includes(k)))"
-                                >
+                                    v-for="[key, value] of Object.entries(this.itemDetails).filter(([k, _v]) => !(this.hidden.includes(k)))">
                                     <td>{{ key }}</td>
                                     <td>{{ value }}</td>
                                 </tr>

frontend/src/main.js

@@ -22,9 +22,10 @@ import {
     VaCard,
     VaCardTitle,
     VaCardContent,
-    VaInnerLoading,
+    VaImage,
     VaSelect,
     VaPagination,
+    VaProgressCircle,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -61,9 +62,10 @@ app.use(createVuesticEssential({
         VaCard,
         VaCardTitle,
         VaCardContent,
-        VaInnerLoading,
+        VaImage,
         VaSelect,
         VaPagination,
+        VaProgressCircle,
     }
 }));