| 8 | let logoRequestTimer = null; |
| 9 | |
| 10 | const LazyLogo = ({ |
| 11 | logoId, |
| 12 | alt = 'logo', |
| 13 | style = { maxHeight: 18, maxWidth: 55 }, |
| 14 | fallbackSrc = logo, |
| 15 | ...props |
| 16 | }) => { |
| 17 | const [isLoading, setIsLoading] = useState(false); |
| 18 | const [hasError, setHasError] = useState(false); |
| 19 | const fetchAttempted = useRef(new Set()); |
| 20 | const isMountedRef = useRef(true); |
| 21 | |
| 22 | const logos = useLogosStore((s) => s.logos); |
| 23 | const fetchLogosByIds = useLogosStore((s) => s.fetchLogosByIds); |
| 24 | const allowLogoRendering = useLogosStore((s) => s.allowLogoRendering); |
| 25 | |
| 26 | // Determine the logo source |
| 27 | const logoData = logoId && logos[logoId]; |
| 28 | const logoSrc = logoData?.cache_url || fallbackSrc; |
| 29 | |
| 30 | // Cleanup on unmount |
| 31 | useEffect(() => { |
| 32 | return () => { |
| 33 | isMountedRef.current = false; |
| 34 | }; |
| 35 | }, []); |
| 36 | |
| 37 | useEffect(() => { |
| 38 | // Don't start fetching until logo rendering is allowed |
| 39 | if (!allowLogoRendering) return; |
| 40 | |
| 41 | // If we have a logoId but no logo data, add it to the batch request queue |
| 42 | if ( |
| 43 | logoId && |
| 44 | !logoData && |
| 45 | !isLoading && |
| 46 | !hasError && |
| 47 | !fetchAttempted.current.has(logoId) && |
| 48 | isMountedRef.current |
| 49 | ) { |
| 50 | setIsLoading(true); |
| 51 | fetchAttempted.current.add(logoId); |
| 52 | logoRequestQueue.add(logoId); |
| 53 | |
| 54 | // Clear existing timer and set new one to batch requests |
| 55 | if (logoRequestTimer) { |
| 56 | clearTimeout(logoRequestTimer); |
| 57 | } |
| 58 | |
| 59 | logoRequestTimer = setTimeout(async () => { |
| 60 | if (logoRequestQueue.size > 0) { |
| 61 | const idsToFetch = Array.from(logoRequestQueue); |
| 62 | logoRequestQueue.clear(); |
| 63 | |
| 64 | try { |
| 65 | await fetchLogosByIds(idsToFetch); |
| 66 | } catch (error) { |
| 67 | console.warn(`Failed to load logos:`, error); |