Fix useDomain()

Closes #1810

Author: steven-tey

apps/web/lib/swr/use-domain.ts

@@ -1,14 +1,25 @@
-import { fetcher } from "@dub/utils";
+import { fetcher, isDubDomain } from "@dub/utils";
 import useSWR from "swr";
 import { DomainProps } from "../types";
 import useWorkspace from "./use-workspace";
 
-export default function useDomain(slug: string) {
+export default function useDomain({
+  slug,
+  enabled,
+}: {
+  slug: string;
+  enabled?: boolean;
+}) {
   const { id: workspaceId } = useWorkspace();
 
   const { data: domain, error } = useSWR<DomainProps>(
-    workspaceId && slug && `/api/domains/${slug}?workspaceId=${workspaceId}`,
+    enabled &&
+      workspaceId &&
+      slug &&
+      !isDubDomain(slug) &&
+      `/api/domains/${slug}?workspaceId=${workspaceId}`,
     fetcher,
+    { refreshInterval: 60000 },
   );
 
   return {

apps/web/ui/links/link-title-column.tsx

@@ -1,7 +1,7 @@
 "use client";
 
+import useDomain from "@/lib/swr/use-domain";
 import useWorkspace from "@/lib/swr/use-workspace";
-import { DomainProps } from "@/lib/types";
 import {
   ArrowTurnRight2,
   Avatar,
@@ -27,7 +27,6 @@ import {
 } from "@dub/ui/icons";
 import {
   cn,
-  fetcher,
   formatDateTime,
   getApexDomain,
   getPrettyUrl,
@@ -38,7 +37,6 @@ import {
 import * as HoverCard from "@radix-ui/react-hover-card";
 import { Mail } from "lucide-react";
 import { memo, PropsWithChildren, useContext, useRef, useState } from "react";
-import useSWR from "swr";
 import { useLinkBuilder } from "../modals/link-builder";
 import { ResponseLink } from "./links-container";
 import { LinksDisplayContext } from "./links-display-provider";
@@ -151,19 +149,12 @@ function UnverifiedTooltip({
   _key,
   children,
 }: PropsWithChildren<{ domain: string; _key: string }>) {
-  const { id: workspaceId, slug } = useWorkspace();
+  const { slug } = useWorkspace();
 
   const ref = useRef<HTMLDivElement>(null);
   const isVisible = useInViewport(ref);
 
-  const { data: { verified } = {} } = useSWR<DomainProps>(
-    workspaceId &&
-      isVisible &&
-      !isDubDomain(domain) &&
-      `/api/domains/${domain}?workspaceId=${workspaceId}`,
-    fetcher,
-    { refreshInterval: 60000 },
-  );
+  const { verified } = useDomain({ slug: domain, enabled: isVisible });
 
   return (
     <div ref={ref}>

apps/web/ui/modals/link-builder/qr-code-preview.tsx

@@ -4,14 +4,15 @@ import { QRCode } from "@/ui/shared/qr-code";
 import {
   Button,
   ShimmerDots,
+  useInViewport,
   useKeyboardShortcut,
   useLocalStorage,
   useMediaQuery,
 } from "@dub/ui";
 import { Pen2, QRCode as QRCodeIcon } from "@dub/ui/icons";
 import { DUB_QR_LOGO, linkConstructor } from "@dub/utils";
 import { AnimatePresence, motion } from "framer-motion";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { useDebounce } from "use-debounce";
 import { LinkFormData } from ".";
@@ -30,7 +31,13 @@ export function QRCodePreview() {
   const [key] = useDebounce(rawKey, 500);
   const [domain] = useDebounce(rawDomain, 500);
 
-  const { logo: domainLogo } = useDomain(rawDomain);
+  const ref = useRef<HTMLDivElement>(null);
+  const isVisible = useInViewport(ref);
+
+  const { logo: domainLogo } = useDomain({
+    slug: rawDomain,
+    enabled: isVisible,
+  });
 
   const [data, setData] = useLocalStorage<QRCodeDesign>(
     `qr-code-design-${workspaceId}`,
@@ -64,7 +71,7 @@ export function QRCodePreview() {
   });
 
   return (
-    <div>
+    <div ref={ref}>
       <LinkQRModal />
       <div className="flex items-center justify-between">
         <h2 className="text-sm font-medium text-gray-700">QR Code</h2>

apps/web/ui/modals/link-qr-modal.tsx

@@ -77,6 +77,7 @@ function LinkQRModal(
 function LinkQRModalInner({
   props,
   onSave,
+  showLinkQRModal,
   setShowLinkQRModal,
 }: {
   showLinkQRModal: boolean;
@@ -85,7 +86,10 @@ function LinkQRModalInner({
   const { id: workspaceId, slug, plan, logo: workspaceLogo } = useWorkspace();
   const id = useId();
   const { isMobile } = useMediaQuery();
-  const { logo: domainLogo } = useDomain(props.domain);
+  const { logo: domainLogo } = useDomain({
+    slug: props.domain,
+    enabled: showLinkQRModal,
+  });
 
   const url = useMemo(() => {
     return props.key && props.domain