[fix] remove lazy-loading for the images on above-the-fold area and remove CSS aspect-ratio and add transitions to lazy-loaded images

.vscode/settings.json

@@ -17,6 +17,7 @@
     "nuxt",
     "nuxtjs",
     "ohmyfetch",
+    "overrider",
     "slidedown",
     "smoothscroll",
     "vercel"

assets/css/components/_card.scss

@@ -10,20 +10,12 @@
 }
 
 .card__img {
-  position: relative;
-  height: 0;
-  padding-top: 150.27%;
-  overflow: hidden;
   background-color: $secondary-color;
   transition: transform 0.3s ease-in-out;
 
   img,
   span {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    // TODO: should add styling for span element
     transform: scale(0.97);
   }
 

components/Card.vue

@@ -5,14 +5,14 @@
       class="card__link"
       :to="{ name: `${media}-id`, params: { id: item.id } }">
       <div class="card__img">
-        <transition v-if="poster" name="fade">
+        <img-transition v-if="poster">
           <nuxt-img
             loading="lazy"
             width="370"
             height="556"
             :alt="name"
             :src="poster" />
-        </transition>
+        </img-transition>
         <span v-else>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -53,8 +53,13 @@
 
 <script>
 import { name, stars } from '~/mixins/Details';
+import ImgTransition from '~/components/ImgTransition';
 
 export default {
+  components: {
+    ImgTransition
+  },
+
   mixins: [
     name,
     stars
@@ -85,12 +90,3 @@ export default {
   }
 };
 </script>
-
-<style scoped>
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .5s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
-</style>

components/CreditsItem.vue

@@ -5,13 +5,14 @@
       class="credits-item__link"
       :to="{ name: 'person-id', params: { id: person.id } }">
       <div class="credits-item__img">
-        <nuxt-img
-          v-if="poster"
-          loading="lazy"
-          width="370"
-          height="556"
-          :alt="person.name"
-          :src="poster" />
+        <img-transition v-if="poster">
+          <nuxt-img
+            loading="lazy"
+            width="370"
+            height="556"
+            :alt="person.name"
+            :src="poster" />
+        </img-transition>
 
         <span v-else>
           <svg
@@ -40,8 +41,13 @@
 </template>
 
 <script>
+import ImgTransition from '~/components/ImgTransition';
 
 export default {
+  components: {
+    ImgTransition
+  },
+
   props: {
     person: {
       type: Object,
@@ -66,20 +72,12 @@ export default {
 }
 
 .credits-item__img {
-  position: relative;
-  height: 0;
-  padding-top: 150.27%;
-  overflow: hidden;
   background-color: $secondary-color;
   transition: transform 0.3s ease-in-out;
 
   img,
   span {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    // TODO: should add styling for span element
     transform: scale(0.97);
   }
 

components/Hero.vue

@@ -34,12 +34,12 @@
             </svg>
           </button>
 
-          <nuxt-img
-            v-if="backdrop"
-            loading="lazy"
-            :class="$style.image"
-            :alt="name"
-            :src="backdrop" />
+          <img-transition v-if="backdrop">
+            <nuxt-img
+              :class="$style.image"
+              :alt="name"
+              :src="backdrop" />
+          </img-transition>
         </div>
       </div>
 
@@ -128,10 +128,12 @@ import {
   trailer
 } from '~/mixins/Details';
 import Modal from '~/components/Modal';
+import ImgTransition from '~/components/ImgTransition';
 
 export default {
   components: {
-    Modal
+    Modal,
+    ImgTransition
   },
 
   mixins: [

components/ImagesItem.vue

@@ -5,19 +5,26 @@
       :href="image.thumbSrc"
       @click.prevent="handleGallery(index)">
       <div :class="$style.image">
-        <nuxt-img
-          v-if="image.thumbSrc"
-          loading="lazy"
-          :src="image.thumbSrc"
-          :width="image.thumbWidth"
-          :height="image.thumbHeight" />
+        <img-transition v-if="image.thumbSrc">
+          <nuxt-img
+            loading="lazy"
+            :src="image.thumbSrc"
+            :width="image.thumbWidth"
+            :height="image.thumbHeight" />
+        </img-transition>
       </div>
     </a>
   </div>
 </template>
 
 <script>
+import ImgTransition from '~/components/ImgTransition';
+
 export default {
+  components: {
+    ImgTransition
+  },
+
   props: {
     image: {
       type: Object,
@@ -51,18 +58,7 @@ export default {
 }
 
 .image {
-  position: relative;
-  height: 0;
-  overflow: hidden;
   background-color: $secondary-color;
-
-  img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
 }
 
 .backdrop {
@@ -87,10 +83,6 @@ export default {
   @media (min-width: 2500px) {
     width: 14.2857143%;
   }
-
-  .image {
-    padding-top: 56.28%;
-  }
 }
 
 .poster {
@@ -115,9 +107,5 @@ export default {
   @media (min-width: 2500px) {
     width: 12.5%;
   }
-
-  .image {
-    padding-top: 150.27%;
-  }
 }
 </style>

components/ImgTransition.vue

@@ -0,0 +1,14 @@
+<template>
+  <transition v-bind="$attrs" name="fade">
+    <slot />
+  </transition>
+</template>
+
+<style scoped>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 1.75s;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>

components/Modal.vue

@@ -44,11 +44,9 @@
               frameborder="0"
               allow="autoplay; encrypted-media"
               allowfullscreen />
-
-            <nuxt-img
-              v-if="type === 'image' && activeItem && activeItem.src"
-              loading="lazy"
-              :src="activeItem.src" />
+            <img-transition v-if="type === 'image' && activeItem && activeItem.src">
+              <nuxt-img :src="activeItem.src" />
+            </img-transition>
           </div>
 
           <div
@@ -109,13 +107,18 @@
 
 <script>
 import { debounce } from '~/mixins/Functions';
+import ImgTransition from '~/components/ImgTransition';
 
 let focusedElBeforeOpen;
 let focusableEls;
 let firstFocusableEl;
 let lastFocusableEl;
 
 export default {
+  components: {
+    ImgTransition
+  },
+
   props: {
     data: {
       type: Array,

components/VideosItem.vue

@@ -7,11 +7,12 @@
       @click.prevent="handleVideo(index)">
 
       <div :class="$style.image">
-        <nuxt-img
-          v-if="video.thumb"
-          loading="lazy"
-          :src="video.thumb"
-          :alt="video.name" />
+        <img-transition v-if="video.thumb">
+          <nuxt-img
+            loading="lazy"
+            :src="video.thumb"
+            :alt="video.name" />
+        </img-transition>
 
         <div
           v-if="video.duration"
@@ -57,7 +58,13 @@
 </template>
 
 <script>
+import ImgTransition from '~/components/ImgTransition';
+
 export default {
+  components: {
+    ImgTransition
+  },
+
   props: {
     video: {
       type: Object,
@@ -171,20 +178,9 @@ export default {
 }
 
 .image {
-  position: relative;
-  height: 0;
-  padding-bottom: 56.25%;
-  overflow: hidden;
   background-color: $secondary-color;
 
-  img,
-  span {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  // TODO: should add styling for span element
 
   span {
     display: flex;

components/movie/MovieInfo.vue

@@ -3,13 +3,13 @@
   <div class="spacing" :class="$style.info">
     <div :class="$style.left">
       <div :class="$style.poster">
-        <nuxt-img
-          v-if="poster"
-          loading="lazy"
-          width="370"
-          height="556"
-          :src="poster"
-          :alt="name" />
+        <img-transition v-if="poster">
+          <nuxt-img
+            width="370"
+            height="556"
+            :src="poster"
+            :alt="name" />
+        </img-transition>
 
         <span v-else>
           <svg
@@ -133,10 +133,12 @@
 <script>
 import { name, directors } from '~/mixins/Details';
 import ExternalLinks from '~/components/ExternalLinks';
+import ImgTransition from '~/components/ImgTransition';
 
 export default {
   components: {
-    ExternalLinks
+    ExternalLinks,
+    ImgTransition
   },
 
   mixins: [
@@ -204,20 +206,9 @@ export default {
 }
 
 .poster {
-  position: relative;
-  height: 0;
-  padding-top: 150.27%;
-  overflow: hidden;
   background-color: $secondary-color;
 
-  img,
-  span {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+  // TODO: should add styling for span element
 
   span {
     display: flex;