should be all good now (and added api status notifications)

projects/website/src/app/(pages)/page.tsx

@@ -1,14 +1,14 @@
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import ky from "ky";
 import { config } from "../../../config";
 import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
 import Statistic from "@/components/home/statistic";
+import { kyFetch } from "@ssr/common/utils/utils";
 
 export const dynamic = "force-dynamic"; // Always generate the page on load
 
 export default async function HomePage() {
-  const statistics = await ky.get(config.siteApi + "/statistics").json<AppStatistics>();
+  const statistics = await kyFetch<AppStatistics>(config.siteApi + "/statistics");
 
   return (
     <main className="flex flex-col items-center w-full gap-6 text-center">
@@ -21,10 +21,12 @@ export default async function HomePage() {
         <p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
       </div>
 
-      <div className="flex items-center flex-col">
-        <p className="font-semibold">Site Statistics</p>
-        <Statistic title="Total Tracked Players" value={statistics.trackedPlayers} />
-      </div>
+      {statistics && (
+        <div className="flex items-center flex-col">
+          <p className="font-semibold">Site Statistics</p>
+          <Statistic title="Total Tracked Players" value={statistics.trackedPlayers} />
+        </div>
+      )}
 
       <div className="flex gap-2 flex-wrap">
         <Link href="/search">

projects/website/src/components/api/api-health.tsx

@@ -34,6 +34,7 @@ export function ApiHealth() {
         title: `The API is now ${online ? "Online" : "Offline"}!`,
         description: online ? "The API has recovered connectivity." : "The API has lost connectivity.",
         variant: online ? "success" : "destructive",
+        duration: 10_000, // 10 seconds
       });
     }