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"
           />
 

app/pages/gallery.vue

@@ -1,70 +1,54 @@
 <script setup lang="ts">
 import { LazyGalleryModal } from "#components";
 import type { InternalApi } from "nitropack/types";
+import { useElementSize } from "@vueuse/core";
 
-// TODO: only play intro anim ONCE
+const { data: images } = await useAsyncData(
-//       currently, if lane count changes, the animation is being replayed and it's shit
+  "gallery",
+  () => $fetch("/api/gallery"),
+  {
+    transform: (data) =>
+      data
+        .map((photo) => ({ photo, sort: Math.random() }))
+        .sort((a, b) => a.sort - b.sort)
+        .map(({ photo }) => photo),
+  },
+);
 
-const images = ref<InternalApi["/api/gallery"]["get"]>([]);
+const scrollArea = useTemplateRef("scrollArea");
+const { width } = useElementSize(() => scrollArea.value?.$el);
 
-const resized = ref(false);
+const lanes = computed(() => {
+  if (width.value < 768) return 1;
+  if (width.value < 1152) return 2;
+  return 3;
+});
 
-const scrollArea = ref();
 const overlay = useOverlay();
 const galleryModal = overlay.create(LazyGalleryModal);
+const isModalOpen = ref(false);
 
 const openModal = async (index: number) => {
+  if (!images.value) return;
+  isModalOpen.value = true;
   const instance = galleryModal.open({
     images: images.value,
     initialIndex: index,
   });
 
   const newIndex: number = await instance.result;
+  isModalOpen.value = false;
   if (newIndex !== index && scrollArea.value?.virtualizer) {
     scrollArea.value.virtualizer.scrollToIndex(newIndex, {
       align: "center",
-      behavior: "instant",
+      behavior: "auto",
     });
   }
 };
 
-const lanes = ref(3);
+const getAspectRatio = (image: InternalApi["/api/gallery"]["get"][number]) => {
-
+  return (image.height / image.width) * 100;
-const updateLanes = () => {
-  const previousValue = lanes.value;
-  if (window.innerWidth < 768) {
-    lanes.value = 1;
-  } else if (window.innerWidth < 1152) {
-    lanes.value = 2;
-  } else {
-    lanes.value = 3;
-  }
-
-  if (previousValue !== lanes.value) {
-    resized.value = true;
-  }
 };
-
-const { data: galleryPhotos } = await useAsyncData("gallery", () =>
-  $fetch("/api/gallery"),
-);
-
-onMounted(() => {
-  if (!galleryPhotos.value) return;
-
-  // shuffle
-  images.value = galleryPhotos.value
-    .map((photo) => ({ photo, sort: Math.random() }))
-    .sort((a, b) => a.sort - b.sort)
-    .map(({ photo }) => photo);
-
-  updateLanes();
-  window.addEventListener("resize", updateLanes);
-});
-
-onUnmounted(() => {
-  window.removeEventListener("resize", updateLanes);
-});
 </script>
 
 <template>
@@ -74,10 +58,7 @@ onUnmounted(() => {
     :virtualize="{
       lanes,
       gap: 24,
-      estimateSize: (index) => {
+      estimateSize: 510,
-        if (index === 0) return 150;
-        return 330;
-      },
     }"
     class="p-6 lg:p-8 xl:p-10 2xl:p-12 h-screen bg-[#0a0a0a] text-white font-[JetBrains_Mono]"
   >
@@ -104,69 +85,33 @@ onUnmounted(() => {
 
       <div
         v-else
-        class="relative overflow-hidden rounded-sm cursor-pointer opacity-0"
+        class="relative overflow-hidden rounded-sm cursor-pointer"
-        :class="{
+        :style="{ paddingBottom: `${getAspectRatio(image)}%` }"
-          'fade-in-focus-up': (index % lanes) % 2 === 1,
-          'fade-in-focus-down': (index % lanes) % 2 === 0,
-          'no-anim': resized,
-        }"
-        :style="{
-          animationDelay: `${(index % lanes) * 300}ms`,
-        }"
         @click="openModal(index)"
       >
-        <img
+        <div class="absolute inset-0 bg-neutral-900 animate-pulse" />
+        <NuxtImg
           :src="image.url"
-          loading="lazy"
+          :width="50"
-          class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
+          :height="Math.round(getAspectRatio(image) / 2)"
+          class="absolute inset-0 w-full h-full object-cover blur-sm scale-105"
         />
+        <NuxtImg
+          v-slot="{ src, isLoaded, imgAttrs }"
+          :src="image.url"
+          :width="600"
+          :custom="true"
+          :fetchpriority="isModalOpen ? 'low' : 'auto'"
+        >
+          <img
+            v-if="isLoaded"
+            v-bind="imgAttrs"
+            :src="src"
+            loading="lazy"
+            class="absolute inset-0 w-full h-full object-cover brightness-80 hover:brightness-100 transition-all"
+          />
+        </NuxtImg>
       </div>
     </template>
   </UScrollArea>
 </template>
-
-<style scoped>
-@keyframes fadeInFocusUp {
-  0% {
-    opacity: 0;
-    transform: translateY(100vh);
-    filter: blur(6px) brightness(0.7);
-  }
-  60% {
-    filter: blur(0px) brightness(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0px) brightness(0.8);
-  }
-}
-
-@keyframes fadeInFocusDown {
-  0% {
-    opacity: 0;
-    transform: translateY(-100vh);
-    filter: blur(6px) brightness(0.7);
-  }
-  60% {
-    filter: blur(0px) brightness(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-    filter: blur(0px) brightness(0.8);
-  }
-}
-
-.fade-in-focus-up {
-  animation: fadeInFocusUp 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.fade-in-focus-down {
-  animation: fadeInFocusDown 4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.no-anim {
-  animation-duration: 0s;
-}
-</style>

nuxt.config.ts

@@ -11,12 +11,20 @@ export default defineNuxtConfig({
     "@nuxtjs/i18n",
     "@tresjs/nuxt",
     "@nuxt/ui",
+    "@nuxt/image",
   ],
   css: ["~/assets/app.css"],
   ssr: false,
+  routeRules: {
+    "/gallery": { ssr: true },
+  },
   i18n: {
     strategy: "no_prefix",
     locales: [{ code: "en", language: "en-US", file: "en.json" }],
     defaultLocale: "en",
   },
+  image: {
+    quality: 80,
+    format: ["webp"],
+  },
 });

package.json

@@ -15,6 +15,7 @@
     "@tresjs/cientos": "^5.1.2",
     "@tresjs/core": "^5.2.0",
     "@tresjs/nuxt": "^5.1.2",
+    "@vueuse/core": "^14.1.0",
     "exifr": "^7.1.3",
     "gsap": "3.13.0",
     "pinia": "3.0.4",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@nuxt/content": "3.8.2",
     "@nuxt/eslint": "1.10.0",
+    "@nuxt/image": "2.0.0",
     "@nuxt/kit": "4.2.1",
     "@nuxt/ui": "4.3.0",
     "@nuxtjs/i18n": "10.2.1",

pnpm-workspace.yaml

@@ -1,6 +1,7 @@
 onlyBuiltDependencies:
-  - "@parcel/watcher"
+  - '@parcel/watcher'
   - better-sqlite3
   - esbuild
+  - sharp
   - unrs-resolver
   - vue-demi

server/api/gallery.get.ts

@@ -12,6 +12,8 @@ const exifSchema = z.object({
   ExposureTime: z.number(),
   ISO: z.number(),
   FocalLength: z.number(),
+  ExifImageWidth: z.number(),
+  ExifImageHeight: z.number(),
 });
 
 export default defineCachedEventHandler(
@@ -40,6 +42,8 @@ export default defineCachedEventHandler(
           return {
             filename,
             url: `/gallery/${filename}`,
+            width: exif.ExifImageWidth,
+            height: exif.ExifImageHeight,
             exif: {
               date: exif.DateTimeOriginal,
               camera: `${exif.Make} ${exif.Model}`,