Render nothing for timestamps on the sidebar in SSR (try to fix bad times, hydration weirdness?)

app/components/StreamListItems.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useFetcher } from "react-router";
 import type { SidebarStream } from "~/features/core/streams/streams.server";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import type { LanguageCode } from "~/modules/i18n/config";
 import { databaseTimestampToDate, formatDistanceToNow } from "~/utils/dates";
 import { navIconUrl, tournamentRegisterPage } from "~/utils/urls";
@@ -24,6 +25,7 @@ export function StreamListItems({
 	savedTournamentIds?: number[];
 }) {
 	const { t, i18n } = useTranslation(["front"]);
+	const isMounted = useIsMounted();
 
 	const formatRelativeDate = (timestamp: number) => {
 		const date = new Date(timestamp * 1000);
@@ -92,6 +94,8 @@ export function StreamListItems({
 									</span>
 								) : stream.subtitle ? (
 									stream.subtitle
+								) : !isMounted ? (
+									<span className="invisible">Placeholder</span>
 								) : isUpcoming ? (
 									formatRelativeDate(stream.startsAt)
 								) : (

app/components/layout/index.tsx

@@ -24,6 +24,7 @@ import { Link, useFetcher, useLocation, useMatches } from "react-router";
 import { useUser } from "~/features/auth/core/user";
 import { useChatContext } from "~/features/chat/useChatContext";
 import { FriendMenu } from "~/features/friends/components/FriendMenu";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import type { RootLoaderData } from "~/root";
 import type { Breadcrumb, SendouRouteHandle } from "~/utils/remix.server";
 import {
@@ -212,6 +213,7 @@ export function Layout({
 
 	const { t } = useTranslation(["front", "common"]);
 	const { formatRelativeDate } = useTimeFormat();
+	const isMounted = useIsMounted();
 	const location = useLocation();
 	const headerRef = React.useRef<HTMLElement>(null);
 	const navOffset = useNavOffset(headerRef);
@@ -275,7 +277,13 @@ export function Layout({
 						key={`${event.type}-${event.id}`}
 						to={event.url}
 						imageUrl={event.logoUrl ?? undefined}
-						subtitle={formatRelativeDate(event.startTime)}
+						subtitle={
+							isMounted ? (
+								formatRelativeDate(event.startTime)
+							) : (
+								<span className="invisible">Placeholder</span>
+							)
+						}
 					>
 						{event.scrimStatus === "booked"
 							? t("front:sideNav.scrimVs", { opponent: event.name })