Show catalog zoom images correct resolution and add spinner in preview catalog item

src/components/ui/VnImg.vue

@@ -67,6 +67,10 @@ const url = computed(() => {
     return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
 });
 
+const zoomUrl = computed(() => {
+    return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.zoomSize}/${props.id}`;
+});
+
 const rounded = computed(() => {
     const roundedMap = {
         none: '',
@@ -114,7 +118,7 @@ const rounded = computed(() => {
 
     <QDialog v-if="props.zoomSize" v-model="showZoom">
         <QImg
-            :src="url"
+            :src="zoomUrl"
             size="full"
             class="img_zoom"
             v-bind="$attrs"

src/pages/Ecomerce/CatalogCard.vue

@@ -27,6 +27,7 @@ const { t } = useI18n();
             :id="item.image"
             height="210px"
             rounded="bottom"
+            zoom-size="1600x900"
         />
         <div
             class="column"
@@ -117,6 +118,7 @@ const { t } = useI18n();
                 height="105px"
                 rounded-borders="full"
                 class="q-mr-md"
+                zoom-size="1600x900"
             />
         </template>
         <template #content>

src/pages/Ecomerce/CatalogView.vue

@@ -180,7 +180,7 @@
             />
         </div>
         <QDialog v-model="showItemDialog" @hide="resetAmounts()">
-            <QCard style="width: 25em" class="column">
+            <QCard v-if="selectedItem" style="width: 25em" class="column">
                 <div class="q-pa-md relative-position">
                     <div class="q-mb-md" style="display: flex">
                         <VnImg
@@ -282,6 +282,7 @@
                     </QBtn>
                 </div>
             </QCard>
+            <QSpinner v-else color="primary" size="3em" :thickness="5" />
         </QDialog>
     </div>
 </template>
@@ -753,11 +754,11 @@ const getSubcategories = async () => {
 const showItem = async item => {
     if (checkGuest()) return;
 
+    showItemDialog.value = true;
     const itemLots = await calcItem(item.id);
     const tags = await getItemTags(item.id);
     item.lots = itemLots;
     item.tags = tags;
-    showItemDialog.value = true;
     selectedItem.value = item;
 };
 
@@ -848,6 +849,7 @@ const onAddLotClick = async lot => {
 };
 
 const resetAmounts = () => {
+    selectedItem.value = null;
     addedItemsAmountAcc.value = {};
     amount.value = 0;
 };