From 4fe0db144036da5f497e70b8c75893d70db2c71e Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 4 Aug 2022 23:36:19 +0200
Subject: [PATCH] =?UTF-8?q?Poprawki=20z=20=C5=82adowaniem=20obrazk=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  4 ++--
 src/components/TrainImageSection.vue | 31 ++++++++++++++++++++--------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 37dc043..52d4f75 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,9 +6,9 @@
   <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
   <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
 
-  <keep-alive>
+  <!-- <keep-alive> -->
     <RandomizerCard v-if="store.isRandomizerCardOpen" />
-  </keep-alive>
+  <!-- </keep-alive> -->
 
   <div class="app_container">
     <header>
diff --git a/src/components/TrainImageSection.vue b/src/components/TrainImageSection.vue
index c70b0ca..8ca0e8e 100644
--- a/src/components/TrainImageSection.vue
+++ b/src/components/TrainImageSection.vue
@@ -2,8 +2,12 @@
   <section class="train-image-section">
     <div class="train-image__wrapper">
       <div class="train-image__content">
+        <transition name="img-message-anim">
+          <div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
+        </transition>
+
         <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
-        <div class="empty-message" v-if="store.imageLoading">ŁADOWANIE OBRAZU...</div>
+
         <img
           v-if="store.chosenVehicle"
           :src="store.chosenVehicle.imageSrc"
@@ -78,7 +82,7 @@ export default defineComponent({
 
   watch: {
     chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
-      if (vehicle?.type != prevVehicle?.type) {
+      if (vehicle && vehicle.type != prevVehicle?.type) {
         this.store.imageLoading = true;
       }
     },
@@ -122,6 +126,7 @@ export default defineComponent({
   &__content {
     border: 1px solid white;
     position: relative;
+    overflow: hidden;
 
     width: 22em;
     height: 13em;
@@ -143,15 +148,10 @@ export default defineComponent({
     .no-img {
       position: absolute;
       left: 0;
-      top: 0;
+      bottom: 0;
 
-      display: flex;
-      justify-content: center;
-      align-items: flex-end;
-
-      width: 100%;
-      height: 100%;
       padding: 0.3em 0;
+      width: 100%;
     }
 
     .empty-message {
@@ -174,6 +174,19 @@ export default defineComponent({
   }
 }
 
+// Transition animations
+.img-message-anim {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 75ms ease-in 100ms;
+  }
+}
+
 @media screen and (max-width: $breakpointMd) {
   .train-image-section {
     justify-content: center;