From fb7f8e61892c2881e0fc8ac0bdd4a2afcd4de4d4 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 21 May 2025 13:27:26 -0500
Subject: [PATCH] Use a state to track when face image loads

The naturalWidth and naturalHeight will always be 0 until the image loads. So we use onLoad and a state to track loading and then calculate the area after it has loaded
---
 web/src/pages/FaceLibrary.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/FaceLibrary.tsx b/web/src/pages/FaceLibrary.tsx
index c062066a4..cf3929de9 100644
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -876,6 +876,7 @@ function FaceAttempt({
   onRefresh,
 }: FaceAttemptProps) {
   const { t } = useTranslation(["views/faceLibrary"]);
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   const scoreStatus = useMemo(() => {
     if (data.score >= recognitionConfig.recognition_threshold) {
@@ -896,14 +897,12 @@ function FaceAttempt({
   });
 
   const imageArea = useMemo(() => {
-    if (!imgRef.current) {
+    if (imgRef.current == null || !imageLoaded) {
       return undefined;
     }
 
     return imgRef.current.naturalWidth * imgRef.current.naturalHeight;
-    // only refresh when severity changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imgRef.current]);
+  }, [imageLoaded]);
 
   // api calls
 
@@ -966,9 +965,10 @@ function FaceAttempt({
             : "outline-transparent duration-500",
         )}
       >
-        <div className="relative w-full select-none overflow-hidden rounded-lg *:text-card-foreground">
+        <div className="relative w-full select-none overflow-hidden rounded-lg">
           <img
             ref={imgRef}
+            onLoad={() => setImageLoaded(true)}
             className={cn("size-44", isMobile && "w-full")}
             src={`${baseUrl}clips/faces/train/${data.filename}`}
             onClick={(e) => {