chore: minor thumbnail loading changes

src/components/Global/StockList.vue

@@ -1,21 +1,11 @@
 <template>
   <div class="stock-list">
     <ul>
-      <li
-        v-for="(
-          { vehicleName, vehicleCargo, images, imagesFallbacks, vehicleString }, i
-        ) in thumbnailNames"
-        :key="i"
-      >
-        <div class="stock-text">
-          <div>{{ vehicleName.replace(/_/g, ' ') }}</div>
-          <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
-        </div>
-
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames" :key="i">
         <span>
           <VehicleThumbnail
             v-for="(thumbnailImage, imageIndex) in images"
-            :vehicle-name="vehicleString"
+            :vehicle-string="vehicleString"
             :img-name="thumbnailImage"
             :fallback-name="imagesFallbacks[imageIndex]"
           />
@@ -59,13 +49,12 @@ export default defineComponent({
       return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
         .filter((v) => v.length != 0)
         .map((vehicleString) => {
-          const [vehicleName, vehicleCargo] = vehicleString.split(':');
+          const [vehicleName] = vehicleString.split(':');
 
           const vehicleThumbnailData = {
             images: [] as string[],
             imagesFallbacks: [] as string[],
             vehicleName,
-            vehicleCargo,
             vehicleString
           };
 
@@ -187,12 +176,4 @@ ul > li > span {
   align-items: flex-end;
   cursor: crosshair;
 }
-
-.stock-text {
-  text-align: center;
-  color: #aaa;
-  font-size: 0.9em;
-  margin-bottom: 0.25em;
-  padding: 0.25em 0;
-}
 </style>

src/components/Global/VehicleThumbnail.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="vehicle-thumbnail" :data-load-status="imgStatus">
+  <div class="vehicle-thumbnail" :data-load-status="imgStatus" ref="thumbRef">
+    <div class="stock-text">
+      <div>{{ vehicleName }}</div>
+      <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
+    </div>
+
     <img
-      ref="imgRef"
       :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
       height="60"
       loading="lazy"
       data-tooltip-type="VehiclePreviewTooltip"
-      :data-tooltip-content="vehicleName"
+      :data-tooltip-content="vehicleString"
       @error="onImageError"
       @load="onImageLoad"
     />
@@ -14,19 +18,21 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 
 const props = defineProps({
-  vehicleName: { type: String, required: true },
+  vehicleString: { type: String, required: true },
   imgName: { type: String, required: true },
   fallbackName: { type: String, required: true },
   placeholderName: String
 });
 
-const imgRef = ref(null) as Ref<HTMLElement | null>;
-
+const thumbRef = ref(null) as Ref<HTMLElement | null>;
 const imgStatus = ref('loading');
 
+const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
+const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
+
 function onImageError(event: Event) {
   (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
   imgStatus.value = 'error';
@@ -37,13 +43,15 @@ function onImageLoad() {
     imgStatus.value = 'loaded';
   }
 
-  if (imgRef.value) imgRef.value.style.opacity = '1';
+  if (thumbRef.value) thumbRef.value.style.opacity = '1';
 }
 </script>
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
   position: relative;
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
 
   &[data-load-status='loading'] {
     min-height: 60px;
@@ -51,8 +59,11 @@ function onImageLoad() {
   }
 }
 
-img {
-  opacity: 0;
-  transition: opacity 100ms ease-in-out;
+.stock-text {
+  text-align: center;
+  color: #aaa;
+  font-size: 0.9em;
+  margin-bottom: 0.25em;
+  padding: 0.25em 0;
 }
 </style>