fix(public): distinguish unavailable data from empty results and missing pages

src/app/(site)/rankings/page.tsx

@@ -2,6 +2,7 @@ import { desc } from "drizzle-orm";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import Link from "@/components/link";
+import { PublicLoadError } from "@/components/public/load-error";
 import {
 	ContentCard,
 	EmptyState,
@@ -12,6 +13,7 @@ import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
 import { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
+import { publicReadFailure } from "@/lib/services/public-read";
 
 export async function generateMetadata(): Promise<Metadata> {
 	const t = await getTranslations("pages.rankings");
@@ -36,7 +38,7 @@ type TopUser = {
 
 export default async function RankingsPage() {
 	const t = await getTranslations("pages.rankings");
-	let users: TopUser[] = [];
+	let users: TopUser[] | null = [];
 	try {
 		users = await cached("rankings:top", 60_000, async () =>
 			db
@@ -51,16 +53,18 @@ export default async function RankingsPage() {
 				.orderBy(desc(User.credits))
 				.limit(12),
 		);
-	} catch {
-		users = [];
+	} catch (error) {
+		users = publicReadFailure("rankings")(error);
 	}
 
 	return (
 		<main className="page-grid">
 			<ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />
 
-			<ContentCard padded={users.length === 0}>
-				{users.length === 0 ? (
+			<ContentCard padded={!users?.length}>
+				{users === null ? (
+					<PublicLoadError href="/rankings" />
+				) : users.length === 0 ? (
 					<EmptyState icon="🏆">{t("emptyState")}</EmptyState>
 				) : (
 					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>