feat: next safe ad exempt

src/app/components/PatreonPlug.tsx

@@ -2,14 +2,20 @@
 
 import { CheckIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Link, Text } from '@radix-ui/themes';
+import { useLayoutEffect, useState } from 'react';
 import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
 import { useAdExempt } from '../../hooks/useAdExempt';
 import { PatreonIcon } from '../../icons/Patreon';
 import * as App from '../../stores/app';
 
 export function PatreonPlug() {
-  const patreon = App.use((state) => state.logins.patreon);
+  const [hasPatreon, setHasPatreon] = useState(false);
   const exempt = useAdExempt();
+  const patreon = App.use((state) => state.logins.patreon);
+
+  useLayoutEffect(() => {
+    setHasPatreon(patreon !== undefined);
+  }, [patreon]);
 
   return (
     <Flex
@@ -36,7 +42,7 @@ export function PatreonPlug() {
             {exempt ? 'Manage membership' : 'Support on Patreon'}
           </Button>
         </Link>
-        {!patreon && !exempt && (
+        {!hasPatreon && !exempt && (
           <Link href={patreonLoginUrl()}>
             <Button variant="outline">Log in with Patreon</Button>
           </Link>

src/hooks/useAdExempt.ts

@@ -1,16 +1,18 @@
-import { use, useMemo } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import * as App from '../stores/app';
 
-let cache: Record<string, boolean> = {};
+let cache: Record<string, boolean | Promise<boolean>> = {};
 
 export function useAdExempt() {
   const patreon = App.use((state) => state.logins.patreon);
-  const promise = useMemo(
+  const [exempt, setExempt] = useState(false);
-    () =>
-      new Promise<boolean>(async (resolve) => {
-        if (!patreon) return resolve(false);
-        if (patreon.token in cache) return resolve(cache[patreon.token]);
 
+  useLayoutEffect(() => {
+    (async () => {
+      if (!patreon) return setExempt(false);
+
+      if (!(patreon.token in cache)) {
+        cache[patreon.token] = new Promise<boolean>(async (resolve) => {
           const response = await fetch(
             `/api/patreon/membership/${patreon.token}`,
             { cache: 'force-cache' },
@@ -20,11 +22,15 @@ export function useAdExempt() {
 
           const json = await response.json();
           const exempt = typeof json === 'boolean' && json;
-        cache[patreon.token] = exempt;
 
+          cache[patreon.token] = exempt;
           resolve(exempt);
-      }),
+        });
-    [patreon?.token],
+      }
-  );
+
-  return use(promise);
+      setExempt(await cache[patreon.token]);
+    })();
+  }, []);
+
+  return exempt;
 }