fix: add suspense border everywhere

apps/www/src/app/(main)/home/page.tsx

@@ -30,18 +30,21 @@
 
 import HomePageComponent from "@/components/feat/home-page/home-page";
 import type { Metadata } from "next";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
-  applicationName: "MHSF",
+	applicationName: "MHSF",
-  title: "The modern server list. · MHSF",
+	title: "The modern server list. · MHSF",
-  description:
+	description:
-    "The open-source, modern and friendly server list wrapper for Minehut.",
+		"The open-source, modern and friendly server list wrapper for Minehut.",
 };
 
 export default function HomePage() {
-  return (
+	return (
-    <div className="overflow-x-hidden">
+		<div className="overflow-x-hidden">
-      <HomePageComponent />
+			<Suspense>
-    </div>
+				<HomePageComponent />
-  );
+			</Suspense>
+		</div>
+	);
 }

apps/www/src/app/(main)/server/v2/minehut/[server]/page.tsx

@@ -2,74 +2,77 @@ import { ServerProvider } from "@/components/feat/server-page/server-provider";
 import type { ServerResponse } from "@/lib/types/mh-server";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
+import { Suspense } from "react";
 
 export async function generateMetadata({
-  params,
+	params,
 }: {
-  params: Promise<{ server: string }>;
+	params: Promise<{ server: string }>;
 }): Promise<Metadata> {
-  const id = (await params).server;
+	const id = (await params).server;
-  const { server }: { server: ServerResponse | undefined } = await (
+	const { server }: { server: ServerResponse | undefined } = await (
-    await fetch("https://api.minehut.com/server/" + id)
+		await fetch("https://api.minehut.com/server/" + id)
-  ).json();
+	).json();
 
-  if (server === null) return notFound();
+	if (server === null) return notFound();
 
-  // Default fallback values
+	// Default fallback values
-  const defaultName = "Server not found";
+	const defaultName = "Server not found";
-  const defaultDescription = "A server on Minehut, find it on MHSF!";
+	const defaultDescription = "A server on Minehut, find it on MHSF!";
 
-  // Get server name or use fallback
+	// Get server name or use fallback
-  const serverName = server?.name || defaultName;
+	const serverName = server?.name || defaultName;
 
-  // Generate the absolute URL for the OG image
+	// Generate the absolute URL for the OG image
-  const ogImageUrl = new URL(
+	const ogImageUrl = new URL(
-    `/api/og/server/${id}`,
+		`/api/og/server/${id}`,
-    process.env.NEXT_PUBLIC_APP_URL || "https://mhsf.app"
+		process.env.NEXT_PUBLIC_APP_URL || "https://mhsf.app",
-  ).toString();
+	).toString();
 
-  return {
+	return {
-    applicationName: "MHSF",
+		applicationName: "MHSF",
-    title: `${serverName} | MHSF`,
+		title: `${serverName} | MHSF`,
-    openGraph: {
+		openGraph: {
-      title: serverName,
+			title: serverName,
-      description: defaultDescription,
+			description: defaultDescription,
-      images: [
+			images: [
-        {
+				{
-          url: ogImageUrl,
+					url: ogImageUrl,
-          width: 1200,
+					width: 1200,
-          height: 630,
+					height: 630,
-          alt: `${serverName} server statistics`,
+					alt: `${serverName} server statistics`,
-        },
+				},
-      ],
+			],
-    },
+		},
-    twitter: {
+		twitter: {
-      card: "summary_large_image",
+			card: "summary_large_image",
-      title: serverName,
+			title: serverName,
-      description: defaultDescription,
+			description: defaultDescription,
-      images: [
+			images: [
-        {
+				{
-          url: ogImageUrl,
+					url: ogImageUrl,
-          width: 1200,
+					width: 1200,
-          height: 630,
+					height: 630,
-          alt: `${serverName} server statistics`,
+					alt: `${serverName} server statistics`,
-        },
+				},
-      ],
+			],
-    },
+		},
-    description: defaultDescription,
+		description: defaultDescription,
-  };
+	};
 }
 
 export default async function ServerPage({
-  params,
+	params,
 }: {
-  params: Promise<{ server: string }>;
+	params: Promise<{ server: string }>;
 }) {
-  const slug = (await params).server;
+	const slug = (await params).server;
 
-  return (
+	return (
-    <main>
+		<main>
-      <ServerProvider serverId={slug} />
+			<Suspense>
-    </main>
+				<ServerProvider serverId={slug} />
-  );
+			</Suspense>
+		</main>
+	);
 }

apps/www/src/app/(main)/servers/page.tsx

@@ -30,17 +30,20 @@
 
 import { ServerList } from "@/components/feat/server-list/server-list";
 import type { Metadata } from "next";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
-  applicationName: "MHSF",
+	applicationName: "MHSF",
-  title: "Server list · MHSF",
+	title: "Server list · MHSF",
-  description: "View all servers on Minehut using the MHSF server list.",
+	description: "View all servers on Minehut using the MHSF server list.",
 };
 
 export default function ServerListPage() {
-  return (
+	return (
-    <div>
+		<div>
-      <ServerList />
+			<Suspense>
-    </div>
+				<ServerList />
-  );
+			</Suspense>
+		</div>
+	);
 }

apps/www/src/app/(main)/settings/page.tsx

@@ -30,17 +30,21 @@
 
 import { Settings } from "@/components/feat/settings/settings";
 import type { Metadata } from "next";
+import { Suspense } from "react";
 
 export const metadata: Metadata = {
-  applicationName: "MHSF",
+	applicationName: "MHSF",
-  title: "Settings · MHSF",
+	title: "Settings · MHSF",
-  description: "View settings for MHSF",
+	description: "View settings for MHSF",
 };
 
 export default function ServerListPage() {
-  return (
+	return (
-    <div>
+		<div>
-      <Settings />
+			<Suspense
-    </div>
+      >
-  );
+				<Settings />
+			</Suspense>
+		</div>
+	);
 }