Fix progressive images not setting loaded state if pre-loaded

Author: adamgraham

src/components/Lightbox.tsx

@@ -42,6 +42,7 @@ export default function Lightbox({
       : null;
   const imageProps =
     typeof currentImage === 'object' ? currentImage : { src: currentImage };
+
   const previousImage = useCallback(() => {
     if (onChangeImage) {
       if (loop) {
@@ -51,6 +52,7 @@ export default function Lightbox({
       }
     }
   }, [currentIndex, images, loop, onChangeImage]);
+
   const nextImage = useCallback(() => {
     if (onChangeImage) {
       if (loop) {
@@ -60,8 +62,10 @@ export default function Lightbox({
       }
     }
   }, [currentIndex, images, loop, onChangeImage]);
+
   useKeyboardEvent('ArrowLeft', previousImage);
   useKeyboardEvent('ArrowRight', nextImage);
+
   return (
     <Overlay
       animated={animated}

src/components/ProgressiveImage.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 
 export type ProgressiveImageProps = {
@@ -42,6 +42,10 @@ export default function ProgressiveImage({
 }: ProgressiveImageProps) {
   const [loaded, setLoaded] = useState(false);
 
+  const ref = useCallback((img: HTMLImageElement) => {
+    setLoaded(img.complete);
+  }, []);
+
   useEffect(() => {
     if (loaded && onLoad) {
       onLoad();
@@ -74,6 +78,7 @@ export default function ProgressiveImage({
         onLoad={e => setLoaded(true)}
         width={width || imageProps.width}
         height={height || imageProps.height}
+        ref={ref}
         src={src}
       />
       {placeholder && (