From d3406046ae7364d2d6b499d82acbd677cb553bcf Mon Sep 17 00:00:00 2001
From: "Edward Tirado Jr." <ed@etdevelopment.net>
Date: Mon, 20 Apr 2026 23:47:35 -0500
Subject: [PATCH] fixed loading loop when image not found

---
 app/components/movie-list.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/components/movie-list.vue b/app/components/movie-list.vue
index 804c9d0..4dd50a6 100644
--- a/app/components/movie-list.vue
+++ b/app/components/movie-list.vue
@@ -75,9 +75,12 @@ const movieSearch = () => {
   filteredMovies.value = sortMovies(filtered);
 }
 
-const handleImageError = (e: Event, movieId: number) => {
-  (e.target as HTMLImageElement).src = posterPlaceholder;
-  imageErrors.value.add(movieId);
+const handleImageError = (_e: Event, movieId: number) => {
+  imageErrors.value = new Set(imageErrors.value).add(movieId);
+}
+
+const getPosterSrc = (movie: Movie) => {
+  return imageErrors.value.has(movie.id) ? posterPlaceholder : movie.poster;
 }
 
 const isSortActive = (field: SortField, direction: SortDirection): boolean => {
@@ -130,7 +133,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
         <div class="movie-poster-container">
           <NuxtImg
               :class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
-              :src="movie.poster"
+              :src="getPosterSrc(movie)"
               alt=""
               class="movie-poster"
               loading="lazy"