From 6083a485de891bf1627b439c81cdc9d0ee286e8e Mon Sep 17 00:00:00 2001
From: gosangam <sangam4742@gmail.com>
Date: Sun, 9 Aug 2026 12:40:50 +0530
Subject: [PATCH] fix: carousel image lightbox

---
 components/social/post/post-image-lightbox.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/components/social/post/post-image-lightbox.tsx b/components/social/post/post-image-lightbox.tsx
index b7806658..f3cfe3ea 100644
--- a/components/social/post/post-image-lightbox.tsx
+++ b/components/social/post/post-image-lightbox.tsx
@@ -138,7 +138,7 @@ export function PostImageLightbox({
           }}
           className="absolute inset-4 sm:inset-12 flex overflow-x-auto snap-x snap-mandatory overscroll-contain [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
         >
-          {images.map((img) => (
+          {images.map((img, i) => (
             <div
               key={img.id}
               className="relative h-full w-full shrink-0 snap-center"
@@ -150,6 +150,15 @@ export function PostImageLightbox({
                 sizes="100vw"
                 className="object-contain"
                 unoptimized
+                // next/image defaults to loading="lazy". That's right for the
+                // feed, but wrong here: this only mounts once already open, so
+                // every slide is on (or one swipe from) screen. Left lazy, the
+                // browser waits for the intersection heuristic before it even
+                // starts — which is the pause you'd see on open despite the
+                // bytes already sitting in cache from the card.
+                loading="eager"
+                // The slide being viewed outranks its neighbours in the queue.
+                fetchPriority={i === index ? "high" : "auto"}
               />
             </div>
           ))}