Adsense

src/components/ads/AdBanner.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useSession } from 'next-auth/react';
 
 interface AdBannerProps {
@@ -17,38 +17,65 @@ export default function AdBanner({
     className = '',
 }: AdBannerProps) {
     const { data: session, status } = useSession();
+    const adRef = useRef<HTMLModElement>(null);
+    const [adFilled, setAdFilled] = useState(false);
 
     // Check if user has a paid plan
-    // Adjust 'pro' or 'premium' based on your actual plan values
     const isPaidUser = session?.user && (
         session.user.plan === 'PRO' ||
         session.user.plan === 'PREMIUM' ||
         session.user.plan === 'LIFETIME'
     );
 
-    const [adLoaded, setAdLoaded] = useState(false);
-
     useEffect(() => {
         // Don't load if loading session or if user is paid
         if (status === 'loading' || isPaidUser) return;
 
-        try {
-            // @ts-ignore
-            (window.adsbygoogle = window.adsbygoogle || []).push({});
-            setAdLoaded(true);
-        } catch (err) {
-            console.error('AdSense error:', err);
-        }
+        const loadAd = () => {
+            try {
+                // @ts-ignore
+                (window.adsbygoogle = window.adsbygoogle || []).push({});
+
+                // Check if ad was filled after a short delay
+                setTimeout(() => {
+                    if (adRef.current) {
+                        const adElement = adRef.current;
+                        // AdSense sets data-ad-status="filled" when an ad loads
+                        const adStatus = adElement.getAttribute('data-ad-status');
+                        if (adStatus === 'filled') {
+                            setAdFilled(true);
+                        }
+                        // Also check if child iframe exists (another indicator)
+                        if (adElement.querySelector('iframe')) {
+                            setAdFilled(true);
+                        }
+                    }
+                }, 1500);
+            } catch (err) {
+                console.error('AdSense error:', err);
+            }
+        };
+
+        // Small delay to ensure DOM is ready
+        const timer = setTimeout(loadAd, 100);
+        return () => clearTimeout(timer);
     }, [isPaidUser, status]);
 
     // Don't render anything if paid user
     if (status === 'authenticated' && isPaidUser) return null;
 
+    // Don't render anything while session is loading
+    if (status === 'loading') return null;
+
     return (
-        <div className={`ad-container my-8 flex justify-center items-center overflow-hidden ${className}`} aria-hidden={true}>
+        <div
+            className={`ad-container flex justify-center items-center overflow-hidden transition-opacity duration-300 ${adFilled ? 'opacity-100' : 'opacity-0 h-0'} ${className}`}
+            aria-hidden={true}
+        >
             <ins
+                ref={adRef}
                 className="adsbygoogle"
-                style={{ display: 'block', minWidth: '300px', minHeight: '50px', width: '100%' }}
+                style={{ display: 'block', minWidth: '300px', width: '100%' }}
                 data-ad-client="ca-pub-2782770414424875"
                 data-ad-slot={dataAdSlot}
                 data-ad-format={dataAdFormat}