dynamic ins experiment

components/StatsModal.tsx

@@ -1,5 +1,5 @@
 import useSWR from "swr";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTheme } from "next-themes";
 
 import Modal from "./Modal";
@@ -25,6 +25,12 @@ interface Props {
   remainingTime?: ReturnType<typeof useRemainingTime>;
 }
 
+declare global {
+  interface Window {
+    adsbygoogle: { loaded: boolean; push: (v: unknown) => void };
+  }
+}
+
 const GRAPH_WIDTH_MIN_RATIO = 10;
 
 export default function StatsModal(props: Props) {
@@ -213,6 +219,19 @@ export default function StatsModal(props: Props) {
   const { fail: _, ...distribution } = stats.distribution;
   const maxDistribution = Math.max(...Object.values(distribution));
 
+  const hasPushedToAds = useRef(false);
+  useEffect(() => {
+    if (hasPushedToAds.current) return;
+
+    if (isOpen) {
+      hasPushedToAds.current = true;
+      // @ts-ignore
+      window.adsbygoogle = window.adsbygoogle || [];
+      if (window.adsbygoogle.loaded) return;
+      window.adsbygoogle.push({});
+    }
+  }, [isOpen]);
+
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
       <Modal.Title>Statistik</Modal.Title>
@@ -273,14 +292,16 @@ export default function StatsModal(props: Props) {
             );
           })}
       </div>
-      <ins
-        className="adsbygoogle"
-        style={{ display: "block" }}
-        data-ad-client="ca-pub-3081263972680635"
-        data-ad-slot="2576511153"
-        data-ad-format="auto"
-        data-full-width-responsive="true"
-      />
+      {isOpen && (
+        <ins
+          className="adsbygoogle"
+          style={{ display: "block" }}
+          data-ad-client="ca-pub-3081263972680635"
+          data-ad-slot="2576511153"
+          data-ad-format="auto"
+          data-full-width-responsive="true"
+        />
+      )}
       {showShare && (
         <>
           <WordDefinition answer={answer} />