try refs

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -37,6 +37,27 @@ type Preview = {
   end: number;
 };
 
+const useImageLoaded = (): [
+  React.RefObject<HTMLImageElement>,
+  boolean,
+  () => void,
+] => {
+  const [loaded, setLoaded] = useState(false);
+  const ref = useRef<HTMLImageElement>(null);
+
+  const onLoad = () => {
+    setLoaded(true);
+  };
+
+  useEffect(() => {
+    if (ref.current && ref.current?.complete) {
+      onLoad();
+    }
+  });
+
+  return [ref, loaded, onLoad];
+};
+
 export default function PreviewThumbnailPlayer({
   review,
   relevantPreview,
@@ -50,7 +71,6 @@ export default function PreviewThumbnailPlayer({
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>();
   const [playback, setPlayback] = useState(false);
   const [progress, setProgress] = useState(0);
-  const [imgLoaded, setImgLoaded] = useState(false);
 
   const playingBack = useMemo(() => playback, [playback, autoPlayback]);
 
@@ -95,6 +115,8 @@ export default function PreviewThumbnailPlayer({
     [hoverTimeout, review]
   );
 
+  const [imgRef, imgLoaded, onImgLoad] = useImageLoaded();
+
   // date
 
   const formattedDate = useFormattedTimestamp(
@@ -126,6 +148,7 @@ export default function PreviewThumbnailPlayer({
           )}
           <div className={`${imgLoaded ? "visible" : "invisible"}`}>
             <img
+              ref={imgRef}
               className={`w-full h-full transition-opacity ${
                 playingBack ? "opacity-0" : "opacity-100"
               }`}
@@ -135,7 +158,7 @@ export default function PreviewThumbnailPlayer({
               )}`}
               loading="lazy"
               onLoad={() => {
-                setImgLoaded(true);
+                onImgLoad();
               }}
             />