From 6477307b2edf95a17ce4fadf0a0b16b30f36b1ee Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 8 Mar 2026 12:40:07 +0200
Subject: [PATCH] Fix sidebar layout shift on load

---
 app/components/SideNav.tsx         |  7 ++++++-
 app/components/StreamListItems.tsx | 24 ++++++++----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/app/components/SideNav.tsx b/app/components/SideNav.tsx
index e9598ca10..7f19edb1d 100644
--- a/app/components/SideNav.tsx
+++ b/app/components/SideNav.tsx
@@ -121,7 +121,12 @@ export function ListLink({
 				{subtitle || badge ? (
 					<div className={styles.listLinkSubtitleRow}>
 						{subtitle ? (
-							<span className={styles.listLinkSubtitle}>{subtitle}</span>
+							<span
+								className={styles.listLinkSubtitle}
+								suppressHydrationWarning
+							>
+								{subtitle}
+							</span>
 						) : null}
 						{typeof badge === "string" ? (
 							<span
diff --git a/app/components/StreamListItems.tsx b/app/components/StreamListItems.tsx
index b973a9954..18706619f 100644
--- a/app/components/StreamListItems.tsx
+++ b/app/components/StreamListItems.tsx
@@ -2,7 +2,6 @@ import { isToday, isTomorrow } from "date-fns";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 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 } from "~/utils/urls";
@@ -19,7 +18,6 @@ export function StreamListItems({
 	onClick?: () => void;
 }) {
 	const { t, i18n } = useTranslation(["front"]);
-	const isMounted = useIsMounted();
 
 	const formatRelativeDate = (timestamp: number) => {
 		const date = new Date(timestamp * 1000);
@@ -60,7 +58,7 @@ export function StreamListItems({
 				const prevIsLive =
 					prevStream &&
 					databaseTimestampToDate(prevStream.startsAt).getTime() <= Date.now();
-				const showUpcomingDivider = isMounted && isUpcoming && prevIsLive;
+				const showUpcomingDivider = isUpcoming && prevIsLive;
 
 				return (
 					<React.Fragment key={stream.id}>
@@ -85,22 +83,16 @@ export function StreamListItems({
 									</span>
 								) : stream.subtitle ? (
 									stream.subtitle
-								) : isMounted ? (
-									isUpcoming ? (
-										formatRelativeDate(stream.startsAt)
-									) : (
-										formatDistanceToNow(startsAtDate, {
-											addSuffix: true,
-											language: i18n.language as LanguageCode,
-										})
-									)
+								) : isUpcoming ? (
+									formatRelativeDate(stream.startsAt)
 								) : (
-									""
+									formatDistanceToNow(startsAtDate, {
+										addSuffix: true,
+										language: i18n.language as LanguageCode,
+									})
 								)
 							}
-							badge={
-								isMounted && !isUpcoming ? "LIVE" : streamTierBadge(stream)
-							}
+							badge={!isUpcoming ? "LIVE" : streamTierBadge(stream)}
 							onClick={onClick}
 						>
 							{stream.name}