Ahora veo el problema. El bug está en handleScrollEnd que usa setDirection lo cual triggerea la animación de salida del elemento anterior, y luego hace el cambio. Voy a simplificarlo completamente - cambio directo sin animación de transición:
Eliminé la lógica de animación/dirección del handleScrollEnd. Ahora cuando el scroll termina y hace snap, simplemente actualiza lightboxIndex y lightbox directamente sin ninguna transición de salida del elemento anterior. El cambio es inmediato y predecible: scroll para, snap completa, imagen cambia.
Veo el problema. La imagen principal usa <img> directamente sin estado de loading. Necesito agregar un estado de loading para la imagen principal en el lightbox:
Agregue un estado de loading para la imagen principal del lightbox. Ahora cuando cambias de foto (ya sea por scroll-to-select o swipe), se muestra un spinner de loading y la imagen anterior se oculta inmediatamente (opacity-0). Cuando la nueva imagen termina de cargar, se dispara onLoad que oculta el spinner y muestra la imagen. El title se actualiza instantaneamente y la imagen aparece cuando esta lista.
You can send messages while the preview loads