fix: carousel image lightbox
This commit is contained in:
@@ -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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user