chore: fixed preview image loading

src/components/sections/TrainImageSection.vue

@@ -1,19 +1,22 @@
 <template>
   <section class="train-image-section">
     <div v-if="store.chosenVehicle">
-      <img
-        :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
-        :data-preview-active="store.chosenVehicle !== null"
-        :data-sponsor-only="
-          store.chosenVehicle.sponsorOnlyTimestamp &&
-          store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-        "
-        :data-team-only="store.chosenVehicle.teamOnly"
-        @click="onImageClick"
-        @keydown.enter="onImageClick"
-        @error="onImageError"
-        tabindex="0"
-      />
+      <div class="image-wrapper">
+        <img
+          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
+          :data-preview-active="store.chosenVehicle !== null"
+          :data-sponsor-only="
+            store.chosenVehicle.sponsorOnlyTimestamp &&
+            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+          "
+          :data-team-only="store.chosenVehicle.teamOnly"
+          @click="onImageClick"
+          @keydown.enter="onImageClick"
+          @load="onImageLoad"
+          @error="onImageError"
+          tabindex="0"
+        />
+      </div>
 
       <div class="image-info">
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
@@ -77,6 +80,10 @@ import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
 import { isTractionUnit } from '../../utils/vehicleUtils';
 import imageMixin from '../../mixins/imageMixin';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Ref } from 'vue';
+import { ref } from 'vue';
 
 export default defineComponent({
   mixins: [imageMixin],
@@ -89,9 +96,17 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
+    const { chosenVehicle } = storeToRefs(store);
+
+    const imageStatus = ref('none') as Ref<'none' | 'loading' | 'loaded' | 'error'>;
+
+    watch(chosenVehicle, () => {
+      imageStatus.value = 'loading';
+    });
 
     return {
       store,
+      imageStatus,
       chosenVehicle: computed(() => store.chosenVehicle),
     };
   },
@@ -104,6 +119,11 @@ export default defineComponent({
       if (el.src == '/images/placeholder.jpg') return;
 
       el.src = '/images/placeholder.jpg';
+      this.imageStatus = 'error';
+    },
+
+    onImageLoad(e: Event) {
+      this.imageStatus = 'loaded';
     },
 
     onImageClick(e: Event) {
@@ -132,6 +152,7 @@ export default defineComponent({
   min-height: 250px;
 
   & > div {
+    position: relative;
     max-width: 100%;
     width: 380px;
   }
@@ -154,18 +175,25 @@ img {
   }
 }
 
-.placeholder {
-  height: 250px;
-
-  background-color: $bgColor;
+.image-wrapper {
+  position: relative;
+  min-height: 220px;
 }
 
-.sponsor-only {
-  color: $sponsorColor;
-}
+.loading-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 
-.team-only {
-  color: $teamColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #2b2b2b;
+  padding: 1em;
+  font-size: 1.2em;
 }
 
 .image-info {
@@ -181,6 +209,20 @@ img {
   font-weight: bold;
 }
 
+.placeholder {
+  height: 250px;
+
+  background-color: $bgColor;
+}
+
+.sponsor-only {
+  color: $sponsorColor;
+}
+
+.team-only {
+  color: $teamColor;
+}
+
 @media screen and (max-width: $breakpointMd) {
   .train-image-section {
     justify-content: center;