Hide empty ad containers to prevent layout stretching

Update AdSense component to accept an onAdStatus callback, allowing parent components to conditionally render ads based on their loaded status. The SidebarAd component now uses this callback to hide itself when no ad is available, preventing empty space and layout distortion.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 7b04aa60-f1a0-418c-904a-d16b3954518f
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/ls5p9ni
Replit-Helium-Checkpoint-Created: true

client/src/components/adsense.tsx

@@ -10,6 +10,7 @@ interface AdSenseProps {
   style?: Record<string, string>;
   layout?: string;
   layoutKey?: string;
+  onAdStatus?: (filled: boolean) => void;
 }
 
 export default function AdSense({
@@ -20,10 +21,10 @@ export default function AdSense({
   style,
   layout,
   layoutKey,
+  onAdStatus,
 }: AdSenseProps) {
   const adRef = useRef<HTMLModElement>(null);
   const pushed = useRef(false);
-  const [adLoaded, setAdLoaded] = useState(false);
 
   useEffect(() => {
     if (pushed.current) return;
@@ -34,17 +35,29 @@ export default function AdSense({
     } catch (e) {
     }
 
-    const timer = setTimeout(() => {
+    if (onAdStatus) {
-      if (adRef.current) {
+      const checkAd = () => {
-        const ins = adRef.current;
+        if (adRef.current) {
-        const filled = ins.getAttribute("data-ad-status") === "filled" ||
+          const ins = adRef.current;
-          ins.children.length > 0 ||
+          const status = ins.getAttribute("data-ad-status");
-          ins.clientHeight > 0;
+          if (status === "filled") {
-        setAdLoaded(filled);
+            onAdStatus(true);
-      }
+            return;
-    }, 3000);
+          }
-
+          if (status === "unfilled") {
-    return () => clearTimeout(timer);
+            onAdStatus(false);
+            return;
+          }
+          if (ins.clientHeight > 10) {
+            onAdStatus(true);
+            return;
+          }
+        }
+      };
+      const t1 = setTimeout(checkAd, 2000);
+      const t2 = setTimeout(checkAd, 5000);
+      return () => { clearTimeout(t1); clearTimeout(t2); };
+    }
   }, []);
 
   return (
@@ -104,12 +117,15 @@ export function MultiplexAd() {
 }
 
 export function SidebarAd() {
+  const [visible, setVisible] = useState(false);
+
   return (
-    <div className="sticky top-4">
+    <div className={`sticky top-4 ${visible ? "" : "hidden"}`}>
       <div className="bg-card rounded-md border border-card-border p-4 mt-4">
         <AdSense
           slot="2398082838"
           format="auto"
+          onAdStatus={(filled) => setVisible(filled)}
         />
       </div>
     </div>