Render /launch as a static page

src/typescript/frontend/src/app/launch/page.tsx

@@ -1,15 +1,14 @@
 import ClientLaunchEmojicoinPage from "../../components/pages/launch-emojicoin/ClientLaunchEmojicoinPage";
-import { isUserGeoblocked } from "utils/geolocation";
-import { headers } from "next/headers";
 import { type Metadata } from "next";
 import { emoji } from "utils";
 
+export const dynamic = "force-static";
+
 export const metadata: Metadata = {
   title: "launch",
   description: `Launch your own emojicoins using emojicoin.fun ${emoji("party popper")}`,
 };
 
 export default async function LaunchEmojicoinPage() {
-  const geoblocked = await isUserGeoblocked(headers().get("x-real-ip"));
-  return <ClientLaunchEmojicoinPage geoblocked={geoblocked} />;
+  return <ClientLaunchEmojicoinPage />;
 }

src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx

@@ -32,7 +32,7 @@ const lastMarketRegistration = (
   return undefined;
 };
 
-const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblocked }) => {
+const ClientLaunchEmojicoinPage = () => {
   const searchParams = useSearchParams();
   const emojiParams = searchParams.get("emojis");
   const setEmojis = useEmojiPicker((state) => state.setEmojis);
@@ -142,7 +142,7 @@ const ClientLaunchEmojicoinPage: React.FC<{ geoblocked: boolean }> = ({ geoblock
 
       <div className="flex justify-center items-center h-full px-6">
         <div className="relative flex flex-col w-full max-w-[414px]">
-          <MemoizedLaunchAnimation loading={isLoadingRegisteredMarket} geoblocked={geoblocked} />
+          <MemoizedLaunchAnimation loading={isLoadingRegisteredMarket} />
         </div>
       </div>
     </div>

src/typescript/frontend/src/components/pages/launch-emojicoin/memoized-launch/index.tsx

@@ -15,17 +15,12 @@ import { toCoinDecimalString } from "lib/utils/decimals";
 import { MARKET_REGISTRATION_DEPOSIT, ONE_APT_BIGINT } from "@sdk/const";
 import Info from "components/info";
 import { filterBigEmojis } from "components/pages/emoji-picker/EmojiPicker";
+import useIsUserGeoblocked from "@hooks/use-is-user-geoblocked";
 
 const labelClassName = "whitespace-nowrap body-sm md:body-lg text-light-gray uppercase font-forma";
 
-export const MemoizedLaunchAnimation = ({
-  loading,
-  geoblocked,
-}: {
-  loading: boolean;
-  geoblocked: boolean;
-}) => {
-  // Maybe it's this...? Maybe we need to memoize this value.
+export const MemoizedLaunchAnimation = ({ loading }: { loading: boolean }) => {
+  const geoblocked = useIsUserGeoblocked();
   const { t } = translationFunction();
   const emojis = useEmojiPicker((state) => state.emojis);
   const setIsLoadingRegisteredMarket = useEmojiPicker(

src/typescript/frontend/src/hooks/use-is-user-geoblocked.ts

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+import { isUserGeoblockedServerAction } from "utils/server/geoblocked";
+
+const useIsUserGeoblocked = () => {
+  const { data } = useQuery({
+    queryKey: ["geoblocked"],
+    queryFn: () => isUserGeoblockedServerAction(),
+    staleTime: Infinity,
+  });
+
+  // Assume the user is geoblocked if the response hasn't completed yet.
+  return data ?? true;
+};
+
+export default useIsUserGeoblocked;

src/typescript/frontend/src/utils/server/geoblocked.ts

@@ -0,0 +1,8 @@
+"use server";
+
+import { headers } from "next/headers";
+import { isUserGeoblocked } from "utils/geolocation";
+
+export async function isUserGeoblockedServerAction() {
+  return await isUserGeoblocked(headers().get("x-real-ip"));
+}