Render live timestamp after hydration

Author: jahooma

freebuff/web/src/app/live/live-client.tsx

@@ -65,12 +65,10 @@ function countryName(code: string): string {
 }
 
 function formattedTime(iso: string): string {
-  return new Intl.DateTimeFormat('en-US', {
+  return new Intl.DateTimeFormat(undefined, {
     hour: 'numeric',
     minute: '2-digit',
     second: '2-digit',
-    timeZone: 'UTC',
-    timeZoneName: 'short',
   }).format(new Date(iso))
 }
 
@@ -393,6 +391,7 @@ export default function LiveClient({
 }: {
   initialStats: FreebuffLiveStats
 }) {
+  const [hasMounted, setHasMounted] = useState(false)
   const stats = useLiveStats(initialStats)
   const topCountry = useMemo(
     () =>
@@ -402,6 +401,10 @@ export default function LiveClient({
     [stats.countries],
   )
 
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
   return (
     <main className="min-h-screen bg-black text-white">
       <section className="relative overflow-hidden border-b border-white/10">
@@ -430,9 +433,11 @@ export default function LiveClient({
                   </span>
                   Freebuff live
                 </h1>
-                <span className="whitespace-nowrap text-sm text-white/45 md:text-base">
-                  Updated {formattedTime(stats.generatedAt)}
-                </span>
+                {hasMounted && (
+                  <span className="whitespace-nowrap text-sm text-white/45 md:text-base">
+                    Updated {formattedTime(stats.generatedAt)}
+                  </span>
+                )}
               </div>
             </div>
           </div>