Fix /org/:slug calendar timestamps in SSR

app/features/tournament-organization/routes/org.$slug.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { Link as LinkIcon, Lock, LogOut, SquarePen, Users } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import type { MetaFunction } from "react-router";
@@ -22,6 +23,7 @@ import { useUser } from "~/features/auth/core/user";
 import { BadgeDisplay } from "~/features/badges/components/BadgeDisplay";
 import { BannedUsersList } from "~/features/tournament-organization/components/BannedPlayersList";
 import { SendouForm } from "~/form/SendouForm";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import { useTimeFormat } from "~/hooks/useTimeFormat";
 import { useHasPermission, useHasRole } from "~/modules/permissions/hooks";
 import { databaseTimestampNow, databaseTimestampToDate } from "~/utils/dates";
@@ -501,6 +503,7 @@ function EventInfo({
 	showYear?: boolean;
 }) {
 	const { formatDateTime } = useTimeFormat();
+	const isMounted = useIsMounted();
 
 	return (
 		<div className="stack sm">
@@ -517,14 +520,18 @@ function EventInfo({
 				) : null}
 				<div>
 					<div>{event.name}</div>
-					<time className={styles.eventInfoTime} suppressHydrationWarning>
-						{formatDateTime(databaseTimestampToDate(event.startTime), {
-							day: "numeric",
-							month: "numeric",
-							hour: "numeric",
-							minute: "numeric",
-							year: showYear ? "numeric" : undefined,
-						})}
+					<time
+						className={clsx(styles.eventInfoTime, { invisible: !isMounted })}
+					>
+						{isMounted
+							? formatDateTime(databaseTimestampToDate(event.startTime), {
+									day: "numeric",
+									month: "numeric",
+									hour: "numeric",
+									minute: "numeric",
+									year: showYear ? "numeric" : undefined,
+								})
+							: "X"}
 					</time>
 				</div>
 			</Link>