From 9a851b99e79b4cc360e81e135fa75a24fbb55e48 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 11 Nov 2024 21:53:48 +0200
Subject: [PATCH] Fix front page hydration error

---
 app/features/front-page/routes/index.tsx | 27 ++++++++++++++----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/features/front-page/routes/index.tsx b/app/features/front-page/routes/index.tsx
index f8f06854e..dd88eb501 100644
--- a/app/features/front-page/routes/index.tsx
+++ b/app/features/front-page/routes/index.tsx
@@ -109,6 +109,7 @@ function SeasonBanner() {
 	const { t, i18n } = useTranslation(["front"]);
 	const season = nextSeason(new Date()) ?? currentOrPreviousSeason(new Date())!;
 	const _previousSeason = previousSeason(new Date());
+	const isMounted = useIsMounted();
 
 	const isInFuture = new Date() < season.starts;
 	const isShowingPreviousSeason = _previousSeason?.nth === season.nth;
@@ -121,17 +122,21 @@ function SeasonBanner() {
 				<div className="front__season-banner__header">
 					{t("front:sq.season", { nth: season.nth })}
 				</div>
-				<div className="front__season-banner__dates">
-					{season.starts.toLocaleDateString(i18n.language, {
-						month: "long",
-						day: "numeric",
-					})}{" "}
-					-{" "}
-					{season.ends.toLocaleDateString(i18n.language, {
-						month: "long",
-						day: "numeric",
-					})}
-				</div>
+				{isMounted ? (
+					<div className="front__season-banner__dates">
+						{season.starts.toLocaleDateString(i18n.language, {
+							month: "long",
+							day: "numeric",
+						})}{" "}
+						-{" "}
+						{season.ends.toLocaleDateString(i18n.language, {
+							month: "long",
+							day: "numeric",
+						})}
+					</div>
+				) : (
+					<div className="front__season-banner__dates invisible">X</div>
+				)}
 				<Image
 					className="front__season-banner__img"
 					path={sqHeaderGuyImageUrl(season.nth)}