From 404d35b437912914c1171b29c9e62d0b0f062929 Mon Sep 17 00:00:00 2001
From: etiennecollin <collin.etienne.contact@gmail.com>
Date: Sun, 7 Sep 2025 15:10:32 -0400
Subject: [PATCH] feat: improved welcome page

---
 frontend/src/app/welcome/page.tsx | 30 +++++++++++++++++++-----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/welcome/page.tsx b/frontend/src/app/welcome/page.tsx
index 7c488f0..41a21ff 100644
--- a/frontend/src/app/welcome/page.tsx
+++ b/frontend/src/app/welcome/page.tsx
@@ -2,16 +2,23 @@
 
 import { api } from "@/utils/api";
 import { getRuntimeConfig } from "@/utils/runtimeConfig";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 export default function WelcomePage() {
   const [visited, setVisited] = useState(false);
-  const [ssid, setSsid] = useState<string | undefined>(undefined);
+  const [hasMounted, setHasMounted] = useState(false);
+
+  const ssid = useMemo(() => {
+    if (!hasMounted) return null;
+    const { WIFI_SSID: ssid } = getRuntimeConfig();
+    return ssid;
+  }, [hasMounted, getRuntimeConfig]);
 
   const rotateVoucher = useCallback(async () => {
     try {
       await api.createRollingVoucher();
     } catch (error: any) {
+      // Error 403 is expected if the user already created a rolling voucher
       if (error?.status !== 403) {
         console.error("Failed to create rolling voucher", error);
       }
@@ -19,22 +26,23 @@ export default function WelcomePage() {
   }, []);
 
   useEffect(() => {
-    const { WIFI_SSID: ssid } = getRuntimeConfig();
-    setSsid(ssid);
-  }, []);
+    setHasMounted(true);
 
-  useEffect(() => {
-    if (visited) {
-      return;
-    }
+    if (visited) return;
     rotateVoucher();
     setVisited(true);
-  }, [visited, rotateVoucher]);
+  }, [rotateVoucher]);
 
   return (
     <main className="flex-center h-screen w-full px-4">
       <div className="w-full text-center font-bold text-4xl sm:text-5xl md:text-7xl lg:text-9xl leading-snug">
-        {ssid ? `Welcome to ${ssid}!` : "Welcome!"}
+        {ssid ? (
+          <>
+            Welcome to <span className="text-brand font-mono">{ssid}</span>!
+          </>
+        ) : (
+          "Welcome!"
+        )}
       </div>
     </main>
   );