hello new update

hooks/use-lazy-load.ts

@@ -1,24 +1,32 @@
 import { useState, useEffect } from 'react';
 
-let gameImages: { [id: string]: string } = {};
+// Shared cache and listeners
+const gameImages: { [id: string]: string } = {};
+const listeners: { [id: string]: Set<(url: string) => void> } = {};
 
-export function useThumbnailLazyLoad(img: string) {
-	const [status, setStatus] = useState<string | undefined>(undefined);
+export function useThumbnailURL(img: string) {
+	const [status, setStatus] = useState<string | undefined>(gameImages[img]);
 
 	useEffect(() => {
-		const interval = setInterval(() => {
-			if (gameImages[img]) {
-				setStatus(gameImages[img]);
-				clearInterval(interval);
-			}
-		}, 100);
+		if (!listeners[img]) listeners[img] = new Set();
+		const update = (url: string) => setStatus(url);
+		listeners[img].add(update);
 
-		return () => clearInterval(interval);
-	}, []);
+		// If the image is already available, set it immediately
+		if (gameImages[img]) setStatus(gameImages[img]);
+
+		return () => {
+			listeners[img].delete(update);
+			if (listeners[img].size === 0) delete listeners[img];
+		};
+	}, [img]);
 
 	return status;
 }
 
 export function addThumbnail(id: string, url: string) {
 	gameImages[id] = url;
+	if (listeners[id]) {
+		listeners[id].forEach(cb => cb(url));
+	}
 }