From 27b23ccc95005c541e7bc8b2b773a05e7b7ec824 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 1 Aug 2024 19:22:43 +0200
Subject: [PATCH] chore: lazy thumbnail loading & animations

---
 src/components/Global/StockList.vue        | 19 +++----
 src/components/Global/VehicleThumbnail.vue | 64 ++++++++++++++++++++++
 2 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Global/VehicleThumbnail.vue

diff --git a/src/components/Global/StockList.vue b/src/components/Global/StockList.vue
index 2fc1630..d8dedcb 100644
--- a/src/components/Global/StockList.vue
+++ b/src/components/Global/StockList.vue
@@ -11,15 +11,11 @@
         </div>
 
         <span>
-          <img
+          <VehicleThumbnail
             v-for="(thumbnailImage, imageIndex) in images"
-            :data-mouseover="vehicleName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="vehicleName"
-            :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
-            @error="onImageError($event, imagesFallbacks[imageIndex])"
-            @click.stop="() => {}"
-            height="60"
+            :vehicle-name="vehicleName"
+            :img-name="thumbnailImage"
+            :fallback-name="imagesFallbacks[imageIndex]"
           />
         </span>
       </li>
@@ -30,8 +26,11 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import { useApiStore } from '../../store/apiStore';
+import VehicleThumbnail from './VehicleThumbnail.vue';
 
 export default defineComponent({
+  components: { VehicleThumbnail },
+
   props: {
     trainStockList: {
       type: Array as PropType<string[]>,
@@ -143,7 +142,7 @@ export default defineComponent({
           else {
             let fallbackVehicleImage = 'unknown_cargo';
 
-            if (/^(EP|EU)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
+            if (/^(EP|EU|ET|201E)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
             else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
             else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
               fallbackVehicleImage = 'unknown_passenger';
@@ -160,7 +159,7 @@ export default defineComponent({
   },
 
   methods: {
-    onImageError(event: Event, fallbackImage: string) {      
+    onImageError(event: Event, fallbackImage: string) {
       (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
     }
   }
diff --git a/src/components/Global/VehicleThumbnail.vue b/src/components/Global/VehicleThumbnail.vue
new file mode 100644
index 0000000..3b33218
--- /dev/null
+++ b/src/components/Global/VehicleThumbnail.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="vehicle-thumbnail">
+    <img
+      ref="imgRef"
+      :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
+      height="60"
+      loading="lazy"
+      :data-mouseover="vehicleName"
+      :data-tooltip-content="vehicleName"
+      :data-load-status="imgStatus"
+      data-tooltip-type="VehiclePreviewTooltip"
+      @error="onImageError"
+      @load="onImageLoad"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, Ref, ref } from 'vue';
+
+const props = defineProps({
+  vehicleName: { 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 imgState = ref('loading') as Ref<'loading' | 'loaded' | 'error'>;
+const imgStatus = ref('loading');
+
+function onImageError(event: Event) {
+  console.log('error');
+
+  (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
+  imgStatus.value = 'error';
+  // imgState.value = 'error';
+}
+
+function onImageLoad() {
+  if (imgStatus.value != 'error') {
+    imgStatus.value = 'loaded';
+  }
+
+  imgRef.value!.style.opacity = '1';
+}
+</script>
+
+<style lang="scss" scoped>
+.vehicle-thumbnail {
+  position: relative;
+}
+
+img {
+  opacity: 0;
+  transition: opacity 100ms ease-in-out;
+
+  &[data-load-status='loading'] {
+    min-height: 60px;
+    min-width: 150px;
+  }
+}
+</style>