Update ReferButton to client component

apps/web/app/api/user/embed-tokens/route.ts

@@ -0,0 +1,17 @@
+import { withSession } from "@/lib/auth";
+import { dub } from "@/lib/dub";
+import { NextResponse } from "next/server";
+
+export const GET = withSession(async ({ session }) => {
+  const referralLinkId = session.user.referralLinkId;
+
+  if (!referralLinkId) {
+    return NextResponse.json({ publicToken: null }, { status: 200 });
+  }
+
+  const { publicToken } = await dub.embedTokens.create({
+    linkId: referralLinkId,
+  });
+
+  return NextResponse.json({ publicToken });
+});

apps/web/app/app.dub.co/(dashboard)/account/settings/referrals/page.tsx

@@ -1,5 +1,6 @@
 import { getSession } from "@/lib/auth/utils";
 import { dub } from "@/lib/dub";
+import LayoutLoader from "@/ui/layout/layout-loader";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { DubWidget } from "@dub/embed-react";
 import {
@@ -8,10 +9,18 @@ import {
   InvoiceDollar,
   UserCheck,
 } from "@dub/ui/src/icons";
+import { Suspense } from "react";
 
 export const dynamic = "auto";
 
-export default async function ReferralsPage() {
+export default function ReferralsPage() {
+  return (
+    <Suspense fallback={<LayoutLoader />}>
+      <ReferralsPageRSC />
+    </Suspense>
+  );
+}
+async function ReferralsPageRSC() {
   const session = await getSession();
   const referralLinkId = session?.user.referralLinkId;
 

apps/web/app/app.dub.co/(dashboard)/layout.tsx

@@ -2,7 +2,7 @@ import { MainNav } from "@/ui/layout/main-nav";
 import { AppSidebarNav } from "@/ui/layout/sidebar/app-sidebar-nav";
 import { HelpButtonRSC } from "@/ui/layout/sidebar/help-button-rsc";
 import { NewsRSC } from "@/ui/layout/sidebar/news-rsc";
-import { ReferButtonRSC } from "@/ui/layout/sidebar/refer-button-rsc";
+import { ReferButton } from "@/ui/layout/sidebar/refer-button";
 import Toolbar from "@/ui/layout/toolbar/toolbar";
 import { constructMetadata } from "@dub/utils";
 import { ReactNode } from "react";
@@ -18,7 +18,7 @@ export default async function Layout({ children }: { children: ReactNode }) {
           sidebar={AppSidebarNav}
           toolContent={
             <>
-              <ReferButtonRSC />
+              <ReferButton />
               <HelpButtonRSC />
             </>
           }

apps/web/app/app.dub.co/embed/inline/page-client.tsx

@@ -19,6 +19,7 @@ import useSWR from "swr";
 import { Activity } from "../activity";
 import { SalesList } from "../sales-list";
 import { LinkToken } from "../token";
+import { useIframeVisibility } from "../use-iframe-visibility";
 
 export function EmbedInlinePageClient({
   program,
@@ -33,9 +34,14 @@ export function EmbedInlinePageClient({
 }) {
   const [copied, copyToClipboard] = useCopyToClipboard();
 
+  const isIframeVisible = useIframeVisibility();
+
   const { data: sales, isLoading } = useSWR<PartnerSaleResponse[]>(
-    "/api/embed/sales",
+    isIframeVisible && "/api/embed/sales",
     fetcher,
+    {
+      keepPreviousData: true,
+    },
   );
 
   return (
@@ -142,7 +148,7 @@ export function EmbedInlinePageClient({
                 ))}
             </div>
           </>
-          <LinkToken />
+          {isIframeVisible && <LinkToken />}
         </div>
       </div>
       <div className="flex grow flex-col justify-end">

apps/web/app/app.dub.co/embed/use-iframe-visibility.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+export function useIframeVisibility() {
+  const [isIframeVisible, setIsIframeVisible] = useState(false);
+
+  useEffect(() => {
+    const isInIframe = window !== window.parent;
+
+    if (isInIframe) {
+      setIsIframeVisible(false);
+
+      const handleVisibilityChange = () => {
+        const isVisible =
+          document.visibilityState === "visible" && !document.hidden;
+        setIsIframeVisible(isVisible);
+      };
+
+      const handleFocus = () => {
+        if (document.visibilityState === "visible" && !document.hidden) {
+          setIsIframeVisible(true);
+        }
+      };
+
+      const handleBlur = () => {
+        setIsIframeVisible(false);
+      };
+
+      document.addEventListener("visibilitychange", handleVisibilityChange);
+      window.addEventListener("focus", handleFocus);
+      window.addEventListener("blur", handleBlur);
+      document.addEventListener("focus", handleFocus);
+      document.addEventListener("blur", handleBlur);
+
+      const observer = new IntersectionObserver(
+        ([entry]) => {
+          if (!entry.isIntersecting) {
+            setIsIframeVisible(false);
+          }
+        },
+        { threshold: [0] },
+      );
+
+      if (window.frameElement) {
+        observer.observe(window.frameElement);
+      }
+
+      return () => {
+        document.removeEventListener(
+          "visibilitychange",
+          handleVisibilityChange,
+        );
+        window.removeEventListener("focus", handleFocus);
+        window.removeEventListener("blur", handleBlur);
+        document.removeEventListener("focus", handleFocus);
+        document.removeEventListener("blur", handleBlur);
+        observer.disconnect();
+      };
+    } else {
+      setIsIframeVisible(true);
+    }
+  }, []);
+
+  return isIframeVisible;
+}

apps/web/app/app.dub.co/embed/widget/page-client.tsx

@@ -26,6 +26,7 @@ import useSWR from "swr";
 import { Activity } from "../activity";
 import { SalesList } from "../sales-list";
 import { LinkToken } from "../token";
+import { useIframeVisibility } from "../use-iframe-visibility";
 
 type Tab = "invite" | "rewards";
 
@@ -45,9 +46,14 @@ export function EmbedWidgetPageClient({
   const [copied, copyToClipboard] = useCopyToClipboard();
   const [selectedTab, setSelectedTab] = useState<Tab>("invite");
 
+  const isIframeVisible = useIframeVisibility();
+
   const { data: sales, isLoading } = useSWR<PartnerSaleResponse[]>(
-    "/api/embed/sales",
+    isIframeVisible && "/api/embed/sales",
     fetcher,
+    {
+      keepPreviousData: true,
+    },
   );
 
   return (
@@ -256,7 +262,7 @@ export function EmbedWidgetPageClient({
               </motion.div>
             </>
           )}
-          <LinkToken />
+          {isIframeVisible && <LinkToken />}
         </div>
       </div>
       <div className="flex grow flex-col justify-end">

apps/web/ui/layout/page-content/index.tsx

@@ -2,7 +2,7 @@ import { MaxWidthWrapper } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { PropsWithChildren, ReactNode } from "react";
 import { HelpButtonRSC } from "../sidebar/help-button-rsc";
-import { ReferButtonRSC } from "../sidebar/refer-button-rsc";
+import { ReferButton } from "../sidebar/refer-button";
 import UserDropdown from "../sidebar/user-dropdown";
 import { NavButton } from "./nav-button";
 
@@ -49,7 +49,7 @@ export function PageContent({
             <div className="hidden md:block">{titleControls}</div>
           )}
           <div className="flex items-center gap-4 md:hidden">
-            <ReferButtonRSC />
+            <ReferButton />
             <HelpButtonRSC />
             <UserDropdown />
           </div>

apps/web/ui/layout/sidebar/refer-button.tsx

@@ -2,10 +2,19 @@
 
 import { DubWidget } from "@dub/embed-react";
 import { Gift } from "@dub/ui/src/icons";
-import { cn } from "@dub/utils";
+import { cn, fetcher } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
+import useSWRImmutable from "swr/immutable";
+
+export function ReferButton() {
+  const { data: { publicToken } = {} } = useSWRImmutable<{
+    publicToken: string;
+  }>("/api/user/embed-tokens", fetcher, {
+    keepPreviousData: true,
+  });
+
+  if (!publicToken) return null;
 
-export function ReferButton({ publicToken }: { publicToken: string }) {
   return (
     <DubWidget token={publicToken} options={{ trigger: "manual" }}>
       <button