From 38c379267558709b68ec2493e474e9b8402e5675 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Mon, 3 Jan 2022 17:50:06 +0100
Subject: [PATCH] Add 'is-loaded' class after image intersects viewport

---
 src/components/MoviesListItem.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/MoviesListItem.vue b/src/components/MoviesListItem.vue
index ab9379c..a933db5 100644
--- a/src/components/MoviesListItem.vue
+++ b/src/components/MoviesListItem.vue
@@ -2,7 +2,7 @@
   <li class="movie-item" :class="{ shortList: shortList }">
     <figure class="movie-item__poster">
       <img
-        class="movie-item__img is-loaded"
+        class="movie-item__img"
         ref="poster-image"
         @click="openMoviePopup(movie.id, movie.type)"
         :alt="posterAltText"
@@ -92,6 +92,7 @@ export default {
         if (entry.isIntersecting && this.observed == false) {
           const lazyImage = entry.target;
           lazyImage.src = lazyImage.dataset.src;
+          lazyImage.className = lazyImage.className + " is-loaded";
           this.observed = true;
         }
       });