feat(gallery): improve performances

app/components/GalleryModal.vue

@@ -9,6 +9,22 @@ const props = defineProps<{
 const emit = defineEmits<{ close: [number] }>();
 
 const currentIndex = ref(props.initialIndex);
+
+const shouldLoad = (index: number) => {
+  return Math.abs(index - currentIndex.value) <= 2;
+};
+
+const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
+  const aspectRatio = image.height / image.width;
+  const placeholderWidth = 600;
+  const placeholderHeight = Math.round(aspectRatio * placeholderWidth);
+  return [placeholderWidth, placeholderHeight, 70, 3] as [
+    width: number,
+    height: number,
+    quality: number,
+    blur: number,
+  ];
+};
 </script>
 
 <template>
@@ -21,7 +37,7 @@ const currentIndex = ref(props.initialIndex);
     <template #body>
       <div class="relative flex flex-col items-center justify-center">
         <UCarousel
-          v-slot="{ item }"
+          v-slot="{ item, index }"
           :start-index="props.initialIndex"
           :items="images"
           :ui="{
@@ -44,8 +60,12 @@ const currentIndex = ref(props.initialIndex);
           class="w-screen h-screen"
           @select="(index) => (currentIndex = index)"
         >
-          <img
+          <NuxtImg
+            v-if="shouldLoad(index)"
             :src="item.url"
+            :width="1920"
+            :placeholder="getPlaceholder(item)"
+            :fetchpriority="index === currentIndex ? 'high' : 'low'"
             class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
           />