From 8aead4b2b1a619fd9678407cca2f2114bb503e54 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 5 Mar 2026 21:05:54 -0600
Subject: [PATCH] fix useImageLoaded hook running on every render

---
 web/src/hooks/use-image-loaded.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/hooks/use-image-loaded.ts b/web/src/hooks/use-image-loaded.ts
index df030550a..653fb1538 100644
--- a/web/src/hooks/use-image-loaded.ts
+++ b/web/src/hooks/use-image-loaded.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 const useImageLoaded = (): [
   React.RefObject<HTMLImageElement | null>,
@@ -8,15 +8,15 @@ const useImageLoaded = (): [
   const [loaded, setLoaded] = useState(false);
   const ref = useRef<HTMLImageElement>(null);
 
-  const onLoad = () => {
+  const onLoad = useCallback(() => {
     setLoaded(true);
-  };
+  }, []);
 
   useEffect(() => {
-    if (ref.current && ref.current?.complete) {
+    if (ref.current?.complete) {
       onLoad();
     }
-  });
+  }, [onLoad]);
 
   return [ref, loaded, onLoad];
 };