fix: client hydration errors

Fixing the following error:

> Hydration failed because the initial UI does not match what was rendered on the server.

This was due to the startTime being different on the server than on the
client since on the server it is in Eastern time but on the client it
uses the users local time zone (which may be different).

This is fixed by using a `useHydration` hook with a Suspense boundary.

More info here:

https://francoisbest.com/posts/2023/displaying-local-times-in-nextjs

app/components/GameCardContents/ScheduledGameCardContents/index.tsx

@@ -1,3 +1,4 @@
+import { StartTime } from "~/components/StartTime";
 import { TeamInfo } from "~/components/TeamInfo";
 import type { ScheduledGame } from "~/components/types";
 
@@ -19,9 +20,7 @@ export const ScheduledGameCardContents = ({
       />
       <div className="mt-3 flex flex-1">
         <p className="flex-1 whitespace-nowrap px-3 pt-1.5 text-center uppercase">
-          {new Intl.DateTimeFormat("en-US", { timeStyle: "short" }).format(
-            new Date(game.startTime)
-          )}
+          <StartTime date={new Date(game.startTime)} />
         </p>
       </div>
       <TeamInfo

app/components/StartTime/index.tsx

@@ -0,0 +1,30 @@
+import { Suspense, useEffect, useState } from "react";
+import { useHydration } from "~/hooks/useHydration";
+
+export type StartTimeProps = {
+  readonly date: Date;
+};
+
+const useLocales = (): string[] => {
+  const [locales, setLocales] = useState(["en"]);
+
+  useEffect(() => {
+    setLocales([...window.navigator.languages]);
+  }, []);
+
+  return locales;
+};
+
+export const StartTime = ({ date }: StartTimeProps) => {
+  const iso = date.toISOString();
+  const hydrated = useHydration();
+  const locales = useLocales();
+
+  return (
+    <Suspense key={hydrated ? "local" : "utc"}>
+      <time dateTime={iso} title={iso}>
+        {new Intl.DateTimeFormat(locales, { timeStyle: "short" }).format(date)}
+      </time>
+    </Suspense>
+  );
+};

app/hooks/useHydration.ts

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+
+export const useHydration = (): boolean => {
+  const [hydrated, setHydrated] = useState(false);
+
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+
+  return hydrated;
+};