Don't SSR tournaments (perf)

app/features/tournament/routes/to.$id.tsx

@@ -18,6 +18,7 @@ import { getUser } from "~/features/auth/core/user.server";
 import { Tournament } from "~/features/tournament-bracket/core/Tournament";
 import { tournamentDataCached } from "~/features/tournament-bracket/core/Tournament.server";
 import * as TournamentRepository from "~/features/tournament/TournamentRepository.server";
+import { useIsMounted } from "~/hooks/useIsMounted";
 import { isAdmin } from "~/permissions";
 import { databaseTimestampToDate } from "~/utils/dates";
 import type { SendouRouteHandle } from "~/utils/remix";
@@ -173,7 +174,23 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
 const TournamentContext = React.createContext<Tournament>(null!);
 
-export default function TournamentLayout() {
+export default function TournamentLayoutShell() {
+	const isMounted = useIsMounted();
+
+	// tournaments are something that people like to refresh a lot
+	// which can cause spikes that are hard for the server to handle
+	// this is just making sure the SSR for this page is as fast as possible in prod
+	if (!isMounted)
+		return (
+			<Main bigger>
+				<div className="tournament__placeholder" />
+			</Main>
+		);
+
+	return <TournamentLayout />;
+}
+
+export function TournamentLayout() {
 	const { t } = useTranslation(["tournament"]);
 	const user = useUser();
 	const data = useLoaderData<typeof loader>();

app/features/tournament/tournament.css

@@ -1,3 +1,7 @@
+.tournament__placeholder {
+	min-height: 100vh;
+}
+
 .tournament__action-section {
 	padding: var(--s-0-5) var(--s-6) var(--s-6) var(--s-6);
 	border-radius: var(--rounded);