dev day #89

frontend/src/components/common/TeamLogo.tsx

@@ -5,6 +5,7 @@ import { getLogoStyle, getLogoClassName } from '../../utils/logoUtils';
 import '../../styles/logos.css';
 import { usePublicSettings } from '../../hooks/usePublicSettings';
 import { assetUrl } from '../../utils/url';
+import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 // Lightweight cached overrides loader
 let __teamOverridesCache: { ts: number; data: { by_id?: Record<string, { name?: string; logo_url?: string }>; by_name?: Record<string, string> } } | null = null;
 const loadTeamOverrides = async (): Promise<{ by_id?: Record<string, { name?: string; logo_url?: string }>; by_name?: Record<string, string> }> => {
@@ -99,8 +100,10 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
   const { data: publicSettings } = usePublicSettings();
+  const [observeRef, inView] = useIntersectionObserver({ threshold: 0.01, rootMargin: '150px 0px', freezeOnceVisible: true });
 
   useEffect(() => {
+    if (!inView) return; // defer fetching until visible
     let mounted = true;
 
     const fetchLogo = async () => {
@@ -191,7 +194,7 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
     return () => {
       mounted = false;
     };
-  }, [teamId, teamName, facrLogo, publicSettings?.club_id, publicSettings?.club_logo_url]);
+  }, [teamId, teamName, facrLogo, publicSettings?.club_id, publicSettings?.club_logo_url, inView]);
 
   // Size mapping
   const sizeMap = {
@@ -208,11 +211,13 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
 
   if (loading) {
     return (
-      <Skeleton
-        {...sizeProps}
-        borderRadius="4px"
-        className="logo-loading"
-      />
+      <div ref={observeRef as any} style={{ display: 'inline-block' }}>
+        <Skeleton
+          {...sizeProps}
+          borderRadius="4px"
+          className="logo-loading"
+        />
+      </div>
     );
   }
 
@@ -226,9 +231,12 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
   const logoClassName = getLogoClassName(logoUrl, isCircular, utilSize);
 
   return (
-    <Image
+    <div ref={observeRef as any} style={{ display: 'inline-block' }}>
+      <Image
       src={(assetUrl(logoUrl || undefined) || logoUrl || '/logo192.png')}
       alt={alt || teamName || 'Team logo'}
+      decoding="async"
+      draggable={false}
       {...sizeProps}
       {...imageProps}
       className={`${className} ${logoClassName}`}
@@ -246,6 +254,7 @@ export const TeamLogo: React.FC<TeamLogoProps> = ({
         }
       }}
     />
+    </div>
   );
 };