From b8f135a45467496942155f70ee731d40605f7503 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 6 Sep 2024 15:23:22 +0200
Subject: [PATCH] chore: thumbnail loading optimization

---
 src/components/Global/StockList.vue        | 13 ++-----------
 src/components/Global/VehicleThumbnail.vue | 17 +++++++----------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index a85ea62..3500fc4 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -8,7 +8,7 @@
         :key="i"
       >
         <div class="stock-text">
-          <p>{{ vehicleName.replace(/_/g, ' ') }}</p>
+          <div>{{ vehicleName.replace(/_/g, ' ') }}</div>
           <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
         </div>
 
@@ -189,20 +189,11 @@ ul > li > span {
   cursor: crosshair;
 }
 
-img {
-  max-height: 60px;
-  width: auto;
-  height: auto;
-}
-
-img.traction-only {
-  max-width: 100%;
-}
-
 .stock-text {
   text-align: center;
   color: #aaa;
   font-size: 0.9em;
   margin-bottom: 0.25em;
+  padding: 0.25em 0;
 }
 </style>
diff --git a/src/components/Global/VehicleThumbnail.vue b/src/components/Global/VehicleThumbnail.vue
index 206dfa6..acdfc5e 100644
--- a/src/components/Global/VehicleThumbnail.vue
+++ b/src/components/Global/VehicleThumbnail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="vehicle-thumbnail">
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus">
     <img
       ref="imgRef"
       :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
@@ -7,7 +7,6 @@
       loading="lazy"
       data-tooltip-type="VehiclePreviewTooltip"
       :data-tooltip-content="vehicleName"
-      :data-load-status="imgStatus"
       @error="onImageError"
       @load="onImageLoad"
     />
@@ -15,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, Ref, ref } from 'vue';
+import { Ref, ref } from 'vue';
 
 const props = defineProps({
   vehicleName: { type: String, required: true },
@@ -29,8 +28,6 @@ const imgRef = ref(null) as Ref<HTMLElement | null>;
 const imgStatus = ref('loading');
 
 function onImageError(event: Event) {
-  console.log('error');
-
   (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
   imgStatus.value = 'error';
 }
@@ -47,15 +44,15 @@ function onImageLoad() {
 <style lang="scss" scoped>
 .vehicle-thumbnail {
   position: relative;
+
+  &[data-load-status='loading'] {
+    min-height: 60px;
+    min-width: 200px;
+  }
 }
 
 img {
   opacity: 0;
   transition: opacity 100ms ease-in-out;
-
-  &[data-load-status='loading'] {
-    min-height: 60px;
-    min-width: 150px;
-  }
 }
 </style>