fix(image): fetch images only when list item renders

Author: dvcol

src/components/common/list/ListItem.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { NFlex, NImage, NSkeleton, NTime, NTimelineItem } from 'naive-ui';
 
-import { computed, type PropType, toRefs } from 'vue';
+import { computed, type PropType, toRefs, watch } from 'vue';
 
 import type { ListScrollItem } from '~/components/common/list/ListScroll.model';
 
 import PosterPlaceholder from '~/assets/images/poster-placholder.webp';
 import ListItemPanel from '~/components/common/list/ListItemPanel.vue';
+import { useImageStore, useImageStoreRefs } from '~/stores/data/image.store';
 import { Colors } from '~/styles/colors.style';
+import { findClosestMatch } from '~/utils/math.utils';
 
 const props = defineProps({
   item: {
@@ -76,6 +78,39 @@ const sameYear = computed(() => date.value?.getFullYear() === year);
 const loading = computed(() => item?.value?.loading);
 
 const resolvedPoster = computed(() => item?.value?.poster?.value || poster.value);
+
+const { getImageUrl } = useImageStore();
+const { imageSizes } = useImageStoreRefs();
+
+const imageSize = computed(() =>
+  imageSizes.value?.poster?.length
+    ? findClosestMatch(200, imageSizes.value.poster)
+    : 'original',
+);
+
+watch(
+  item,
+  _item => {
+    if (!_item?.poster && _item?.type && _item?.movie?.ids?.tmdb) {
+      _item.poster = getImageUrl(
+        {
+          id: _item.movie.ids.tmdb,
+          type: _item.type,
+        },
+        imageSize.value,
+      );
+    } else if (!_item?.poster && _item?.type && _item?.show?.ids?.tmdb) {
+      _item.poster = getImageUrl(
+        {
+          id: _item.show.ids.tmdb,
+          type: 'show',
+        },
+        imageSize.value,
+      );
+    }
+  },
+  { immediate: true },
+);
 </script>
 
 <template>

src/components/views/history/HistoryComponent.vue

@@ -11,10 +11,8 @@ import type {
 import FloatingButton from '~/components/common/buttons/FloatingButton.vue';
 import ListScroll from '~/components/common/list/ListScroll.vue';
 import { useHistoryStore, useHistoryStoreRefs } from '~/stores/data/history.store';
-import { useImageStore, useImageStoreRefs } from '~/stores/data/image.store';
 import { useUserSettingsStoreRefs } from '~/stores/settings/user.store';
 import { useI18n } from '~/utils';
-import { findClosestMatch } from '~/utils/math.utils';
 
 const { filteredHistory, pagination, loading, pageSize, belowThreshold } =
   useHistoryStoreRefs();
@@ -42,15 +40,6 @@ onMounted(() => {
   });
 });
 
-const { getImageUrl } = useImageStore();
-const { imageSizes } = useImageStoreRefs();
-
-const size = computed(() =>
-  imageSizes.value?.poster?.length
-    ? findClosestMatch(200, imageSizes.value.poster)
-    : 'original',
-);
-
 const history = computed<ListScrollItem[]>(() => {
   const array = filteredHistory.value;
   if (!array.length) return [];
@@ -62,24 +51,6 @@ const history = computed<ListScrollItem[]>(() => {
     else if ('season' in _item) _item.type = 'season';
     else if ('show' in _item) _item.type = 'show';
 
-    if (!_item?.poster && _item.type && _item?.movie?.ids?.tmdb) {
-      _item.poster = getImageUrl(
-        {
-          id: _item.movie.ids.tmdb,
-          type: _item.type,
-        },
-        size.value,
-      );
-    } else if (!_item?.poster && _item.type && _item?.show?.ids?.tmdb) {
-      _item.poster = getImageUrl(
-        {
-          id: _item.show.ids.tmdb,
-          type: 'show',
-        },
-        size.value,
-      );
-    }
-
     if (!item.watched_at) return _item;
 
     const date: ListScrollItem['date'] = { current: new Date(item.watched_at) };