fix: add suspense border everywhere

This commit is contained in:
dvelo 2025-04-22 17:05:11 -05:00
parent 738de7b6ee
commit 801b7c9a0a
5 changed files with 93 additions and 80 deletions

@ -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",
title: "The modern server list. · MHSF",
description:
"The open-source, modern and friendly server list wrapper for Minehut.",
applicationName: "MHSF",
title: "The modern server list. · MHSF",
description:
"The open-source, modern and friendly server list wrapper for Minehut.",
};
export default function HomePage() {
return (
<div className="overflow-x-hidden">
<HomePageComponent />
</div>
);
return (
<div className="overflow-x-hidden">
<Suspense>
<HomePageComponent />
</Suspense>
</div>
);
}

@ -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 { server }: { server: ServerResponse | undefined } = await (
await fetch("https://api.minehut.com/server/" + id)
).json();
const id = (await params).server;
const { server }: { server: ServerResponse | undefined } = await (
await fetch("https://api.minehut.com/server/" + id)
).json();
if (server === null) return notFound();
if (server === null) return notFound();
// Default fallback values
const defaultName = "Server not found";
const defaultDescription = "A server on Minehut, find it on MHSF!";
// Default fallback values
const defaultName = "Server not found";
const defaultDescription = "A server on Minehut, find it on MHSF!";
// Get server name or use fallback
const serverName = server?.name || defaultName;
// Get server name or use fallback
const serverName = server?.name || defaultName;
// Generate the absolute URL for the OG image
const ogImageUrl = new URL(
`/api/og/server/${id}`,
process.env.NEXT_PUBLIC_APP_URL || "https://mhsf.app"
).toString();
// Generate the absolute URL for the OG image
const ogImageUrl = new URL(
`/api/og/server/${id}`,
process.env.NEXT_PUBLIC_APP_URL || "https://mhsf.app",
).toString();
return {
applicationName: "MHSF",
title: `${serverName} | MHSF`,
openGraph: {
title: serverName,
description: defaultDescription,
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: `${serverName} server statistics`,
},
],
},
twitter: {
card: "summary_large_image",
title: serverName,
description: defaultDescription,
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: `${serverName} server statistics`,
},
],
},
description: defaultDescription,
};
return {
applicationName: "MHSF",
title: `${serverName} | MHSF`,
openGraph: {
title: serverName,
description: defaultDescription,
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: `${serverName} server statistics`,
},
],
},
twitter: {
card: "summary_large_image",
title: serverName,
description: defaultDescription,
images: [
{
url: ogImageUrl,
width: 1200,
height: 630,
alt: `${serverName} server statistics`,
},
],
},
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 (
<main>
<ServerProvider serverId={slug} />
</main>
);
return (
<main>
<Suspense>
<ServerProvider serverId={slug} />
</Suspense>
</main>
);
}

@ -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",
title: "Server list · MHSF",
description: "View all servers on Minehut using the MHSF server list.",
applicationName: "MHSF",
title: "Server list · MHSF",
description: "View all servers on Minehut using the MHSF server list.",
};
export default function ServerListPage() {
return (
<div>
<ServerList />
</div>
);
return (
<div>
<Suspense>
<ServerList />
</Suspense>
</div>
);
}

@ -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",
title: "Settings · MHSF",
description: "View settings for MHSF",
applicationName: "MHSF",
title: "Settings · MHSF",
description: "View settings for MHSF",
};
export default function ServerListPage() {
return (
<div>
<Settings />
</div>
);
return (
<div>
<Suspense
>
<Settings />
</Suspense>
</div>
);
}