feat(gallery): improve performances

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
-//       currently, if lane count changes, the animation is being replayed and it's shit
+const { data: images } = await useAsyncData(
+  "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 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 getAspectRatio = (image: InternalApi["/api/gallery"]["get"][number]) => {
+  return (image.height / image.width) * 100;
 };
-
-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) => {
-        if (index === 0) return 150;
-        return 330;
-      },
+      estimateSize: 510,
     }"
     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="{
-          '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`,
-        }"
+        class="relative overflow-hidden rounded-sm cursor-pointer"
+        :style="{ paddingBottom: `${getAspectRatio(image)}%` }"
         @click="openModal(index)"
       >
-        <img
+        <div class="absolute inset-0 bg-neutral-900 animate-pulse" />
+        <NuxtImg
           :src="image.url"
-          loading="lazy"
-          class="w-full h-auto block brightness-80 hover:brightness-100 transition-all"
+          :width="50"
+          :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>