-
-
{t("title")}
-
- {t("blacklist.subtitle")}
-
+
+
+
+ {SKELETON_ROWS.map((k) => (
+
-
-
- {/* Blacklist section — additional sections slot in below */}
-
- {t("blacklist.heading")}
-
+ ))}
-
+
);
}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/edit/page.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/edit/page.tsx
index 099b06bf1..6ec0f5ac6 100644
--- a/apps/web/src/app/[team]/scrim/[scrimId]/edit/page.tsx
+++ b/apps/web/src/app/[team]/scrim/[scrimId]/edit/page.tsx
@@ -1,24 +1,32 @@
+import { NoAuthCard } from "@/components/auth/no-auth";
import { DashboardLayout } from "@/components/dashboard-layout";
import { DangerZone } from "@/components/scrim/danger-zone";
import { EditScrimForm } from "@/components/scrim/edit-scrim-form";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { ScrimService } from "@/data/scrim";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { ScoutingService } from "@/data/scouting";
import { UserService } from "@/data/user";
-import { auth } from "@/lib/auth";
+import { auth, isAuthedToViewScrim } from "@/lib/auth";
import { scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { resolveMapDataId } from "@/lib/map-data-resolver";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
export async function generateMetadata(
props: PageProps<"/[team]/scrim/[scrimId]/edit">
): Promise
{
const params = await props.params;
- const t = await getTranslations("scrimPage.editMetadata");
+ const t = getMetadataTranslations("scrimPage.editMetadata");
const scrim = await AppRuntime.runPromise(
ScrimService.pipe(
Effect.flatMap((svc) => svc.getScrim(parseInt(params.scrimId)))
@@ -33,14 +41,36 @@ export async function generateMetadata(
};
}
-export default async function EditScrimPage(
+// Static shell: the page frame prerenders and the request-derived content
+// (params, auth, scrim data) streams into ONE boundary whose fallback mirrors
+// the form's pending layout — the back link needs route params, so it streams
+// with the content.
+export default function EditScrimPage(
props: PageProps<"/[team]/scrim/[scrimId]/edit">
) {
- const params = await props.params;
+ return (
+
+
+
+
+ );
+}
+
+async function EditScrimContent({
+ params,
+}: {
+ params: PageProps<"/[team]/scrim/[scrimId]/edit">["params"];
+}) {
+ const { team, scrimId } = await params;
+ // The route's access gate — the [scrimId] layout no longer gates the
+ // subtree (a layout gate adds a chrome-less loading phase above every
+ // child route).
+ if (!(await isAuthedToViewScrim(parseInt(scrimId)))) return
-
-
-
-
-
- {t("title")}
-
+ <>
+
+
+
+
+ {t("title")}
+
+
+
({
+ abbreviation: st.abbreviation,
+ fullName: st.fullName,
+ }))}
+ />
+
+
+
+ );
+}
-
({
- abbreviation: st.abbreviation,
- fullName: st.fullName,
- }))}
- />
-
-
+
+
+
+ {t("title")}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
{children} ;
+ return {props.children} ;
}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/loading.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/loading.tsx
deleted file mode 100644
index aa6e6b05d..000000000
--- a/apps/web/src/app/[team]/scrim/[scrimId]/loading.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { DashboardLayout } from "@/components/dashboard-layout";
-import { DirectionalTransition } from "@/components/directional-transition";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function ScrimLoading() {
- const t = await getTranslations("scrimPage");
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
- {t("maps.title")}
-
-
- {Array.from({ length: 8 }).map((_, index) => (
-
-
-
-
- );
-}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/layout.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/layout.tsx
index 93599c5f2..5fada2a3d 100644
--- a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/layout.tsx
+++ b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/layout.tsx
@@ -1,30 +1,38 @@
import { NoAuthCard } from "@/components/auth/no-auth";
import { Footer } from "@/components/footer";
+import { MapPageSkeleton } from "@/components/map/map-page-skeleton";
import { MobileBanner } from "@/components/map/mobile-banner";
import { SelectedPlayerProvider } from "@/components/map/player-switcher";
import { isAuthedToViewMap } from "@/lib/auth";
+import { Suspense, type ReactNode } from "react";
-export default async function MapDashboardLayout(
+export default function MapDashboardLayout(
props: LayoutProps<"/[team]/scrim/[scrimId]/map/[mapId]">
) {
- const params = await props.params;
-
- const { children } = props;
-
- const scrimId = parseInt(params.scrimId);
- const mapId = parseInt(params.mapId);
-
- const isAuthed = await isAuthedToViewMap(scrimId, mapId);
-
- if (!isAuthed) {
- return
{props.children}
+
+
);
}
+
+async function MapAuthGate({
+ params,
+ children,
+}: {
+ params: LayoutProps<"/[team]/scrim/[scrimId]/map/[mapId]">["params"];
+ children: ReactNode;
+}) {
+ const { scrimId, mapId } = await params;
+ const isAuthed = await isAuthedToViewMap(parseInt(scrimId), parseInt(mapId));
+ if (!isAuthed) return
-
-
- );
-}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/page.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/page.tsx
index 5739a9dd4..ff34d6307 100644
--- a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/page.tsx
+++ b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/page.tsx
@@ -1,53 +1,62 @@
import { AppHeader } from "@/components/app-header";
+import { NoAuthCard } from "@/components/auth/no-auth";
import { DirectionalTransition } from "@/components/directional-transition";
import { ActiveMapTab } from "@/components/map/active-map-tab";
import { HeroBans } from "@/components/map/hero-bans";
+import { MapPageSkeleton } from "@/components/map/map-page-skeleton";
import { MapTabs } from "@/components/map/map-tabs";
import { MapTabsSkeleton } from "@/components/map/map-tabs-skeleton";
import { PlayerSwitcher } from "@/components/map/player-switcher";
import { ReplayCode } from "@/components/scrim/replay-code";
import { StatsViewBeacon } from "@/components/usage/stats-view-beacon";
-import { MatchStoryService } from "@/data/map/match-story-service";
-import { PlayerService } from "@/data/player";
-import { AppRuntime } from "@/data/runtime";
-import { UserService } from "@/data/user";
-import { auth, isAuthedToViewMap } from "@/lib/auth";
-import { positionalData, tempoChart } from "@/lib/flags";
+import {
+ getCachedHeroBans,
+ getCachedMapDetails,
+ getCachedMapRow,
+ getCachedMatchStory,
+ getCachedMostPlayedHeroes,
+ getCachedScrimVisibility,
+} from "@/data/cached/map-cache";
+import { getMapViewerContext } from "@/data/cached/map-viewer";
+import { defaultLocale, type Locale } from "@/i18n/config";
+import { coachingCanvas, positionalData, tempoChart } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { resolveScrimMapDataId } from "@/lib/map-data-resolver";
-import prisma from "@/lib/prisma";
-import { getColorblindMode } from "@/lib/server-utils";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { translateMapName } from "@/lib/utils";
import type { PagePropsWithLocale, SearchParams } from "@/types/next";
-import { Effect } from "effect";
import type { Metadata, Route } from "next";
-import { getTranslations } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
import Link from "next/link";
import { Suspense, ViewTransition } from "react";
+// Opt into runtime prefetching: MapTabs prefetches `?tab=` URLs with
+// kind:"full" on hover/trajectory, and the server can prerender the target
+// tab ahead of the click because the render path below is fully cached
+// (public caches for map data, "use cache: private" for the viewer context).
+export const prefetch = "allow-runtime";
+
export async function generateMetadata(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]">
): Promise {
const params = await props.params;
const scrimId = parseInt(params.scrimId);
const mapId = parseInt(decodeURIComponent(params.mapId));
+ // The gate goes through the private-cached viewer context: an uncached
+ // session read here fails the route's runtime prefetches with "couldn't
+ // prerender metadata" (E1370), and a slow read pushes the streamed
+ // chunk to the tail of the stream.
const canViewMap =
Number.isSafeInteger(scrimId) &&
Number.isSafeInteger(mapId) &&
- (await isAuthedToViewMap(scrimId, mapId));
- const t = await getTranslations({
- locale: params.locale,
- namespace: "mapPage.mapMetadata",
- });
+ (await getMapViewerContext(scrimId, mapId)).canView;
+ const t = getMetadataTranslations("mapPage.mapMetadata");
const mapName = canViewMap
- ? await prisma.matchStart.findFirst({
- where: {
- MapDataId: await resolveScrimMapDataId(scrimId, mapId),
- },
- select: {
- map_name: true,
- },
- })
+ ? await getCachedMapDetails(
+ mapId,
+ await resolveScrimMapDataId(scrimId, mapId)
+ )
: null;
const translatedMapName = await translateMapName(mapName?.map_name ?? "Map");
@@ -68,78 +77,87 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function MapDashboardPage(
+export default function MapDashboardPage(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]"> & {
searchParams: SearchParams;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
- const id = parseInt(params.mapId);
- const mapDataId = await resolveScrimMapDataId(parseInt(params.scrimId), id);
- const session = await auth();
- const user = await AppRuntime.runPromise(
- UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user?.email)))
+ // The shell reads no request data, so the route prerenders a non-empty static
+ // shell and navigations into a map (and between its tabs) update instantly.
+ // Everything that reads request data — auth, locale, feature flags, params,
+ // searchParams — lives in MapPageContent, behind the Suspense boundary, so it
+ // streams in under the skeleton instead of blocking the navigation.
+ return (
+ <DirectionalTransition>
+ <StatsViewBeacon />
+ <Suspense fallback={<MapPageSkeleton />}>
+ <MapPageContent
+ params={props.params}
+ searchParams={props.searchParams}
+ />
+ </Suspense>
+ </DirectionalTransition>
);
+}
+
+async function MapPageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: {
+ params: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]">["params"];
+ searchParams: SearchParams;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
+ const id = parseInt(params.mapId);
+ const scrimId = parseInt(params.scrimId);
+ if (!Number.isSafeInteger(id) || !Number.isSafeInteger(scrimId)) {
+ return <NoAuthCard />;
+ }
+ // The route's access gate — the [scrimId] layout no longer gates the
+ // subtree (a layout gate adds a chrome-less loading phase above every
+ // child route). The viewer context is "use cache: private" so runtime
+ // prefetches can execute it (uncached session reads would abort them).
+ const viewer = await getMapViewerContext(scrimId, id);
+ if (!viewer.canView) {
+ return <NoAuthCard />;
+ }
+ const mapDataId = await resolveScrimMapDataId(scrimId, id);
const t = await getTranslations("mapPage");
+ // The active tab components are cached ("use cache"), so the locale is
+ // passed in as a prop/cache key rather than read from the cookie inside.
+ const locale = (await getLocale()) as Locale;
// Tournament context for back navigation
const fromTournament = searchParams.from === "tournament";
const tournamentId = searchParams.tournamentId as string | undefined;
const matchId = searchParams.matchId as string | undefined;
- const { team1, team2 } = await getColorblindMode(user?.id ?? "");
-
const [
mostPlayedHeroes,
mapDetails,
map,
visibility,
heroBans,
- noteContent,
tempoChartEnabled,
positionalDataEnabled,
+ coachingCanvasEnabled,
matchStory,
] = await Promise.all([
- AppRuntime.runPromise(
- PlayerService.pipe(Effect.flatMap((svc) => svc.getMostPlayedHeroes(id)))
- ),
- prisma.matchStart.findFirst({
- where: { MapDataId: mapDataId },
- select: { map_name: true, team_1_name: true },
- }),
- prisma.map.findFirst({
- where: { id },
- select: { replayCode: true, vod: true },
- }),
- prisma.scrim.findFirst({
- where: { id: parseInt(params.scrimId) },
- select: { guestMode: true },
- }),
- prisma.heroBan.findMany({
- where: { MapDataId: mapDataId },
- }),
- prisma.note.findFirst({
- where: {
- scrimId: parseInt(params.scrimId),
- MapDataId: mapDataId,
- },
- select: { content: true },
- }),
- tempoChart(),
- positionalData(),
- // A story failure must never break the map page — the tab just hides.
- AppRuntime.runPromise(
- MatchStoryService.pipe(
- Effect.flatMap((svc) => svc.getMatchStory(mapDataId)),
- Effect.catchAll(() => Effect.succeed(null))
- )
- ),
+ getCachedMostPlayedHeroes(id),
+ getCachedMapDetails(id, mapDataId),
+ getCachedMapRow(scrimId, id),
+ getCachedScrimVisibility(scrimId),
+ getCachedHeroBans(id, mapDataId),
+ getFlag(tempoChart),
+ getFlag(positionalData),
+ getFlag(coachingCanvas),
+ getCachedMatchStory(id, mapDataId),
]);
const translatedMapName = await translateMapName(
@@ -177,71 +195,72 @@ export default async function MapDashboardPage(
: "overview";
return (
- <DirectionalTransition>
- <StatsViewBeacon />
- <div className="flex-col md:flex">
- <AppHeader
- switcher={<PlayerSwitcher mostPlayedHeroes={mostPlayedHeroes} />}
- session={session}
- user={user}
- guestMode={visibility?.guestMode ?? false}
- />
- <div className="flex-1 space-y-4 px-6 pt-6 pb-12 md:px-8">
- <nav className="text-muted-foreground text-sm">
- <Link
- href={
- (fromTournament && tournamentId && matchId
- ? `/tournaments/${tournamentId}/match/${matchId}`
- : `/${params.team}/scrim/${params.scrimId}`) as Route
+ <div className="flex-col md:flex">
+ <AppHeader
+ switcher={<PlayerSwitcher mostPlayedHeroes={mostPlayedHeroes} />}
+ session={viewer.session}
+ user={viewer.user}
+ guestMode={visibility?.guestMode ?? false}
+ />
+ <div className="flex-1 space-y-4 px-6 pt-6 pb-12 md:px-8">
+ <nav className="text-muted-foreground text-sm">
+ <Link
+ href={
+ (fromTournament && tournamentId && matchId
+ ? `/tournaments/${tournamentId}/match/${matchId}`
+ : `/${params.team}/scrim/${params.scrimId}`) as Route
+ }
+ transitionTypes={["contract-map"]}
+ className="hover:text-foreground"
+ >
+ ← {t("back")}
+ </Link>
+ </nav>
+ <div className="flex items-center justify-between space-y-2">
+ <h1 className="text-2xl font-bold tracking-tight">
+ {translatedMapName}
+ </h1>
+ <HeroBans
+ heroBans={heroBans}
+ team1Name={mapDetails?.team_1_name ?? "Team 1"}
+ />
+ </div>
+ <div className="font-semibold tracking-tight">
+ {map?.replayCode && (
+ <ReplayCode replayCode={map?.replayCode ?? ""} subtitle={true} />
+ )}
+ </div>
+ <ViewTransition enter="slide-up" default="none">
+ <MapTabs tabs={tabs} activeTab={activeTab}>
+ {/* No key on this boundary: switching tabs re-suspends it inside
+ MapTabs' transition, so the previous tab stays visible (dimmed,
+ under the dot-matrix loader) instead of flashing the skeleton.
+ The skeleton only shows on the initial stream. */}
+ <Suspense
+ fallback={
+ <ViewTransition exit="slide-down">
+ <MapTabsSkeleton />
+ </ViewTransition>
}
- transitionTypes={["contract-map"]}
- className="hover:text-foreground"
>
- ← {t("back")}
- </Link>
- </nav>
- <div className="flex items-center justify-between space-y-2">
- <h1 className="text-2xl font-bold tracking-tight">
- {translatedMapName}
- </h1>
- <HeroBans
- heroBans={heroBans}
- team1Name={mapDetails?.team_1_name ?? "Team 1"}
- />
- </div>
- <div className="font-semibold tracking-tight">
- {map?.replayCode && (
- <ReplayCode replayCode={map?.replayCode ?? ""} subtitle={true} />
- )}
- </div>
- <ViewTransition enter="slide-up" default="none">
- <MapTabs tabs={tabs} activeTab={activeTab}>
- <Suspense
- key={activeTab}
- fallback={
- <ViewTransition exit="slide-down">
- <MapTabsSkeleton />
- </ViewTransition>
- }
- >
- <ActiveMapTab
- activeTab={activeTab}
- id={id}
- mapDataId={mapDataId}
- scrimId={parseInt(params.scrimId)}
- team1Color={team1}
- team2Color={team2}
- tempoChartEnabled={tempoChartEnabled}
- positionalDataEnabled={positionalDataEnabled}
- matchStory={matchStory}
- noteContent={noteContent?.content ?? ""}
- vod={map?.vod ?? ""}
- />
- </Suspense>
- </MapTabs>
- </ViewTransition>
- </div>
+ <ActiveMapTab
+ activeTab={activeTab}
+ id={id}
+ mapDataId={mapDataId}
+ scrimId={scrimId}
+ locale={locale}
+ team1Color={viewer.team1Color}
+ team2Color={viewer.team2Color}
+ tempoChartEnabled={tempoChartEnabled}
+ positionalDataEnabled={positionalDataEnabled}
+ coachingCanvasEnabled={coachingCanvasEnabled}
+ matchStory={matchStory}
+ vod={map?.vod ?? ""}
+ />
+ </Suspense>
+ </MapTabs>
+ </ViewTransition>
</div>
- </DirectionalTransition>
+ </div>
);
}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/loading.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/loading.tsx
deleted file mode 100644
index 7826c4c70..000000000
--- a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/loading.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { DirectionalTransition } from "@/components/directional-transition";
-import { StatPanel } from "@/components/player/stat-panel";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { getTranslations } from "next-intl/server";
-
-const STAT_BLOCK_SLOTS = ["a", "b", "c", "d"] as const;
-const HERO_STAT_SLOTS = ["a", "b", "c", "d", "e", "f"] as const;
-
-export default async function PlayerDashboardLoading() {
- const t = await getTranslations("mapPage.player");
-
- return (
- <DirectionalTransition>
- <div className="flex-col md:flex">
- <header
- className="shadow-xs"
- style={{ viewTransitionName: "site-header" }}
- >
- <div className="hidden min-h-16 items-center px-4 py-2 md:flex">
- <Skeleton className="h-6 w-24" />
- <div className="ml-auto flex items-center space-x-4">
- <Skeleton className="border-input hidden h-9 w-full rounded-md border px-3 py-1 md:flex md:w-[100px] lg:w-[300px]" />
- <Skeleton className="h-9 w-9" />
- <Skeleton className="h-8 w-8 rounded-full" />
- </div>
- </div>
- <div className="flex h-16 items-center px-4 md:hidden">
- <Skeleton className="h-6 w-24" />
- <div className="ml-auto flex items-center space-x-4">
- <Skeleton className="h-9 w-9" />
- <Skeleton className="h-8 w-8 rounded-full" />
- </div>
- </div>
- </header>
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <div className="text-muted-foreground flex items-center gap-3 text-sm">
- <Skeleton className="h-4 w-32" />
- <span className="text-muted-foreground/40" aria-hidden="true">
- |
- </span>
- <Skeleton className="h-4 w-32" />
- </div>
-
- <div className="mt-3">
- <Skeleton className="h-8 w-48" />
- </div>
-
- <div className="mt-2 flex items-center gap-3">
- <Skeleton className="h-3 w-20" />
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <Skeleton className="h-3 w-16" />
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <Skeleton className="h-3 w-24" />
- </div>
-
- <Tabs defaultValue="overview" className="mt-6 space-y-4">
- <TabsList aria-label="Player sections">
- <TabsTrigger value="overview">
- {t("dashboard.overview")}
- </TabsTrigger>
- <TabsTrigger value="analytics">
- {t("dashboard.analytics")}
- </TabsTrigger>
- <TabsTrigger value="charts">{t("dashboard.charts")}</TabsTrigger>
- </TabsList>
- </Tabs>
-
- <StatPanel className="mt-4">
- <div className="grid grid-cols-2 lg:grid-cols-4">
- {STAT_BLOCK_SLOTS.map((slot) => (
- <div key={slot} className="flex flex-col px-5 py-4">
- <Skeleton className="h-3 w-24" />
- <Skeleton className="mt-3 h-7 w-20" />
- <Skeleton className="mt-2 h-3 w-32" />
- </div>
- ))}
- </div>
- </StatPanel>
-
- <div className="mt-6">
- <Skeleton className="h-6 w-40" />
- <div className="mt-3 flex flex-col gap-4 2xl:flex-row">
- <div className="2xl:flex-1">
- <StatPanel>
- <div className="flex flex-col lg:flex-row">
- <div className="border-border flex flex-col items-center justify-center gap-3 px-5 py-5 lg:w-[200px] lg:shrink-0 lg:border-r">
- <Skeleton className="aspect-square w-full max-w-[160px] rounded-lg" />
- <Skeleton className="h-3 w-12" />
- </div>
- <div className="grid flex-1 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-3">
- {HERO_STAT_SLOTS.map((slot) => (
- <div key={slot} className="flex flex-col px-5 py-4">
- <Skeleton className="h-3 w-20" />
- <Skeleton className="mt-3 h-7 w-20" />
- <Skeleton className="mt-2 h-3 w-24" />
- </div>
- ))}
- </div>
- </div>
- </StatPanel>
- </div>
- <div className="2xl:w-[480px] 2xl:shrink-0">
- <div className="ring-foreground/10 max-h-[29.5rem] overflow-hidden rounded-xl ring-1">
- <Skeleton className="h-[29.5rem] w-full" />
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </DirectionalTransition>
- );
-}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/page.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/page.tsx
index e19a11f0d..0ff0dedac 100644
--- a/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/page.tsx
+++ b/apps/web/src/app/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]/page.tsx
@@ -1,33 +1,39 @@
import { AppHeader } from "@/components/app-header";
+import { NoAuthCard } from "@/components/auth/no-auth";
import { PlayerCharts } from "@/components/charts/player/player-charts";
import { DirectionalTransition } from "@/components/directional-transition";
import { PlayerSwitcher } from "@/components/map/player-switcher";
import { PlayerAnalytics } from "@/components/player/analytics";
import { DefaultOverview } from "@/components/player/default-overview";
import { PlayerTelemetry } from "@/components/player/player-telemetry";
+import { StatPanel } from "@/components/player/stat-panel";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { PlayerService } from "@/data/player";
+import { getCachedMostPlayedHeroes } from "@/data/cached/map-cache";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
-import { auth } from "@/lib/auth";
+import { defaultLocale } from "@/i18n/config";
+import { auth, isAuthedToViewMap } from "@/lib/auth";
import { resolveMapDataId } from "@/lib/map-data-resolver";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { translateHeroName, translateMapName } from "@/lib/utils";
import { heroRoleMapping, type HeroName } from "@/types/heroes";
import type { PagePropsWithLocale } from "@/types/next";
import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
export async function generateMetadata(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations({
- locale: params.locale,
- namespace: "mapPage.playerMetadata",
- });
+ const t = getMetadataTranslations("mapPage.playerMetadata");
const playerName = decodeURIComponent(params.playerId);
return {
@@ -48,23 +54,47 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function PlayerDashboardPage(
+// Static shell: params (used by the header, nav links, and heading) are
+// request-time under PPR, so everything streams into ONE boundary whose
+// fallback mirrors the loaded page frame and the overview tab's pending
+// layout — a single stable skeleton the content replaces in place.
+export default function PlayerDashboardPage(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]">
) {
- const params = await props.params;
- const t = await getTranslations("mapPage.player.dashboard");
+ return (
+ <DirectionalTransition>
+ <div className="flex-col md:flex">
+ <Suspense fallback={<PlayerDashboardSkeleton />}>
+ <PlayerDashboardContent params={props.params} />
+ </Suspense>
+ </div>
+ </DirectionalTransition>
+ );
+}
+
+async function PlayerDashboardContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/[team]/scrim/[scrimId]/map/[mapId]/player/[playerId]">["params"];
+}) {
+ const params = await paramsPromise;
const id = parseInt(params.mapId);
+ // The route's access gate — the [scrimId] layout no longer gates the
+ // subtree (a layout gate adds a chrome-less loading phase above every
+ // child route).
+ if (!(await isAuthedToViewMap(parseInt(params.scrimId), id))) {
+ return <NoAuthCard />;
+ }
+ const t = await getTranslations("mapPage.player.dashboard");
const mapDataId = await resolveMapDataId(id);
const playerName = decodeURIComponent(params.playerId);
- const mostPlayedHeroes = await AppRuntime.runPromise(
- PlayerService.pipe(Effect.flatMap((svc) => svc.getMostPlayedHeroes(id)))
- );
+ const mostPlayedHeroes = await getCachedMostPlayedHeroes(id);
const mapName = await prisma.matchStart.findFirst({
where: {
@@ -100,96 +130,203 @@ export default async function PlayerDashboardPage(
})) ?? { guestMode: false };
return (
- <DirectionalTransition>
- <div className="flex-col md:flex">
- <AppHeader
- switcher={<PlayerSwitcher mostPlayedHeroes={mostPlayedHeroes} />}
- session={session}
- user={user}
- guestMode={visibility.guestMode}
- />
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <nav className="text-muted-foreground flex items-center gap-3 text-sm">
- <Link
- href={
- `/${params.team}/scrim/${params.scrimId}/map/${params.mapId}` as Route
- }
- transitionTypes={["nav-back"]}
- className="hover:text-foreground"
- >
- ← {t("back")}
- </Link>
- <span className="text-muted-foreground/40" aria-hidden="true">
- |
- </span>
- <Link
- href={`/stats/${params.playerId}` as Route}
- transitionTypes={["nav-forward"]}
- className="hover:text-foreground"
- >
- {t("viewStats")} →
- </Link>
- </nav>
-
- <div className="mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
- <h1 className="text-2xl font-bold tracking-tight break-words">
- {playerName}
- </h1>
- </div>
-
- <div
- className="text-muted-foreground mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[0.6875rem] tracking-[0.06em] uppercase tabular-nums"
- aria-label="Player metadata"
+ <>
+ <AppHeader
+ switcher={<PlayerSwitcher mostPlayedHeroes={mostPlayedHeroes} />}
+ session={session}
+ user={user}
+ guestMode={visibility.guestMode}
+ />
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <nav className="text-muted-foreground flex items-center gap-3 text-sm">
+ <Link
+ href={
+ `/${params.team}/scrim/${params.scrimId}/map/${params.mapId}` as Route
+ }
+ transitionTypes={["nav-back"]}
+ className="hover:text-foreground"
+ >
+ ← {t("back")}
+ </Link>
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ |
+ </span>
+ <Link
+ href={`/stats/${params.playerId}` as Route}
+ transitionTypes={["nav-forward"]}
+ className="hover:text-foreground"
>
- <span>{translatedMapName}</span>
- {role && (
- <>
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <span>{role}</span>
- </>
- )}
- {heroDisplayName && (
- <>
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <span>{heroDisplayName}</span>
- </>
- )}
- {playerEntry?.player_team && (
- <>
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <span>{playerEntry.player_team}</span>
- </>
- )}
+ {t("viewStats")} →
+ </Link>
+ </nav>
+
+ <div className="mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+ <h1 className="text-2xl font-bold tracking-tight break-words">
+ {playerName}
+ </h1>
+ </div>
+
+ <div
+ className="text-muted-foreground mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[0.6875rem] tracking-[0.06em] uppercase tabular-nums"
+ aria-label="Player metadata"
+ >
+ <span>{translatedMapName}</span>
+ {role && (
+ <>
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <span>{role}</span>
+ </>
+ )}
+ {heroDisplayName && (
+ <>
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <span>{heroDisplayName}</span>
+ </>
+ )}
+ {playerEntry?.player_team && (
+ <>
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <span>{playerEntry.player_team}</span>
+ </>
+ )}
+ </div>
+
+ <Tabs defaultValue="overview" className="mt-6 space-y-4">
+ <TabsList aria-label="Player sections">
+ <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
+ <TabsTrigger value="analytics">{t("analytics")}</TabsTrigger>
+ <TabsTrigger value="charts">{t("charts")}</TabsTrigger>
+ <TabsTrigger value="telemetry">{t("telemetry")}</TabsTrigger>
+ </TabsList>
+ <TabsContent value="overview" className="space-y-4">
+ <DefaultOverview id={id} playerName={playerName} />
+ </TabsContent>
+ <TabsContent value="analytics" className="space-y-4">
+ <PlayerAnalytics id={id} playerName={playerName} />
+ </TabsContent>
+ <TabsContent value="charts" className="space-y-4">
+ <PlayerCharts id={id} playerName={playerName} />
+ </TabsContent>
+ <TabsContent value="telemetry" className="space-y-4">
+ <PlayerTelemetry id={id} playerName={playerName} />
+ </TabsContent>
+ </Tabs>
+ </div>
+ </>
+ );
+}
+
+const STAT_BLOCK_SLOTS = ["a", "b", "c", "d"] as const;
+const HERO_STAT_SLOTS = ["a", "b", "c", "d", "e", "f"] as const;
+
+// Mirrors the loaded frame (header, nav row, heading, meta line, tab list)
+// and the overview tab's pending layout (stat panel + hero statistics).
+function PlayerDashboardSkeleton() {
+ const t = getStaticTranslations("mapPage.player.dashboard");
+
+ return (
+ <>
+ <header
+ className="shadow-xs"
+ style={{ viewTransitionName: "site-header" }}
+ >
+ <div className="hidden min-h-16 items-center px-4 py-2 md:flex">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="border-input hidden h-9 w-full rounded-md border px-3 py-1 md:flex md:w-[100px] lg:w-[300px]" />
+ <Skeleton className="h-9 w-9" />
+ <Skeleton className="h-8 w-8 rounded-full" />
+ </div>
+ </div>
+ <div className="flex h-16 items-center px-4 md:hidden">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="h-9 w-9" />
+ <Skeleton className="h-8 w-8 rounded-full" />
</div>
+ </div>
+ </header>
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <div className="text-muted-foreground flex items-center gap-3 text-sm">
+ <Skeleton className="h-4 w-32" />
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ |
+ </span>
+ <Skeleton className="h-4 w-32" />
+ </div>
+
+ <div className="mt-3 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+ <Skeleton className="h-8 w-48" />
+ </div>
- <Tabs defaultValue="overview" className="mt-6 space-y-4">
- <TabsList aria-label="Player sections">
- <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
- <TabsTrigger value="analytics">{t("analytics")}</TabsTrigger>
- <TabsTrigger value="charts">{t("charts")}</TabsTrigger>
- <TabsTrigger value="telemetry">{t("telemetry")}</TabsTrigger>
- </TabsList>
- <TabsContent value="overview" className="space-y-4">
- <DefaultOverview id={id} playerName={playerName} />
- </TabsContent>
- <TabsContent value="analytics" className="space-y-4">
- <PlayerAnalytics id={id} playerName={playerName} />
- </TabsContent>
- <TabsContent value="charts" className="space-y-4">
- <PlayerCharts id={id} playerName={playerName} />
- </TabsContent>
- <TabsContent value="telemetry" className="space-y-4">
- <PlayerTelemetry id={id} playerName={playerName} />
- </TabsContent>
- </Tabs>
+ <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1">
+ <Skeleton className="h-3 w-20" />
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <Skeleton className="h-3 w-16" />
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <Skeleton className="h-3 w-24" />
+ </div>
+
+ <Tabs defaultValue="overview" className="mt-6 space-y-4">
+ <TabsList aria-label="Player sections">
+ <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
+ <TabsTrigger value="analytics">{t("analytics")}</TabsTrigger>
+ <TabsTrigger value="charts">{t("charts")}</TabsTrigger>
+ <TabsTrigger value="telemetry">{t("telemetry")}</TabsTrigger>
+ </TabsList>
+ <StatPanel>
+ <div className="grid grid-cols-2 lg:grid-cols-4">
+ {STAT_BLOCK_SLOTS.map((slot) => (
+ <div key={slot} className="flex flex-col px-5 py-4">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-3 h-7 w-20" />
+ <Skeleton className="mt-2 h-3 w-32" />
+ </div>
+ ))}
+ </div>
+ </StatPanel>
+ </Tabs>
+
+ <div className="mt-6">
+ <Skeleton className="h-6 w-40" />
+ <div className="mt-3 flex flex-col gap-4 2xl:flex-row">
+ <div className="2xl:flex-1">
+ <StatPanel>
+ <div className="flex flex-col lg:flex-row">
+ <div className="border-border flex flex-col items-center justify-center gap-3 px-5 py-5 lg:w-[200px] lg:shrink-0 lg:border-r">
+ <Skeleton className="aspect-square w-full max-w-[160px] rounded-lg" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ <div className="grid flex-1 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-3">
+ {HERO_STAT_SLOTS.map((slot) => (
+ <div key={slot} className="flex flex-col px-5 py-4">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-3 h-7 w-20" />
+ <Skeleton className="mt-2 h-3 w-24" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </StatPanel>
+ </div>
+ <div className="2xl:w-[480px] 2xl:shrink-0">
+ <div className="ring-foreground/10 max-h-[29.5rem] overflow-hidden rounded-xl ring-1">
+ <Skeleton className="h-[29.5rem] w-full" />
+ </div>
+ </div>
+ </div>
</div>
</div>
- </DirectionalTransition>
+ </>
);
}
diff --git a/apps/web/src/app/[team]/scrim/[scrimId]/page.tsx b/apps/web/src/app/[team]/scrim/[scrimId]/page.tsx
index 3e2c90cd1..b69ff727c 100644
--- a/apps/web/src/app/[team]/scrim/[scrimId]/page.tsx
+++ b/apps/web/src/app/[team]/scrim/[scrimId]/page.tsx
@@ -1,4 +1,5 @@
import { ScrimFeedbackBanner } from "@/components/team-ops/scrim-feedback-banner";
+import { NoAuthCard } from "@/components/auth/no-auth";
import { DashboardLayout } from "@/components/dashboard-layout";
import { DirectionalTransition } from "@/components/directional-transition";
import { AddMapCard } from "@/components/map/add-map";
@@ -16,24 +17,31 @@ import {
} from "@/components/scrim/scrim-overview-section";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import {
- ScrimOverviewService,
- ScrimPositionalArtifactsService,
- ScrimPositionalStatsService,
- ScrimService,
-} from "@/data/scrim";
-import { ScrimInitiationService } from "@/data/scrim/initiation-service";
+ getCachedScrim,
+ getCachedScrimInitiation,
+ getCachedScrimOverview,
+ getCachedScrimPositionalArtifacts,
+ getCachedScrimPositionalStats,
+} from "@/data/cached/scrim-cache";
import { resolveScrimMapWinners } from "@/data/scrim/map-winner-names";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
+import { defaultLocale } from "@/i18n/config";
import { auth, canManageTeam, isAuthedToViewScrim } from "@/lib/auth";
import { mapComparison, overviewCard, positionalData } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { PagePropsWithLocale } from "@/types/next";
import { $Enums } from "@/generated/prisma/browser";
@@ -47,26 +55,17 @@ export async function generateMetadata(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations({
- locale: params.locale,
- namespace: "scrimPage.metadata",
- });
+ const t = getMetadataTranslations("scrimPage.metadata");
const scrimId = Number(params.scrimId);
const canViewScrim =
Number.isSafeInteger(scrimId) &&
scrimId > 0 &&
(await isAuthedToViewScrim(scrimId));
- const scrim = canViewScrim
- ? await prisma.scrim.findFirst({
- where: {
- id: scrimId,
- },
- select: {
- name: true,
- },
- })
- : null;
+ // Cached read: with streamed metadata under PPR, the <title> chunk flushes
+ // whenever generateMetadata resolves — a raw DB read here pushes the title
+ // deep into the stream, which reads as "the tab never shows a title".
+ const scrim = canViewScrim ? await getCachedScrim(scrimId) : null;
const scrimName = scrim?.name ?? t("scrim");
@@ -86,17 +85,59 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function ScrimDashboardPage(
+// Static shell: the chrome and page frame prerender and mount ONCE. (The old
+// route-level loading.tsx and layout auth gate each rendered their own
+// DashboardLayout, so every fallback→content swap remounted the chrome and
+// re-suspended the header — the multi-skeleton flash.) Everything
+// request-derived streams into the single boundary below; the auth gate is
+// the first step of ScrimContent so it resolves inside the same skeleton.
+export default function ScrimDashboardPage(
props: PagePropsWithLocale<"/[team]/scrim/[scrimId]">
) {
- const params = await props.params;
+ return (
+ <DirectionalTransition>
+ <DashboardLayout guestModeSource={guestModeSource(props.params)}>
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <Suspense fallback={<ScrimOverviewSkeleton />}>
+ <ScrimContent params={props.params} />
+ </Suspense>
+ </div>
+ </DashboardLayout>
+ </DirectionalTransition>
+ );
+}
+
+// Thunk, not a started promise: the read must begin inside the streamed
+// header (after `connection()`), never during the static shell render.
+function guestModeSource(
+ params: PagePropsWithLocale<"/[team]/scrim/[scrimId]">["params"]
+) {
+ return async () => {
+ const { scrimId } = await params;
+ const id = parseInt(scrimId);
+ if (!Number.isSafeInteger(id) || id <= 0) return false;
+ const row = await prisma.scrim.findFirst({
+ where: { id },
+ select: { guestMode: true },
+ });
+ return row?.guestMode ?? false;
+ };
+}
+
+async function ScrimContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/[team]/scrim/[scrimId]">["params"];
+}) {
+ const params = await paramsPromise;
const id = parseInt(params.scrimId);
if (!Number.isSafeInteger(id) || id <= 0) notFound();
+ if (!(await isAuthedToViewScrim(id))) return <NoAuthCard />;
const session = await auth();
const t = await getTranslations("scrimPage");
@@ -108,14 +149,11 @@ export default async function ScrimDashboardPage(
mapDataRows,
user,
feedbackScrim,
- visibilityRow,
mapComparisonEnabled,
overviewCardEnabled,
showPositional,
] = await Promise.all([
- AppRuntime.runPromise(
- ScrimService.pipe(Effect.flatMap((svc) => svc.getScrim(id)))
- ),
+ getCachedScrim(id),
prisma.map.findMany({
where: { scrimId: id },
orderBy: [{ order: "asc" }, { id: "asc" }],
@@ -149,18 +187,13 @@ export default async function ScrimDashboardPage(
opponentTeam: { select: { name: true } },
},
}),
- prisma.scrim.findFirst({
- where: { id },
- select: { guestMode: true },
- }),
- mapComparison(),
- overviewCard(),
- positionalData(),
+ getFlag(mapComparison),
+ getFlag(overviewCard),
+ getFlag(positionalData),
]);
if (!scrim) notFound();
const teamId = scrim.teamId;
- const visibility = visibilityRow ?? { guestMode: false };
const mapTeamNames = new Map<number, { team1: string; team2: string }>();
for (const row of mapDataRows) {
@@ -229,34 +262,16 @@ export default async function ScrimDashboardPage(
const [overviewData, positionalStats, positionalArtifacts, scrimInitiation] =
await Promise.all([
overviewCardEnabled && maps.length > 0 && teamId && !isNewTeam
- ? AppRuntime.runPromise(
- ScrimOverviewService.pipe(
- Effect.flatMap((svc) => svc.getScrimOverview(id, teamId))
- )
- )
+ ? getCachedScrimOverview(id, teamId)
: Promise.resolve(null),
showPositional && maps.length > 0
- ? AppRuntime.runPromise(
- ScrimPositionalStatsService.pipe(
- Effect.flatMap((svc) => svc.getScrimPositionalStats(id))
- )
- )
+ ? getCachedScrimPositionalStats(id)
: Promise.resolve(null),
showPositional && maps.length > 0 && teamId
- ? AppRuntime.runPromise(
- ScrimPositionalArtifactsService.pipe(
- Effect.flatMap((svc) =>
- svc.getScrimPositionalArtifacts(id, teamId)
- )
- )
- )
+ ? getCachedScrimPositionalArtifacts(id, teamId)
: Promise.resolve(null),
overviewCardEnabled && maps.length > 0 && teamId && !isNewTeam
- ? AppRuntime.runPromise(
- ScrimInitiationService.pipe(
- Effect.flatMap((svc) => svc.getScrimInitiation(id))
- )
- )
+ ? getCachedScrimInitiation(id)
: Promise.resolve(null),
]);
@@ -311,207 +326,226 @@ export default async function ScrimDashboardPage(
}
return (
- <DirectionalTransition>
- <DashboardLayout guestMode={visibility.guestMode}>
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <nav className="text-muted-foreground flex items-center gap-3 text-sm">
- <Link href="/dashboard" transitionTypes={["contract-map"]}>
- ← {t("back")}
+ <>
+ <nav className="text-muted-foreground flex items-center gap-3 text-sm">
+ <Link href="/dashboard" transitionTypes={["contract-map"]}>
+ ← {t("back")}
+ </Link>
+ {teamId && (
+ <>
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ |
+ </span>
+ <Link
+ href={`/stats/team/${teamId}` as Route}
+ transitionTypes={["nav-forward"]}
+ >
+ {t("viewStats")} →
</Link>
- {teamId && (
- <>
- <span className="text-muted-foreground/40" aria-hidden="true">
- |
- </span>
+ </>
+ )}
+ </nav>
+
+ <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2">
+ <div className="flex min-w-0 items-center gap-2">
+ <h1 className="truncate text-2xl font-bold tracking-tight">
+ {scrim?.name ?? t("newScrim")}
+ </h1>
+ {hasPerms && (
+ <Tooltip>
+ <TooltipTrigger asChild>
<Link
- href={`/stats/team/${teamId}` as Route}
- transitionTypes={["nav-forward"]}
+ href={`/${params.team}/scrim/${params.scrimId}/edit` as Route}
+ aria-label={t("edit")}
+ className="text-muted-foreground hover:bg-muted hover:text-foreground -mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors"
>
- {t("viewStats")} →
+ <Pencil2Icon className="h-3.5 w-3.5" />
</Link>
- </>
- )}
- </nav>
-
- <div className="mt-3 flex flex-wrap items-center gap-x-3 gap-y-2">
- <div className="flex min-w-0 items-center gap-2">
- <h1 className="truncate text-2xl font-bold tracking-tight">
- {scrim?.name ?? t("newScrim")}
- </h1>
- {hasPerms && (
- <Tooltip>
- <TooltipTrigger asChild>
- <Link
- href={
- `/${params.team}/scrim/${params.scrimId}/edit` as Route
- }
- aria-label={t("edit")}
- className="text-muted-foreground hover:bg-muted hover:text-foreground -mt-0.5 inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors"
- >
- <Pencil2Icon className="h-3.5 w-3.5" />
- </Link>
- </TooltipTrigger>
- <TooltipContent>{t("edit")}</TooltipContent>
- </Tooltip>
- )}
- </div>
- {showOverview && (
- <div className="ml-auto flex items-center gap-3">
- <WinLossBadge
- wins={overviewData.wins}
- losses={overviewData.losses}
- draws={overviewData.draws}
- />
- <WinRateBadge
- wins={overviewData.wins}
- mapCount={overviewData.mapCount}
- />
- </div>
- )}
+ </TooltipTrigger>
+ <TooltipContent>{t("edit")}</TooltipContent>
+ </Tooltip>
+ )}
+ </div>
+ {showOverview && (
+ <div className="ml-auto flex items-center gap-3">
+ <WinLossBadge
+ wins={overviewData.wins}
+ losses={overviewData.losses}
+ draws={overviewData.draws}
+ />
+ <WinRateBadge
+ wins={overviewData.wins}
+ mapCount={overviewData.mapCount}
+ />
</div>
+ )}
+ </div>
- <div
- className="text-muted-foreground mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[0.6875rem] tracking-[0.04em] uppercase tabular-nums"
- aria-label="Scrim metadata"
- >
- <ClientDate date={scrim.date} />
+ <div
+ className="text-muted-foreground mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 font-mono text-[0.6875rem] tracking-[0.04em] uppercase tabular-nums"
+ aria-label="Scrim metadata"
+ >
+ <ClientDate date={scrim.date} />
+ <span className="text-muted-foreground/40" aria-hidden="true">
+ ·
+ </span>
+ <span>{t("meta.mapCount", { count: maps.length })}</span>
+ {scrim.opponentTeamAbbr && (
+ <>
<span className="text-muted-foreground/40" aria-hidden="true">
·
</span>
- <span>{t("meta.mapCount", { count: maps.length })}</span>
- {scrim.opponentTeamAbbr && (
- <>
- <span className="text-muted-foreground/40" aria-hidden="true">
- ·
- </span>
- <Tooltip>
- <TooltipTrigger asChild>
- <Link
- href={
- `/scouting/team/${encodeURIComponent(scrim.opponentTeamAbbr)}` as Route
- }
- className="hover:text-foreground inline-flex items-center gap-1.5 no-underline"
- >
- <BadgeCheck
- className="text-primary size-3"
- aria-hidden="true"
- />
- <span>
- {t("meta.opp")}{" "}
- {opponentFullName ?? scrim.opponentTeamAbbr}
- </span>
- </Link>
- </TooltipTrigger>
- <TooltipContent>View OWCS scouting report</TooltipContent>
- </Tooltip>
- </>
- )}
- </div>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <Link
+ href={
+ `/scouting/team/${encodeURIComponent(scrim.opponentTeamAbbr)}` as Route
+ }
+ className="hover:text-foreground inline-flex items-center gap-1.5 no-underline"
+ >
+ <BadgeCheck
+ className="text-primary size-3"
+ aria-hidden="true"
+ />
+ <span>
+ {t("meta.opp")} {opponentFullName ?? scrim.opponentTeamAbbr}
+ </span>
+ </Link>
+ </TooltipTrigger>
+ <TooltipContent>View OWCS scouting report</TooltipContent>
+ </Tooltip>
+ </>
+ )}
+ </div>
- {feedbackScrim?.opponentTeamId != null &&
- feedbackScrim.opponentTeam &&
- !feedbackScrim.feedback &&
- canManage && (
- <div className="mt-4">
- <ScrimFeedbackBanner
- scrimId={feedbackScrim.id}
- opponentName={feedbackScrim.opponentTeam.name}
- />
- </div>
- )}
+ {feedbackScrim?.opponentTeamId != null &&
+ feedbackScrim.opponentTeam &&
+ !feedbackScrim.feedback &&
+ canManage && (
+ <div className="mt-4">
+ <ScrimFeedbackBanner
+ scrimId={feedbackScrim.id}
+ opponentName={feedbackScrim.opponentTeam.name}
+ />
+ </div>
+ )}
- {showOverview ? (
- <div className="mt-8">
- <ScrimOverviewSection
- data={overviewData}
- positionalStats={positionalStats}
- positionalArtifacts={positionalArtifacts}
- initiation={scrimInitiation}
- wpaSlot={
- // Streams in as the last accordion item without blocking the
- // page: aggregating WPA across a scrim's maps is the heaviest
- // read here. Returns null (no item) when there's no data.
- <Suspense fallback={null}>
- <ScrimWpaSection scrimId={id} />
- </Suspense>
- }
- />
- </div>
- ) : showOverviewUnavailable ? (
- <div className="mt-8">
- <ScrimOverviewUnavailable />
- </div>
- ) : (
- showPositional &&
- positionalStats && (
- <div className="mt-8">
- <PositionalStatsSection
- data={positionalStats}
- artifacts={positionalArtifacts}
- />
- </div>
- )
- )}
+ {showOverview ? (
+ <div className="mt-8">
+ <ScrimOverviewSection
+ data={overviewData}
+ positionalStats={positionalStats}
+ positionalArtifacts={positionalArtifacts}
+ initiation={scrimInitiation}
+ wpaSlot={
+ // Streams in as the last accordion item without blocking the
+ // page: aggregating WPA across a scrim's maps is the heaviest
+ // read here. Returns null (no item) when there's no data.
+ <Suspense fallback={null}>
+ <ScrimWpaSection scrimId={id} />
+ </Suspense>
+ }
+ />
+ </div>
+ ) : showOverviewUnavailable ? (
+ <div className="mt-8">
+ <ScrimOverviewUnavailable />
+ </div>
+ ) : (
+ showPositional &&
+ positionalStats && (
+ <div className="mt-8">
+ <PositionalStatsSection
+ data={positionalStats}
+ artifacts={positionalArtifacts}
+ />
+ </div>
+ )
+ )}
- {hasPerms && (
- <div className="mt-6">
- <AddMapCard scrimId={id} existingMapCount={maps.length} />
- </div>
- )}
+ {hasPerms && (
+ <div className="mt-6">
+ <AddMapCard scrimId={id} existingMapCount={maps.length} />
+ </div>
+ )}
- <div className="mt-10">
- <h2 className="text-lg font-semibold tracking-tight">
- {t("maps.title")}
- </h2>
+ <div className="mt-10">
+ <h2 className="text-lg font-semibold tracking-tight">
+ {t("maps.title")}
+ </h2>
- {maps.length > 0 ? (
- <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
- {maps.map((map) => {
- const meta = mapMetaById.get(map.id);
- return (
- <MapCardWithSelection
- key={map.id}
- map={map}
- scrimId={scrim.id}
- teamId={teamId ?? params.team}
- locale={params.locale}
- mapComparisonEnabled={mapComparisonEnabled}
- team1Name={meta?.team1Name}
- team2Name={meta?.team2Name}
- ourTeamName={ourTeamName}
- resolvedWinner={meta?.resolvedWinner}
- canManage={hasPerms}
- />
- );
- })}
- </div>
- ) : (
- <Alert variant="destructive" className="mt-4 max-w-xl">
- <ExclamationTriangleIcon
- className="h-4 w-4"
- aria-hidden="true"
+ {maps.length > 0 ? (
+ <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {maps.map((map) => {
+ const meta = mapMetaById.get(map.id);
+ return (
+ <MapCardWithSelection
+ key={map.id}
+ map={map}
+ scrimId={scrim.id}
+ teamId={teamId ?? params.team}
+ locale={params.locale}
+ mapComparisonEnabled={mapComparisonEnabled}
+ team1Name={meta?.team1Name}
+ team2Name={meta?.team2Name}
+ ourTeamName={ourTeamName}
+ resolvedWinner={meta?.resolvedWinner}
+ canManage={hasPerms}
/>
- <AlertTitle>{t("noMaps.title")}</AlertTitle>
- <AlertDescription>
- {t("noMaps.description")}
- <Link
- href="https://docs.parsertime.app"
- target="_blank"
- external
- >
- {t("noMaps.link")}
- </Link>
- .
- </AlertDescription>
- </Alert>
- )}
+ );
+ })}
</div>
- </div>
-
- {mapComparisonEnabled && teamId && (
- <CompareSelectedButton teamId={teamId} />
+ ) : (
+ <Alert variant="destructive" className="mt-4 max-w-xl">
+ <ExclamationTriangleIcon className="h-4 w-4" aria-hidden="true" />
+ <AlertTitle>{t("noMaps.title")}</AlertTitle>
+ <AlertDescription>
+ {t("noMaps.description")}
+ <Link href="https://docs.parsertime.app" target="_blank" external>
+ {t("noMaps.link")}
+ </Link>
+ .
+ </AlertDescription>
+ </Alert>
)}
- </DashboardLayout>
- </DirectionalTransition>
+ </div>
+ {mapComparisonEnabled && teamId && (
+ <CompareSelectedButton teamId={teamId} />
+ )}
+ </>
+ );
+}
+
+// Mirrors the loaded page's frame (back-link nav, title, meta line, overview
+// band, add-map card, maps heading + grid) so content replaces it in place.
+function ScrimOverviewSkeleton() {
+ const t = getStaticTranslations("scrimPage");
+
+ return (
+ <>
+ <nav className="text-muted-foreground flex items-center gap-3 text-sm">
+ <Link href="/dashboard" transitionTypes={["contract-map"]}>
+ ← {t("back")}
+ </Link>
+ </nav>
+ <Skeleton className="mt-3 h-8 w-56" />
+ <Skeleton className="mt-2 h-4 w-72" />
+ <Skeleton className="mt-8 h-32 w-full rounded-xl" />
+ <Skeleton className="mt-6 h-16 w-full rounded-xl" />
+ <div className="mt-10">
+ <h2 className="text-lg font-semibold tracking-tight">
+ {t("maps.title")}
+ </h2>
+ <div className="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {Array.from({ length: 8 }).map((_, index) => (
+ <Skeleton
+ // oxlint-disable-next-line react/no-array-index-key -- skeleton items are homogeneous
+ key={index}
+ className="aspect-video rounded-xl"
+ />
+ ))}
+ </div>
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/about/page.tsx b/apps/web/src/app/about/page.tsx
index a1a72d438..bf2c907c0 100644
--- a/apps/web/src/app/about/page.tsx
+++ b/apps/web/src/app/about/page.tsx
@@ -1,4 +1,5 @@
import { AboutHero } from "@/components/about/about-hero";
+import { Skeleton } from "@/components/ui/skeleton";
import { AboutStory } from "@/components/about/about-story";
import { AboutTimeline } from "@/components/about/about-timeline";
import { AboutValues } from "@/components/about/about-values";
@@ -9,17 +10,17 @@ import { StatsCounter } from "@/components/home/new-landing/stats-counter";
import { TrackedLink } from "@/components/home/new-landing/tracked-link";
import { TrackedSection } from "@/components/home/new-landing/tracked-section";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { Metadata, Route } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getTranslations } from "next-intl/server";
import { OrganizationJsonLd, ProfilePageJsonLd } from "next-seo";
-import { unstable_cache } from "next/cache";
+import { cacheLife } from "next/cache";
import { Instrument_Serif } from "next/font/google";
-import type { SVGProps } from "react";
+import { Suspense, type SVGProps } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const locale = await getLocale();
- const t = await getTranslations({ locale, namespace: "aboutPage.metadata" });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("aboutPage.metadata");
return {
title: t("title"),
@@ -41,27 +42,26 @@ const instrumentSerif = Instrument_Serif({
variable: "--font-instrument-serif",
});
-const getAboutPageStats = unstable_cache(
- async () => {
- const results = await Promise.allSettled([
- prisma.playerStat.count(),
- prisma.calculatedStat.count(),
- prisma.kill.count(),
- prisma.map.count(),
- ]);
-
- const [playerStatCount, calculatedStatCount, killCount, mapCount] =
- results.map((r) => (r.status === "fulfilled" ? r.value : 0));
-
- return {
- statsCount: Math.max(playerStatCount + calculatedStatCount, 800_000),
- killCount: Math.max(killCount, 450_000),
- mapCount: Math.max(mapCount, 6_000),
- };
- },
- ["about-page-stats"],
- { revalidate: 3600 }
-);
+async function getAboutPageStats() {
+ "use cache";
+ cacheLife("hours");
+
+ const results = await Promise.allSettled([
+ prisma.playerStat.count(),
+ prisma.calculatedStat.count(),
+ prisma.kill.count(),
+ prisma.map.count(),
+ ]);
+
+ const [playerStatCount, calculatedStatCount, killCount, mapCount] =
+ results.map((r) => (r.status === "fulfilled" ? r.value : 0));
+
+ return {
+ statsCount: Math.max(playerStatCount + calculatedStatCount, 800_000),
+ killCount: Math.max(killCount, 450_000),
+ mapCount: Math.max(mapCount, 6_000),
+ };
+}
function roundCount(count: number): { value: number; suffix: string } {
if (count >= 100_000) {
@@ -125,7 +125,52 @@ const footerNavigation: FooterNavigation = {
],
};
-export default async function AboutPage() {
+// Static shell: the font-variable wrapper and constant JSON-LD prerender, and
+// the translated/auth-derived content streams into ONE boundary whose fallback
+// mirrors the page's own section layout — a single stable skeleton instead of
+// stacked loading states.
+export default function AboutPage() {
+ return (
+ <div className={`${instrumentSerif.variable} bg-white dark:bg-black`}>
+ <OrganizationJsonLd
+ name="lux.dev"
+ url="https://lux.dev"
+ logo="https://parsertime.app/parsertime.png"
+ sameAs={[
+ "https://twitter.com/luxdotdev",
+ "https://bsky.app/profile/lux.dev",
+ "https://github.com/luxdotdev",
+ ]}
+ />
+ <ProfilePageJsonLd
+ mainEntity={
+ {
+ "@type": "Person",
+ name: "Lucas Doell",
+ url: "https://github.com/lucasdoell",
+ jobTitle: "Founder & Engineer",
+ worksFor: {
+ "@type": "Organization",
+ name: "lux.dev",
+ url: "https://lux.dev",
+ },
+ sameAs: [
+ "https://github.com/lucasdoell",
+ "https://twitter.com/lucasdoell",
+ "https://bsky.app/profile/lucasdoell.dev",
+ ],
+ // next-seo's Person type omits jobTitle despite it being a valid Schema.org property
+ } as Parameters<typeof ProfilePageJsonLd>[0]["mainEntity"]
+ }
+ />
+ <Suspense fallback={<AboutSkeleton />}>
+ <AboutContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function AboutContent() {
const [{ statsCount, killCount, mapCount }, t, session] = await Promise.all([
getAboutPageStats(),
getTranslations("aboutPage"),
@@ -226,38 +271,7 @@ export default async function AboutPage() {
];
return (
- <div className={`${instrumentSerif.variable} bg-white dark:bg-black`}>
- <OrganizationJsonLd
- name="lux.dev"
- url="https://lux.dev"
- logo="https://parsertime.app/parsertime.png"
- sameAs={[
- "https://twitter.com/luxdotdev",
- "https://bsky.app/profile/lux.dev",
- "https://github.com/luxdotdev",
- ]}
- />
- <ProfilePageJsonLd
- mainEntity={
- {
- "@type": "Person",
- name: "Lucas Doell",
- url: "https://github.com/lucasdoell",
- jobTitle: "Founder & Engineer",
- worksFor: {
- "@type": "Organization",
- name: "lux.dev",
- url: "https://lux.dev",
- },
- sameAs: [
- "https://github.com/lucasdoell",
- "https://twitter.com/lucasdoell",
- "https://bsky.app/profile/lucasdoell.dev",
- ],
- // next-seo's Person type omits jobTitle despite it being a valid Schema.org property
- } as Parameters<typeof ProfilePageJsonLd>[0]["mainEntity"]
- }
- />
+ <>
<main>
<TrackedSection name="about-hero">
<AboutHero title={t("hero.title")} subtitle={t("hero.subtitle")} />
@@ -358,6 +372,163 @@ export default async function AboutPage() {
</div>
</div>
</footer>
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded sections' own layout (hero, story, timeline, stats,
+// values, founder, OSS banner, CTA, footer) so the streamed content replaces
+// this in place with no jump.
+function AboutSkeleton() {
+ return (
+ <>
+ <main>
+ <section className="py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto flex max-w-2xl flex-col items-center gap-4">
+ <Skeleton className="h-12 w-80 sm:h-16 sm:w-[480px]" />
+ <Skeleton className="h-5 w-96" />
+ <Skeleton className="h-5 w-72" />
+ </div>
+ </div>
+ </section>
+
+ <section className="py-16 sm:py-24">
+ <div className="mx-auto max-w-3xl px-6 lg:px-8">
+ <Skeleton className="h-9 w-64" />
+ <div className="mt-8 space-y-6">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-3/4" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <Skeleton className="h-9 w-56" />
+ <div className="relative mt-12 ml-4 space-y-12 border-l-2 border-dashed border-gray-200 dark:border-white/10">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="relative pl-8">
+ <Skeleton className="mb-1 h-3.5 w-24" />
+ <Skeleton className="mb-2 h-5 w-48" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="mt-1 h-4 w-4/5" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="mx-auto max-w-7xl overflow-hidden px-6 py-32 sm:py-48 lg:px-8">
+ <div className="max-w-2xl space-y-4">
+ <Skeleton className="h-3.5 w-24" />
+ <Skeleton className="h-9 w-64" />
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-3/4" />
+ </div>
+ <div className="mt-16 grid grid-cols-2 gap-x-8 gap-y-10 sm:mt-20 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div
+ key={k}
+ className="border-l border-gray-200 pl-6 dark:border-white/20"
+ >
+ <Skeleton className="h-7 w-28" />
+ <Skeleton className="mt-2 h-4 w-32" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto flex max-w-2xl flex-col items-center gap-4">
+ <Skeleton className="h-9 w-72" />
+ <Skeleton className="h-5 w-80" />
+ </div>
+ <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="rounded-2xl border border-gray-200 bg-white/50 p-6 dark:border-white/10 dark:bg-white/5"
+ >
+ <Skeleton className="h-10 w-10 rounded-lg" />
+ <Skeleton className="mt-4 h-4 w-32" />
+ <div className="mt-2 space-y-1.5">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-5/6" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-12 lg:max-w-none lg:grid-cols-[1fr_auto]">
+ <div className="space-y-4">
+ <Skeleton className="h-3.5 w-24" />
+ <Skeleton className="h-9 w-48" />
+ <Skeleton className="h-3.5 w-32" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-3/4" />
+ </div>
+ <div className="mt-6 flex gap-x-4">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-5 w-5 rounded" />
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-[516px] w-[416px] rounded-2xl" />
+ </div>
+ </div>
+ </section>
+
+ <section className="py-16 sm:py-24">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto max-w-2xl rounded-2xl border border-gray-200 bg-white/50 p-8 sm:p-12 dark:border-white/10 dark:bg-white/5">
+ <div className="flex flex-col items-center gap-3">
+ <Skeleton className="h-10 w-10 rounded-full" />
+ <Skeleton className="h-6 w-64" />
+ <Skeleton className="h-4 w-80" />
+ <Skeleton className="h-4 w-56" />
+ <Skeleton className="mt-3 h-4 w-32" />
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="py-32 sm:py-40">
+ <div className="mx-auto flex max-w-2xl flex-col items-center gap-4 px-6 text-center lg:px-8">
+ <Skeleton className="h-9 w-64" />
+ <Skeleton className="h-9 w-48" />
+ <Skeleton className="mt-2 h-5 w-96" />
+ <Skeleton className="h-5 w-72" />
+ <div className="mt-6 flex gap-x-6">
+ <Skeleton className="h-10 w-32 rounded-md" />
+ <Skeleton className="h-10 w-24 rounded-md" />
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer className="mx-auto max-w-7xl px-6 pt-4 pb-8 lg:px-8">
+ <div className="flex items-center justify-between border-t border-gray-900/10 pt-8 dark:border-white/10">
+ <Skeleton className="h-3.5 w-48" />
+ <div className="flex space-x-6">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-6 w-6 rounded" />
+ ))}
+ </div>
+ </div>
+ </footer>
+ </>
);
}
diff --git a/apps/web/src/app/api/admin/map-calibration/[id]/align/apply/route.ts b/apps/web/src/app/api/admin/map-calibration/[id]/align/apply/route.ts
index 5e90ac295..a66b07422 100644
--- a/apps/web/src/app/api/admin/map-calibration/[id]/align/apply/route.ts
+++ b/apps/web/src/app/api/admin/map-calibration/[id]/align/apply/route.ts
@@ -9,7 +9,6 @@ import { forbidden, unauthorized } from "next/navigation";
import { NextResponse } from "next/server";
import { z } from "zod";
-export const runtime = "nodejs";
export const maxDuration = 60;
type Params = { params: Promise<{ id: string }> };
diff --git a/apps/web/src/app/api/admin/map-calibration/[id]/align/revert/route.ts b/apps/web/src/app/api/admin/map-calibration/[id]/align/revert/route.ts
index b095f8802..d50d6a165 100644
--- a/apps/web/src/app/api/admin/map-calibration/[id]/align/revert/route.ts
+++ b/apps/web/src/app/api/admin/map-calibration/[id]/align/revert/route.ts
@@ -6,7 +6,6 @@ import { r2 } from "@/lib/r2";
import { forbidden, unauthorized } from "next/navigation";
import { NextResponse } from "next/server";
-export const runtime = "nodejs";
export const maxDuration = 60;
type Params = { params: Promise<{ id: string }> };
diff --git a/apps/web/src/app/api/admin/map-calibration/[id]/align/route.ts b/apps/web/src/app/api/admin/map-calibration/[id]/align/route.ts
index b56eeb902..aa31ec0a7 100644
--- a/apps/web/src/app/api/admin/map-calibration/[id]/align/route.ts
+++ b/apps/web/src/app/api/admin/map-calibration/[id]/align/route.ts
@@ -7,7 +7,6 @@ import { forbidden, unauthorized } from "next/navigation";
import { NextResponse } from "next/server";
import sharp from "sharp";
-export const runtime = "nodejs";
export const maxDuration = 60;
type Params = { params: Promise<{ id: string }> };
diff --git a/apps/web/src/app/api/admin/map-calibration/upload/presign/route.ts b/apps/web/src/app/api/admin/map-calibration/upload/presign/route.ts
index b633e4566..3f08b6aa5 100644
--- a/apps/web/src/app/api/admin/map-calibration/upload/presign/route.ts
+++ b/apps/web/src/app/api/admin/map-calibration/upload/presign/route.ts
@@ -5,8 +5,6 @@ import { r2 } from "@/lib/r2";
import { forbidden, unauthorized } from "next/navigation";
import { NextResponse } from "next/server";
-export const runtime = "nodejs";
-
const ALLOWED_IMAGE_CONTENT_TYPES = new Set([
"image/jpeg",
"image/png",
diff --git a/apps/web/src/app/api/admin/map-calibration/upload/route.ts b/apps/web/src/app/api/admin/map-calibration/upload/route.ts
index 62f291d1e..b321b47e4 100644
--- a/apps/web/src/app/api/admin/map-calibration/upload/route.ts
+++ b/apps/web/src/app/api/admin/map-calibration/upload/route.ts
@@ -6,7 +6,6 @@ import { forbidden, unauthorized } from "next/navigation";
import { NextResponse } from "next/server";
import sharp from "sharp";
-export const runtime = "nodejs";
export const maxDuration = 60;
const MAX_UPLOAD_BYTES = 15 * 1024 * 1024;
diff --git a/apps/web/src/app/api/cron/fsr-recompute/route.ts b/apps/web/src/app/api/cron/fsr-recompute/route.ts
index 7b90eea54..85c8c35a8 100644
--- a/apps/web/src/app/api/cron/fsr-recompute/route.ts
+++ b/apps/web/src/app/api/cron/fsr-recompute/route.ts
@@ -2,7 +2,6 @@ import { Logger } from "@/lib/logger";
import { recomputeAllFsr } from "@/lib/fsr/compute";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 300;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/scrape-patch-notes/route.ts b/apps/web/src/app/api/cron/scrape-patch-notes/route.ts
index c294c4eb7..b1c557b72 100644
--- a/apps/web/src/app/api/cron/scrape-patch-notes/route.ts
+++ b/apps/web/src/app/api/cron/scrape-patch-notes/route.ts
@@ -3,7 +3,6 @@ import { Logger } from "@/lib/logger";
import { scrapeRecent } from "@/lib/overwatch/patch-scraper";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 60;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/tempo-baseline/route.ts b/apps/web/src/app/api/cron/tempo-baseline/route.ts
index 0cdfab4e7..2ce55de92 100644
--- a/apps/web/src/app/api/cron/tempo-baseline/route.ts
+++ b/apps/web/src/app/api/cron/tempo-baseline/route.ts
@@ -2,7 +2,6 @@ import { Logger } from "@/lib/logger";
import { recomputeTempoBaselines } from "@/lib/tempo/compute";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 300;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/tsr-enrich/route.ts b/apps/web/src/app/api/cron/tsr-enrich/route.ts
index e527bed5f..7089c4721 100644
--- a/apps/web/src/app/api/cron/tsr-enrich/route.ts
+++ b/apps/web/src/app/api/cron/tsr-enrich/route.ts
@@ -6,7 +6,6 @@ import {
import prisma from "@/lib/prisma";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 300;
// Number of stale players whose match history is re-ingested per run. The set
diff --git a/apps/web/src/app/api/cron/tsr-recompute/route.ts b/apps/web/src/app/api/cron/tsr-recompute/route.ts
index c267c9e7b..fa34a47cb 100644
--- a/apps/web/src/app/api/cron/tsr-recompute/route.ts
+++ b/apps/web/src/app/api/cron/tsr-recompute/route.ts
@@ -3,7 +3,6 @@ import { recomputeAllTeamTsrSnapshots } from "@/lib/matchmaker/snapshot";
import { recomputeAllTsrs } from "@/lib/tsr/replay";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 300;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/usage-rollup/route.ts b/apps/web/src/app/api/cron/usage-rollup/route.ts
index 7289705be..48fd080a8 100644
--- a/apps/web/src/app/api/cron/usage-rollup/route.ts
+++ b/apps/web/src/app/api/cron/usage-rollup/route.ts
@@ -8,7 +8,6 @@ import {
} from "@/lib/usage/rollup";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
export const maxDuration = 300;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/wp-publish/route.ts b/apps/web/src/app/api/cron/wp-publish/route.ts
index 0e2f8bd3d..4ee8bd7da 100644
--- a/apps/web/src/app/api/cron/wp-publish/route.ts
+++ b/apps/web/src/app/api/cron/wp-publish/route.ts
@@ -10,7 +10,6 @@ import { MODE_FAMILIES, type ModeFamily } from "@/lib/win-probability/types";
import { timingSafeEqual } from "node:crypto";
import { gunzipSync } from "node:zlib";
-export const runtime = "nodejs";
export const maxDuration = 60;
type AuthResult =
diff --git a/apps/web/src/app/api/cron/wp-retrain/route.ts b/apps/web/src/app/api/cron/wp-retrain/route.ts
index f5f231003..c74809ba6 100644
--- a/apps/web/src/app/api/cron/wp-retrain/route.ts
+++ b/apps/web/src/app/api/cron/wp-retrain/route.ts
@@ -14,7 +14,6 @@ import { put } from "@vercel/blob";
import { waitUntil } from "@vercel/functions";
import { randomUUID, timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
// The export (map fetch + buildRows over every map) is the long pole; training
// now runs in a separate Python function, so this route only extracts, writes
// the matrices to Blob, and fires the trainer.
diff --git a/apps/web/src/app/api/dashboard/overview/route.ts b/apps/web/src/app/api/dashboard/overview/route.ts
index 15d1dd557..118a7cd91 100644
--- a/apps/web/src/app/api/dashboard/overview/route.ts
+++ b/apps/web/src/app/api/dashboard/overview/route.ts
@@ -13,8 +13,6 @@ import { unauthorized } from "next/navigation";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";
-export const runtime = "nodejs";
-
function parseOptionalPositiveInt(value: string | null): number | undefined {
if (value === null || !/^[1-9]\d*$/.test(value)) return undefined;
const parsed = Number(value);
diff --git a/apps/web/src/app/api/faceit/webhook/route.ts b/apps/web/src/app/api/faceit/webhook/route.ts
index 1965f98fe..08ad5525c 100644
--- a/apps/web/src/app/api/faceit/webhook/route.ts
+++ b/apps/web/src/app/api/faceit/webhook/route.ts
@@ -4,8 +4,6 @@ import { recomputeAllTsrs } from "@/lib/tsr/replay";
import { kv } from "@vercel/kv";
import { timingSafeEqual } from "node:crypto";
-export const runtime = "nodejs";
-
type FaceitWebhookEvent = {
transaction_id?: string;
event?: string;
diff --git a/apps/web/src/app/api/health/route.ts b/apps/web/src/app/api/health/route.ts
index c5b81326a..954b175c4 100644
--- a/apps/web/src/app/api/health/route.ts
+++ b/apps/web/src/app/api/health/route.ts
@@ -1,8 +1,6 @@
import prisma from "@/lib/prisma";
import { NextResponse } from "next/server";
-export const dynamic = "force-dynamic";
-
export async function GET() {
const checks: Record<string, "ok" | "error"> = {};
diff --git a/apps/web/src/app/api/image/[type]/[id]/route.ts b/apps/web/src/app/api/image/[type]/[id]/route.ts
index 6ad81299e..f12b3ddec 100644
--- a/apps/web/src/app/api/image/[type]/[id]/route.ts
+++ b/apps/web/src/app/api/image/[type]/[id]/route.ts
@@ -2,8 +2,6 @@ import { imageKey, isImageKind } from "@/lib/avatar";
import { r2 } from "@/lib/r2";
import { NextResponse } from "next/server";
-export const runtime = "nodejs";
-
const ID_RE = /^[A-Za-z0-9_-]+$/;
export async function GET(
diff --git a/apps/web/src/app/api/leaderboard/adjusted-csr/route.ts b/apps/web/src/app/api/leaderboard/adjusted-csr/route.ts
index 04db81137..4067e6da3 100644
--- a/apps/web/src/app/api/leaderboard/adjusted-csr/route.ts
+++ b/apps/web/src/app/api/leaderboard/adjusted-csr/route.ts
@@ -5,8 +5,6 @@ import {
import { Logger } from "@/lib/logger";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
-export const runtime = "nodejs";
-
function parseInt32(value: string | null, fallback: number): number {
if (!value) return fallback;
const n = Number.parseInt(value, 10);
diff --git a/apps/web/src/app/api/leaderboard/tsr/route.ts b/apps/web/src/app/api/leaderboard/tsr/route.ts
index 241826429..9e77c5a34 100644
--- a/apps/web/src/app/api/leaderboard/tsr/route.ts
+++ b/apps/web/src/app/api/leaderboard/tsr/route.ts
@@ -6,8 +6,6 @@ import {
} from "@/lib/tsr/leaderboard";
import { FaceitTier, TsrRegion } from "@/generated/prisma/browser";
-export const runtime = "nodejs";
-
const VALID_SORTS: TsrSortKey[] = ["rating", "matches", "recent"];
function parseEnum<T extends string>(
diff --git a/apps/web/src/app/api/og/route.tsx b/apps/web/src/app/api/og/route.tsx
index 9f1dd57bc..6c124e7d0 100644
--- a/apps/web/src/app/api/og/route.tsx
+++ b/apps/web/src/app/api/og/route.tsx
@@ -4,8 +4,6 @@
import { Logger } from "@/lib/logger";
import { ImageResponse } from "next/og";
-export const runtime = "edge";
-
export async function GET(request: Request) {
try {
const { searchParams } = new URL(request.url);
diff --git a/apps/web/src/app/api/scrim/add-map-stream/route.ts b/apps/web/src/app/api/scrim/add-map-stream/route.ts
index e42fac261..d76032158 100644
--- a/apps/web/src/app/api/scrim/add-map-stream/route.ts
+++ b/apps/web/src/app/api/scrim/add-map-stream/route.ts
@@ -1,6 +1,7 @@
import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, getCurrentUser } from "@/lib/auth";
import { mapAddedCounter, scrimParsingDuration } from "@/lib/axiom/metrics";
+import { revalidateScrim, revalidateTeamStats } from "@/lib/cache-tags";
import { Logger } from "@/lib/logger";
import { createNewMap } from "@/lib/parser";
import prisma from "@/lib/prisma";
@@ -111,6 +112,10 @@ export async function POST(req: NextRequest) {
const parseDuration = performance.now() - parseStart;
scrimParsingDuration.record(parseDuration);
mapAddedCounter.add(1);
+
+ revalidateScrim(scrimId);
+ if (scrim?.teamId) revalidateTeamStats(scrim.teamId);
+
void usage.track({
name: UsageEventName.SCRIM_MAP_ADD,
userId: user?.id,
diff --git a/apps/web/src/app/api/scrim/add-map/route.ts b/apps/web/src/app/api/scrim/add-map/route.ts
index 0e29b5870..9b3abb5d5 100644
--- a/apps/web/src/app/api/scrim/add-map/route.ts
+++ b/apps/web/src/app/api/scrim/add-map/route.ts
@@ -1,6 +1,7 @@
import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, getCurrentUser } from "@/lib/auth";
import { mapAddedCounter, scrimParsingDuration } from "@/lib/axiom/metrics";
+import { revalidateScrim, revalidateTeamStats } from "@/lib/cache-tags";
import { Logger } from "@/lib/logger";
import { createNewMap } from "@/lib/parser";
import prisma from "@/lib/prisma";
@@ -136,6 +137,10 @@ export async function POST(req: NextRequest) {
const parseDuration = performance.now() - parseStart;
scrimParsingDuration.record(parseDuration);
mapAddedCounter.add(1);
+
+ revalidateScrim(scrimId);
+ if (scrim?.teamId) revalidateTeamStats(scrim.teamId);
+
void usage.track({
name: UsageEventName.SCRIM_MAP_ADD,
userId: user?.id,
diff --git a/apps/web/src/app/api/scrim/create-scrim-stream/route.ts b/apps/web/src/app/api/scrim/create-scrim-stream/route.ts
index b8e8ff7c2..2c827af57 100644
--- a/apps/web/src/app/api/scrim/create-scrim-stream/route.ts
+++ b/apps/web/src/app/api/scrim/create-scrim-stream/route.ts
@@ -7,6 +7,7 @@ import {
scrimCreatedCounter,
scrimParsingDuration,
} from "@/lib/axiom/metrics";
+import { revalidateTeamStats } from "@/lib/cache-tags";
import { UsageEventName } from "@/lib/usage/names";
import { usage } from "@/lib/usage/server";
import { sendScrimNotifications } from "@/lib/bot-events";
@@ -156,6 +157,8 @@ export async function POST(request: NextRequest) {
}
}
+ if (teamId) revalidateTeamStats(teamId);
+
emit({ type: "done", scrimId: newScrimId });
event.outcome = "success";
event.scrim_id = newScrimId;
diff --git a/apps/web/src/app/api/scrim/create-scrim/route.ts b/apps/web/src/app/api/scrim/create-scrim/route.ts
index 1d31dd85f..eb8e2e785 100644
--- a/apps/web/src/app/api/scrim/create-scrim/route.ts
+++ b/apps/web/src/app/api/scrim/create-scrim/route.ts
@@ -4,6 +4,7 @@ import { UserService } from "@/data/user";
import { auditLog } from "@/lib/audit-logs";
import { auth, canManageTeam } from "@/lib/auth";
import { withRequestContext } from "@/lib/axiom/baggage";
+import { revalidateTeamStats } from "@/lib/cache-tags";
import {
rateLimitHitCounter,
scrimCreatedCounter,
@@ -325,6 +326,8 @@ export async function POST(request: NextRequest) {
}
});
+ if (teamId) revalidateTeamStats(teamId);
+
return Response.json({ scrimId: newScrimId }, { status: 200 });
}
);
diff --git a/apps/web/src/app/api/scrim/map/[mapId]/set-winner/route.ts b/apps/web/src/app/api/scrim/map/[mapId]/set-winner/route.ts
index f6dedc4ea..6ef676137 100644
--- a/apps/web/src/app/api/scrim/map/[mapId]/set-winner/route.ts
+++ b/apps/web/src/app/api/scrim/map/[mapId]/set-winner/route.ts
@@ -1,6 +1,11 @@
import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, getCurrentUser } from "@/lib/auth";
import { Logger } from "@/lib/logger";
+import {
+ revalidateMap,
+ revalidateScrim,
+ revalidateTeamStats,
+} from "@/lib/cache-tags";
import prisma from "@/lib/prisma";
import { resolveSetWinnerOutcome } from "@/lib/scrim/set-winner-validation";
import { unauthorized, unstable_rethrow } from "next/navigation";
@@ -38,7 +43,12 @@ export async function POST(
const map = await prisma.map.findUnique({
where: { id: mapId },
- select: { id: true, scrimId: true, mapData: { select: { id: true } } },
+ select: {
+ id: true,
+ scrimId: true,
+ mapData: { select: { id: true } },
+ Scrim: { select: { teamId: true } },
+ },
});
if (!map?.scrimId) {
return Response.json({ error: "Map not found" }, { status: 404 });
@@ -70,6 +80,10 @@ export async function POST(
data: { winner: parsed.data.winner, winnerSource: "manual" },
});
+ revalidateMap(mapId);
+ revalidateScrim(map.scrimId);
+ if (map.Scrim?.teamId) revalidateTeamStats(map.Scrim.teamId);
+
after(async () => {
await auditLog.createAuditLog({
userEmail: session.user.email,
diff --git a/apps/web/src/app/api/scrim/remove-map/route.ts b/apps/web/src/app/api/scrim/remove-map/route.ts
index 6e3226ed3..f7615ceec 100644
--- a/apps/web/src/app/api/scrim/remove-map/route.ts
+++ b/apps/web/src/app/api/scrim/remove-map/route.ts
@@ -2,6 +2,11 @@ import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, getCurrentUser } from "@/lib/auth";
import { mapDeletionDuration, mapRemovedCounter } from "@/lib/axiom/metrics";
import { Logger } from "@/lib/logger";
+import {
+ revalidateMap,
+ revalidateScrim,
+ revalidateTeamStats,
+} from "@/lib/cache-tags";
import prisma from "@/lib/prisma";
import { unauthorized } from "next/navigation";
import { after, type NextRequest } from "next/server";
@@ -43,6 +48,10 @@ export async function POST(req: NextRequest) {
mapDeletionDuration.record(performance.now() - deleteStart);
mapRemovedCounter.add(1);
+ revalidateMap(mapId);
+ revalidateScrim(scrim.id);
+ if (scrim.teamId) revalidateTeamStats(scrim.teamId);
+
after(async () => {
await auditLog.createAuditLog({
userEmail: user.email,
diff --git a/apps/web/src/app/api/scrim/remove-scrim/route.ts b/apps/web/src/app/api/scrim/remove-scrim/route.ts
index f5b68e8de..cd5e4af79 100644
--- a/apps/web/src/app/api/scrim/remove-scrim/route.ts
+++ b/apps/web/src/app/api/scrim/remove-scrim/route.ts
@@ -1,6 +1,7 @@
import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, getCurrentUser } from "@/lib/auth";
import { Logger } from "@/lib/logger";
+import { revalidateScrim, revalidateTeamStats } from "@/lib/cache-tags";
import { notifications } from "@/lib/notifications";
import prisma from "@/lib/prisma";
import { unauthorized } from "next/navigation";
@@ -53,6 +54,9 @@ export async function POST(req: NextRequest) {
await prisma.map.deleteMany({ where: { scrimId } });
await prisma.scrim.delete({ where: { id: scrimId } });
+ revalidateScrim(scrimId);
+ if (scrim.teamId) revalidateTeamStats(scrim.teamId);
+
after(async () => {
await auditLog.createAuditLog({
userEmail: user.email,
diff --git a/apps/web/src/app/api/scrim/update-scrim-options/route.ts b/apps/web/src/app/api/scrim/update-scrim-options/route.ts
index 5c1468308..80254fbc0 100644
--- a/apps/web/src/app/api/scrim/update-scrim-options/route.ts
+++ b/apps/web/src/app/api/scrim/update-scrim-options/route.ts
@@ -1,5 +1,6 @@
import { auditLog } from "@/lib/audit-logs";
import { auth, canEditScrim, canManageTeam, getCurrentUser } from "@/lib/auth";
+import { revalidateScrim, revalidateTeamStats } from "@/lib/cache-tags";
import prisma from "@/lib/prisma";
import { unauthorized } from "next/navigation";
import { after, type NextRequest } from "next/server";
@@ -115,6 +116,12 @@ export async function POST(req: NextRequest) {
}
});
+ revalidateScrim(scrim.id);
+ // The scrim may have moved teams, so refresh both the old and new team's stats.
+ const newTeamId = targetTeamId === 0 ? null : targetTeamId;
+ if (scrim.teamId) revalidateTeamStats(scrim.teamId);
+ if (newTeamId && newTeamId !== scrim.teamId) revalidateTeamStats(newTeamId);
+
after(async () => {
await auditLog.createAuditLog({
userEmail: user.email,
diff --git a/apps/web/src/app/api/team/avatar-upload/route.ts b/apps/web/src/app/api/team/avatar-upload/route.ts
index 8b8bf6d2c..92f4d8b5d 100644
--- a/apps/web/src/app/api/team/avatar-upload/route.ts
+++ b/apps/web/src/app/api/team/avatar-upload/route.ts
@@ -10,8 +10,6 @@ import { kv } from "@vercel/kv";
import { unauthorized } from "next/navigation";
import { after, NextResponse } from "next/server";
-export const runtime = "nodejs";
-
const MAX_BYTES = 5 * 1024 * 1024;
export async function POST(request: Request): Promise<NextResponse> {
diff --git a/apps/web/src/app/api/usage/ingest/route.ts b/apps/web/src/app/api/usage/ingest/route.ts
index 7e79bf3e7..6fd68aa85 100644
--- a/apps/web/src/app/api/usage/ingest/route.ts
+++ b/apps/web/src/app/api/usage/ingest/route.ts
@@ -11,8 +11,6 @@ import { kv } from "@vercel/kv";
import type { NextRequest } from "next/server";
import { z } from "zod";
-export const runtime = "nodejs";
-
const ratelimit = new Ratelimit({
redis: kv,
limiter: Ratelimit.slidingWindow(120, "1 m"),
diff --git a/apps/web/src/app/api/user/avatar-upload/route.ts b/apps/web/src/app/api/user/avatar-upload/route.ts
index 84caa2823..18d321714 100644
--- a/apps/web/src/app/api/user/avatar-upload/route.ts
+++ b/apps/web/src/app/api/user/avatar-upload/route.ts
@@ -10,8 +10,6 @@ import { kv } from "@vercel/kv";
import { unauthorized } from "next/navigation";
import { after, NextResponse } from "next/server";
-export const runtime = "nodejs";
-
const MAX_BYTES = 5 * 1024 * 1024;
export async function POST(request: Request): Promise<NextResponse> {
diff --git a/apps/web/src/app/api/user/banner-upload/route.ts b/apps/web/src/app/api/user/banner-upload/route.ts
index d39649566..74cc70bd8 100644
--- a/apps/web/src/app/api/user/banner-upload/route.ts
+++ b/apps/web/src/app/api/user/banner-upload/route.ts
@@ -10,8 +10,6 @@ import { kv } from "@vercel/kv";
import { unauthorized } from "next/navigation";
import { after, NextResponse } from "next/server";
-export const runtime = "nodejs";
-
const MAX_BYTES = 5 * 1024 * 1024;
export async function POST(request: Request): Promise<NextResponse> {
diff --git a/apps/web/src/app/api/vod/route.ts b/apps/web/src/app/api/vod/route.ts
index d7a910952..e5b83ee9a 100644
--- a/apps/web/src/app/api/vod/route.ts
+++ b/apps/web/src/app/api/vod/route.ts
@@ -2,6 +2,7 @@ import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth, canEditScrim } from "@/lib/auth";
+import { revalidateMap } from "@/lib/cache-tags";
import { Logger } from "@/lib/logger";
import { parseVodUrl } from "@/lib/vods";
import { NextResponse } from "next/server";
@@ -68,5 +69,8 @@ export async function POST(req: Request) {
data: { vod: vodUrl },
});
+ // The map page frame reads the VOD through a cached reader (getCachedMapRow).
+ revalidateMap(mapId);
+
return new NextResponse(JSON.stringify(updatedVod), { status: 200 });
}
diff --git a/apps/web/src/app/chat/[conversationId]/page.tsx b/apps/web/src/app/chat/[conversationId]/page.tsx
index bc67a1b4c..9396a55a6 100644
--- a/apps/web/src/app/chat/[conversationId]/page.tsx
+++ b/apps/web/src/app/chat/[conversationId]/page.tsx
@@ -1,4 +1,5 @@
import { ChatInterface } from "@/components/chat/chat-interface";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
@@ -6,8 +7,26 @@ import { auth } from "@/lib/auth";
import prisma from "@/lib/prisma";
import type { UIMessage } from "ai";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export default async function ConversationPage({
+// Static shell: the page frame prerenders and the conversation streams into
+// ONE boundary whose fallback mirrors ChatInterface's own layout (header bar,
+// message column, composer) — so navigation shows a single, stable skeleton.
+export default function ConversationPage({
+ params,
+}: {
+ params: Promise<{ conversationId: string }>;
+}) {
+ return (
+ <div className="min-h-0 flex-1">
+ <Suspense fallback={<ConversationSkeleton />}>
+ <ConversationPageContent params={params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function ConversationPageContent({
params,
}: {
params: Promise<{ conversationId: string }>;
@@ -28,11 +47,64 @@ export default async function ConversationPage({
if (!conversation) notFound();
return (
- <div className="min-h-0 flex-1">
- <ChatInterface
- conversationId={conversation.id}
- initialMessages={conversation.messages as unknown as UIMessage[]}
- />
+ <ChatInterface
+ conversationId={conversation.id}
+ initialMessages={conversation.messages as unknown as UIMessage[]}
+ />
+ );
+}
+
+// Mirrors ChatInterface's loaded layout: eyebrow + balance chip header,
+// gap-8 p-4 message column (right-aligned user bubbles, full-width assistant
+// text), and the max-w-3xl composer bar.
+function ConversationSkeleton() {
+ return (
+ <div className="flex h-full flex-col">
+ <div className="flex items-center justify-between border-b px-4 py-2.5">
+ <Skeleton className="h-2.5 w-28" />
+ <Skeleton className="h-5 w-16 rounded-full" />
+ </div>
+
+ <div className="flex-1 overflow-y-hidden">
+ <div className="flex flex-col gap-8 p-4">
+ <div className="flex justify-end">
+ <Skeleton className="h-10 w-56 rounded-lg" />
+ </div>
+
+ <div className="max-w-[95%] space-y-2">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-4 w-full" />
+ ))}
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+
+ <div className="flex justify-end">
+ <Skeleton className="h-10 w-72 rounded-lg" />
+ </div>
+
+ <div className="max-w-[95%] space-y-2">
+ {["d", "e"].map((k) => (
+ <Skeleton key={k} className="h-4 w-full" />
+ ))}
+ <Skeleton className="h-4 w-3/5" />
+ </div>
+
+ <div className="flex justify-end">
+ <Skeleton className="h-10 w-44 rounded-lg" />
+ </div>
+
+ <div className="max-w-[95%] space-y-2">
+ {["f", "g", "h", "i"].map((k) => (
+ <Skeleton key={k} className="h-4 w-full" />
+ ))}
+ <Skeleton className="h-4 w-2/3" />
+ </div>
+ </div>
+ </div>
+
+ <div className="border-t px-4 py-3">
+ <Skeleton className="mx-auto h-11 w-full max-w-3xl rounded-lg" />
+ </div>
</div>
);
}
diff --git a/apps/web/src/app/chat/layout.tsx b/apps/web/src/app/chat/layout.tsx
index 10fc940f8..dc1b1f5a2 100644
--- a/apps/web/src/app/chat/layout.tsx
+++ b/apps/web/src/app/chat/layout.tsx
@@ -1,10 +1,10 @@
import { ChatSidebar } from "@/components/chat/chat-sidebar";
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("analyst.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("analyst.metadata");
return {
title: t("title"),
description: t("description"),
diff --git a/apps/web/src/app/chat/page.tsx b/apps/web/src/app/chat/page.tsx
index ca480ed4c..af70be788 100644
--- a/apps/web/src/app/chat/page.tsx
+++ b/apps/web/src/app/chat/page.tsx
@@ -1,10 +1,27 @@
import { ChatInterface } from "@/components/chat/chat-interface";
+import { Skeleton } from "@/components/ui/skeleton";
import { auth } from "@/lib/auth";
import { aiChat } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
-export default async function ChatPage() {
- const [session, aiChatEnabled] = await Promise.all([auth(), aiChat()]);
+// Static shell: the page frame prerenders and the auth/flag-gated chat
+// streams into ONE boundary whose fallback mirrors ChatInterface's empty
+// state (header row, centered suggestions, composer), so navigation shows a
+// single stable skeleton that the real content replaces in place.
+export default function ChatPage() {
+ return (
+ <div className="min-h-0 flex-1">
+ <Suspense fallback={<ChatSkeleton />}>
+ <ChatContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function ChatContent() {
+ const [session, aiChatEnabled] = await Promise.all([auth(), getFlag(aiChat)]);
if (!session) {
redirect("/sign-in");
@@ -14,9 +31,47 @@ export default async function ChatPage() {
redirect("/dashboard");
}
+ return <ChatInterface />;
+}
+
+// Mirrors ChatInterface's empty state: eyebrow + balance chip header,
+// centered empty-state copy with four suggestion rows, and the composer bar.
+function ChatSkeleton() {
return (
- <div className="min-h-0 flex-1">
- <ChatInterface />
+ <div className="flex h-full flex-col">
+ <div className="flex items-center justify-between border-b px-4 py-2.5">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-8 w-20 rounded-md" />
+ </div>
+
+ <div className="flex flex-1 items-center justify-center overflow-hidden">
+ <div className="flex w-full max-w-lg flex-col items-start gap-6 px-4 text-left">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-56" />
+ <Skeleton className="h-4 w-80 max-w-full" />
+ </div>
+ <div className="w-full space-y-1.5">
+ <Skeleton className="mb-2 h-3 w-16" />
+ {["a", "b", "c", "d"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex w-full items-center gap-3 rounded-md border px-3 py-2.5"
+ >
+ <Skeleton className="h-3 w-4 shrink-0" />
+ <Skeleton className="h-3 flex-1" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+
+ <div className="border-t px-4 py-3">
+ <div className="border-input mx-auto flex max-w-3xl items-end gap-2 rounded-lg border py-2 pr-2 pl-3 shadow-xs">
+ <Skeleton className="h-8 flex-1" />
+ <Skeleton className="size-7 shrink-0 rounded-md" />
+ </div>
+ </div>
</div>
);
}
diff --git a/apps/web/src/app/coaching/canvas/page.tsx b/apps/web/src/app/coaching/canvas/page.tsx
index 908d96bc7..ef7889dae 100644
--- a/apps/web/src/app/coaching/canvas/page.tsx
+++ b/apps/web/src/app/coaching/canvas/page.tsx
@@ -1,13 +1,16 @@
import { CoachingCanvas } from "@/components/coaching/coaching-canvas";
+import { Skeleton } from "@/components/ui/skeleton";
import { coachingCanvas } from "@/lib/flags";
-import { getTranslations } from "next-intl/server";
+import { getFlag } from "@/lib/flags-helpers";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export default async function CoachingCanvasPage() {
- const enabled = await coachingCanvas();
- if (!enabled) notFound();
-
- const t = await getTranslations("coaching");
+// Static shell: the page frame and header prerender (default-locale text via
+// the cookie-free translator); the flag-gated canvas streams into ONE boundary
+// whose fallback mirrors CoachingCanvas's own layout.
+export default function CoachingCanvasPage() {
+ const t = getStaticTranslations("coaching");
return (
<div className="flex flex-1 flex-col px-6 pt-6 sm:px-10">
@@ -21,7 +24,121 @@ export default async function CoachingCanvasPage() {
<p className="text-muted-foreground mt-2 text-sm">{t("subtitle")}</p>
</header>
<div className="flex-1 py-4">
- <CoachingCanvas />
+ <Suspense fallback={<CanvasSkeleton />}>
+ <CoachingCanvasContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function CoachingCanvasContent() {
+ const enabled = await getFlag(coachingCanvas);
+ if (!enabled) notFound();
+
+ return <CoachingCanvas />;
+}
+
+// Mirrors CoachingCanvas's layout (toolbar row, 20% hero sidebar, canvas
+// panel) so the streamed canvas replaces this in place with no jump.
+function CanvasSkeleton() {
+ return (
+ <div className="flex h-[calc(100vh-14rem)] flex-col gap-3 overflow-hidden">
+ <div className="flex items-center gap-3">
+ <Skeleton className="h-9 w-[280px] rounded-md" />
+ <div className="flex items-center gap-1">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-8 w-8 rounded-md" />
+ ))}
+ </div>
+ <div className="bg-border h-6 w-px" />
+ <div className="flex items-center gap-1">
+ {["f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="h-5 w-5 rounded-full" />
+ ))}
+ </div>
+ <div className="bg-border h-6 w-px" />
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-2 w-20 rounded-full" />
+ <Skeleton className="h-4 w-4" />
+ </div>
+ <div className="bg-border h-6 w-px" />
+ {["k", "l", "m"].map((k) => (
+ <Skeleton key={k} className="h-8 w-8 rounded-md" />
+ ))}
+ </div>
+ <div className="border-border bg-card flex flex-1 overflow-hidden rounded-xl border">
+ <div className="border-border w-1/5 min-w-[9rem] border-r">
+ <div className="border-border mx-2 mt-2 flex gap-5 border-b pb-2.5">
+ <Skeleton className="h-4 w-14" />
+ <Skeleton className="h-4 w-14" />
+ </div>
+ <div className="space-y-3 p-2 pt-3">
+ <div>
+ <Skeleton className="mb-1.5 h-2.5 w-8" />
+ <div className="grid grid-cols-4 gap-1">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div
+ key={k}
+ className="flex flex-col items-center gap-0.5 p-1"
+ >
+ <Skeleton className="size-9 rounded-full" />
+ <Skeleton className="h-2 w-6" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div>
+ <Skeleton className="mb-1.5 h-2.5 w-12" />
+ <div className="grid grid-cols-4 gap-1">
+ {[
+ "a",
+ "b",
+ "c",
+ "d",
+ "e",
+ "f",
+ "g",
+ "h",
+ "i",
+ "j",
+ "k",
+ "l",
+ "m",
+ "n",
+ "o",
+ "p",
+ ].map((k) => (
+ <div
+ key={k}
+ className="flex flex-col items-center gap-0.5 p-1"
+ >
+ <Skeleton className="size-9 rounded-full" />
+ <Skeleton className="h-2 w-6" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div>
+ <Skeleton className="mb-1.5 h-2.5 w-10" />
+ <div className="grid grid-cols-4 gap-1">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div
+ key={k}
+ className="flex flex-col items-center gap-0.5 p-1"
+ >
+ <Skeleton className="size-9 rounded-full" />
+ <Skeleton className="h-2 w-6" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="flex-1 p-2">
+ <Skeleton className="h-full w-full rounded-lg" />
+ </div>
</div>
</div>
);
diff --git a/apps/web/src/app/coaching/layout.tsx b/apps/web/src/app/coaching/layout.tsx
index ad57798f5..207c3c4ea 100644
--- a/apps/web/src/app/coaching/layout.tsx
+++ b/apps/web/src/app/coaching/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("coaching.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("coaching.metadata");
return {
title: t("title"),
diff --git a/apps/web/src/app/contact/layout.tsx b/apps/web/src/app/contact/layout.tsx
index 2c91831de..8709ba7f7 100644
--- a/apps/web/src/app/contact/layout.tsx
+++ b/apps/web/src/app/contact/layout.tsx
@@ -1,11 +1,11 @@
import { Footer } from "@/components/footer";
import { Header } from "@/components/header";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("contactPage.metadata");
- const locale = await getLocale();
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("contactPage.metadata");
return {
title: t("title"),
@@ -23,7 +23,7 @@ export async function generateMetadata(): Promise<Metadata> {
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/dashboard/layout.tsx b/apps/web/src/app/dashboard/layout.tsx
index 206bdd356..36005661b 100644
--- a/apps/web/src/app/dashboard/layout.tsx
+++ b/apps/web/src/app/dashboard/layout.tsx
@@ -1,117 +1,10 @@
import { DashboardLayout } from "@/components/dashboard-layout";
-import { CardStep } from "@/components/nextsteps/card-step";
-import { useTranslations } from "next-intl";
-import { NextStepProvider, NextStep } from "nextstepjs";
-import type { Tour } from "nextstepjs";
+import { DashboardTour } from "@/components/dashboard-tour";
export default function Layout({ children }: LayoutProps<"/dashboard">) {
- const t = useTranslations("dashboard.tour");
- const steps: Tour[] = [
- {
- tour: `${t("title")}`,
- steps: [
- {
- icon: <>👋</>,
- title: `${t("step1.title")}`,
- content: <>{t("step1.description")}</>,
- selector: "#docs-demo-step1",
- side: "top",
- showControls: true,
- showSkip: true,
- pointerPadding: 10,
- pointerRadius: 10,
- },
- {
- icon: <>🚀</>,
- title: `${t("step2.title")}`,
- content: <>{t("step2.description")}</>,
- selector: "#docs-demo-step2",
- side: "top",
- showControls: true,
- showSkip: true,
- pointerPadding: 10,
- pointerRadius: 10,
- },
- {
- icon: <>📝</>,
- title: `${t("step3.title")}`,
- content: (
- <>
- {t("step3.description")} <br />
- </>
- ),
- selector: "#docs-demo-step3",
- side: "bottom",
- showSkip: true,
- showControls: true,
- },
- {
- icon: <>👥</>,
- title: `${t("step4.title")}`,
- content: (
- <>
- {t("step4.description")} <br />
- </>
- ),
- selector: "#docs-demo-step4", // Target the Team Select dropdown
- side: "bottom",
- showSkip: true,
- showControls: true,
- },
- {
- icon: <>📅</>,
- title: `${t("step5.title")}`,
- content: <>{t("step5.description")}</>,
- selector: "#docs-demo-step5",
- showSkip: true,
- side: "bottom",
- showControls: true,
- },
- {
- icon: <>📊</>,
- title: `${t("step6.title")}`,
- content: <>{t("step6.description")}</>,
- selector: "#docs-demo-step6",
- side: "top",
- showControls: true,
- showSkip: true,
- },
- {
- icon: <>🚫</>,
- title: `${t("step7.title")}`,
- content: (
- <>
- {t("step7.description")} <br />
- </>
- ),
- selector: "#docs-demo-step7",
- side: "top",
- showControls: true,
- showSkip: true,
- },
- {
- icon: <>🚀</>,
- title: `${t("step8.title")}`,
- content: (
- <>
- {t("step8.description")} <br />
- </>
- ),
- selector: "#docs-demo-step8",
- side: "top",
- showSkip: true,
- showControls: true,
- },
- ],
- },
- ];
return (
<DashboardLayout>
- <NextStepProvider>
- <NextStep steps={steps} cardComponent={CardStep}>
- {children}
- </NextStep>
- </NextStepProvider>
+ <DashboardTour>{children}</DashboardTour>
</DashboardLayout>
);
}
diff --git a/apps/web/src/app/dashboard/loading.tsx b/apps/web/src/app/dashboard/loading.tsx
deleted file mode 100644
index 120db3d97..000000000
--- a/apps/web/src/app/dashboard/loading.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DirectionalTransition } from "@/components/directional-transition";
-import { ScrimCardSkeleton } from "@/components/dashboard/scrim-card-skeleton";
-import { Card } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function DashboardLoading() {
- const t = await getTranslations("dashboard");
-
- return (
- <DirectionalTransition>
- <div className="min-h-[90vh] flex-col md:flex">
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div className="flex items-center justify-between space-y-2">
- <h2 className="text-3xl font-bold tracking-tight text-balance">
- {t("title")}
- </h2>
- </div>
- <Card className="bg-background">
- {/* Toolbar skeleton */}
- <div className="flex items-center justify-between p-4">
- <span className="inline-flex gap-2">
- <Skeleton className="h-10 w-[180px] rounded-md" />
- <Skeleton className="h-10 w-[260px] rounded-md" />
- </span>
- <Skeleton className="h-10 w-[140px] rounded-md" />
- </div>
-
- {/* Card grid skeleton */}
- <div className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
- {Array.from({ length: 16 }, (_, i) => (
- <ScrimCardSkeleton key={i} />
- ))}
- </div>
- </Card>
- </div>
- </div>
- </DirectionalTransition>
- );
-}
diff --git a/apps/web/src/app/dashboard/page.tsx b/apps/web/src/app/dashboard/page.tsx
index b4e15ffe1..ab961ec97 100644
--- a/apps/web/src/app/dashboard/page.tsx
+++ b/apps/web/src/app/dashboard/page.tsx
@@ -1,28 +1,26 @@
import { DirectionalTransition } from "@/components/directional-transition";
+import { ScrimCardSkeleton } from "@/components/dashboard/scrim-card-skeleton";
import { ScrimPagination } from "@/components/dashboard/scrim-pagination";
import { UpdateModalWrapper } from "@/components/dashboard/update-modal-wrapper";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
+import { defaultLocale } from "@/i18n/config";
import { auth } from "@/lib/auth";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import { getPendingFeedbackCount } from "@/lib/team-ops/scrim-feedback";
-import type { PagePropsWithLocale } from "@/types/next";
import { $Enums } from "@/generated/prisma/browser";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export async function generateMetadata(
- props: PagePropsWithLocale<"/dashboard">
-): Promise<Metadata> {
- const params = await props.params;
-
- const { locale } = params;
-
- const t = await getTranslations({
- locale,
- namespace: "dashboard.metadata",
- });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("dashboard.metadata");
return {
title: t("title"),
@@ -40,12 +38,34 @@ export async function generateMetadata(
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
-export default async function DashboardPage() {
+// Static shell: the page frame and title prerender (default-locale title via
+// the cookie-free translator), and the auth-derived content streams into ONE
+// boundary whose fallback mirrors ScrimPagination's own pending layout — so
+// navigation shows a single, stable skeleton instead of a cascade of
+// different loading states.
+export default function DashboardPage() {
+ const t = getStaticTranslations("dashboard");
+
+ return (
+ <DirectionalTransition>
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <div className="mb-3 flex items-end justify-between gap-4">
+ <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
+ </div>
+ <Suspense fallback={<ScrimListSkeleton />}>
+ <DashboardContent />
+ </Suspense>
+ </div>
+ </DirectionalTransition>
+ );
+}
+
+async function DashboardContent() {
const [session, t] = await Promise.all([
auth(),
getTranslations("dashboard"),
@@ -68,32 +88,49 @@ export default async function DashboardPage() {
const pendingFeedbackCount = await getPendingFeedbackCount(manageableTeamIds);
return (
- <DirectionalTransition>
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <div className="mb-3 flex items-end justify-between gap-4">
- <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
- </div>
- {pendingFeedbackCount > 0 && (
- <p className="text-muted-foreground mb-4 text-sm">
- {t("pendingFeedback", { count: pendingFeedbackCount })}
- </p>
+ <>
+ {pendingFeedbackCount > 0 && (
+ <p className="text-muted-foreground mb-4 text-sm">
+ {t("pendingFeedback", { count: pendingFeedbackCount })}
+ </p>
+ )}
+ <Tabs defaultValue="overview">
+ {isAdmin && (
+ <TabsList className="mb-5">
+ <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
+ <TabsTrigger value="admin">{t("admin")}</TabsTrigger>
+ </TabsList>
)}
- <Tabs defaultValue="overview">
- {isAdmin && (
- <TabsList className="mb-5">
- <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
- <TabsTrigger value="admin">{t("admin")}</TabsTrigger>
- </TabsList>
- )}
- <TabsContent value="overview" className="mt-0">
- <ScrimPagination seenOnboarding={userData?.seenOnboarding} />
- </TabsContent>
- <TabsContent value="admin" className="mt-0">
- <ScrimPagination isAdmin={true} seenOnboarding={true} />
- </TabsContent>
- </Tabs>
- <UpdateModalWrapper />
+ <TabsContent value="overview" className="mt-0">
+ <ScrimPagination seenOnboarding={userData?.seenOnboarding} />
+ </TabsContent>
+ <TabsContent value="admin" className="mt-0">
+ <ScrimPagination isAdmin={true} seenOnboarding={true} />
+ </TabsContent>
+ </Tabs>
+ <UpdateModalWrapper />
+ </>
+ );
+}
+
+// Mirrors ScrimPagination's pending layout (toolbar row, meta line spacer,
+// 16-card grid) so the streamed content replaces this in place with no jump.
+function ScrimListSkeleton() {
+ return (
+ <div>
+ <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+ <span className="inline-flex gap-2">
+ <Skeleton className="h-9 w-[180px] rounded-md" />
+ <Skeleton className="hidden h-9 rounded-md md:block md:w-[100px] lg:w-[260px]" />
+ </span>
+ <Skeleton className="h-9 w-[140px] rounded-md" />
</div>
- </DirectionalTransition>
+ <div className="mt-4 h-5" aria-hidden="true" />
+ <div className="mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {Array.from({ length: 16 }, (_, i) => (
+ <ScrimCardSkeleton key={i} />
+ ))}
+ </div>
+ </div>
);
}
diff --git a/apps/web/src/app/data-labeling/layout.tsx b/apps/web/src/app/data-labeling/layout.tsx
index 96520670f..ade472529 100644
--- a/apps/web/src/app/data-labeling/layout.tsx
+++ b/apps/web/src/app/data-labeling/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("dataLabeling.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("dataLabeling.metadata");
return {
title: t("title"),
diff --git a/apps/web/src/app/data-labeling/match/[matchId]/page.tsx b/apps/web/src/app/data-labeling/match/[matchId]/page.tsx
index 468a3592f..ed208d5bf 100644
--- a/apps/web/src/app/data-labeling/match/[matchId]/page.tsx
+++ b/apps/web/src/app/data-labeling/match/[matchId]/page.tsx
@@ -1,19 +1,34 @@
import { MatchLabelingView } from "@/components/data-labeling/match-labeling-view";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { DataLabelingService } from "@/data/admin";
import { getCurrentUser, isAdminUser } from "@/lib/auth";
import { dataLabeling } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
type Params = { matchId: string };
-export default async function MatchLabelingPage({
+export default function MatchLabelingPage({
params,
}: {
params: Promise<Params>;
}) {
- const enabled = await dataLabeling();
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
+ <div className="mx-auto w-full max-w-7xl">
+ <Suspense fallback={<MatchLabelingSkeleton />}>
+ <MatchLabelingContent params={params} />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function MatchLabelingContent({ params }: { params: Promise<Params> }) {
+ const enabled = await getFlag(dataLabeling);
if (!enabled) notFound();
const user = await getCurrentUser();
if (!user) redirect("/sign-in");
@@ -30,10 +45,95 @@ export default async function MatchLabelingPage({
);
if (!match) notFound();
+ return <MatchLabelingView match={match} />;
+}
+
+// Mirrors MatchLabelingView's pending layout: header row (back button, title,
+// score badge) above the [1fr_400px] grid with the VOD panel left and the
+// map-labeling tabs/panel right.
+function MatchLabelingSkeleton() {
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
- <div className="mx-auto w-full max-w-7xl">
- <MatchLabelingView match={match} />
+ <div className="space-y-6">
+ <div className="flex items-center gap-4">
+ <Skeleton className="h-8 w-28 rounded-md" />
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-7 w-64" />
+ <Skeleton className="h-6 w-14 rounded-full" />
+ </div>
+ </div>
+
+ <div className="grid gap-6 lg:grid-cols-[1fr_400px]">
+ <div className="space-y-4">
+ <Skeleton className="aspect-video w-full rounded-lg" />
+ <div className="space-y-2 rounded-lg border p-4">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-3 w-full" />
+ <Skeleton className="h-3 w-4/5" />
+ </div>
+ </div>
+
+ <div className="space-y-4">
+ <Skeleton className="h-9 w-full rounded-md" />
+
+ <div className="space-y-2 rounded-lg border p-4">
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-4 w-40" />
+ <Skeleton className="h-5 w-16 rounded-full" />
+ </div>
+ <Skeleton className="h-3 w-28" />
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-4 w-28" />
+ <div className="flex items-center gap-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-12 w-12 rounded-md" />
+ ))}
+ </div>
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-11 w-full rounded-md" />
+ </div>
+ ))}
+ </div>
+
+ <div className="space-y-1.5">
+ <Skeleton className="h-3 w-28" />
+ <div className="space-y-1">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full rounded-md" />
+ ))}
+ </div>
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-4 w-28" />
+ <div className="flex items-center gap-2">
+ {["f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="h-12 w-12 rounded-md" />
+ ))}
+ </div>
+ {["f", "g", "h"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-11 w-full rounded-md" />
+ </div>
+ ))}
+ </div>
+
+ <div className="space-y-1.5">
+ <Skeleton className="h-3 w-28" />
+ <div className="space-y-1">
+ {["f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full rounded-md" />
+ ))}
+ </div>
+ </div>
+
+ <Skeleton className="h-9 w-full rounded-md" />
+ <Skeleton className="h-9 w-full rounded-md" />
+ </div>
</div>
</div>
);
diff --git a/apps/web/src/app/data-labeling/page.tsx b/apps/web/src/app/data-labeling/page.tsx
index 5ba9b91ef..2678f627d 100644
--- a/apps/web/src/app/data-labeling/page.tsx
+++ b/apps/web/src/app/data-labeling/page.tsx
@@ -1,11 +1,26 @@
import { UnlabeledMatchList } from "@/components/data-labeling/unlabeled-match-list";
+import { Skeleton } from "@/components/ui/skeleton";
import { getCurrentUser, isAdminUser } from "@/lib/auth";
import { dataLabeling } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { getTranslations } from "next-intl/server";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export default async function DataLabelingPage() {
- const enabled = await dataLabeling();
+export default function DataLabelingPage() {
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
+ <div className="mx-auto w-full max-w-5xl space-y-6">
+ <Suspense fallback={<DataLabelingSkeleton />}>
+ <DataLabelingContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function DataLabelingContent() {
+ const enabled = await getFlag(dataLabeling);
if (!enabled) notFound();
const user = await getCurrentUser();
if (!user) redirect("/sign-in");
@@ -14,14 +29,36 @@ export default async function DataLabelingPage() {
const t = await getTranslations("dataLabeling");
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
- <div className="mx-auto w-full max-w-5xl space-y-6">
- <div className="space-y-1">
- <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
- <p className="text-muted-foreground">{t("subtitle")}</p>
+ <>
+ <div className="space-y-1">
+ <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+ <p className="text-muted-foreground">{t("subtitle")}</p>
+ </div>
+ <UnlabeledMatchList />
+ </>
+ );
+}
+
+// Mirrors the heading block plus UnlabeledMatchList's own query-loading state
+// (Card with title row and eight table-row skeletons) so the streamed content
+// replaces this in place.
+function DataLabelingSkeleton() {
+ return (
+ <>
+ <div className="space-y-1">
+ <Skeleton className="h-9 w-48" />
+ <Skeleton className="h-5 w-72" />
+ </div>
+ <div className="ring-foreground/10 bg-card flex flex-col gap-6 rounded-xl py-6 shadow-xs ring-1">
+ <div className="px-6">
+ <Skeleton className="h-6 w-36" />
+ </div>
+ <div className="space-y-3 px-6">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
</div>
- <UnlabeledMatchList />
</div>
- </div>
+ </>
);
}
diff --git a/apps/web/src/app/debug/layout.tsx b/apps/web/src/app/debug/layout.tsx
index cce99fbf5..1d218e4b0 100644
--- a/apps/web/src/app/debug/layout.tsx
+++ b/apps/web/src/app/debug/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("debugPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("debugPage.metadata");
return { title: t("title"), description: t("description") };
}
diff --git a/apps/web/src/app/demo/loading.tsx b/apps/web/src/app/demo/loading.tsx
deleted file mode 100644
index cb85fd430..000000000
--- a/apps/web/src/app/demo/loading.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import {
- Card,
- CardContent,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
-import { CardIcon } from "@/components/ui/card-icon";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function MapDashboardLoading() {
- const t = await getTranslations("mapPage.overview");
-
- return (
- <div className="flex-col md:flex">
- <div className="border-b">
- <div className="flex h-16 items-center px-4">
- <Skeleton className="h-6 w-24" />
- <div className="ml-auto flex items-center space-x-4">
- <Skeleton className="hidden h-6 w-24 md:flex" />
- <Skeleton className="h-6 w-6" />
- <Skeleton className="h-6 w-6 md:hidden" />
- <Skeleton className="hidden h-6 w-24 md:flex" />
- </div>
- </div>
- </div>
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div>
- <h4 className="text-gray-600 dark:text-gray-400">
- <Skeleton className="h-6 w-48" />
- </h4>
- </div>
- <div className="flex items-center justify-between space-y-2">
- <h2 className="text-3xl font-bold tracking-tight">
- <Skeleton className="h-10 w-40" />
- </h2>
- </div>
- <div className="space-y-4">
- <Skeleton className="h-8 w-96" />
- </div>
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("matchTime")}
- </CardTitle>
- <CardIcon>
- <circle cx="12" cy="12" r="10" />
- <polyline points="12 6 12 12 16 14" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-8 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-4 w-32" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("score")}
- </CardTitle>
- <CardIcon>
- <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
- <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
- <path d="M4 22h16" />
- <path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
- <path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
- <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-8 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-4 w-32" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("heroDamageDealt")}
- </CardTitle>
- <CardIcon>
- <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-8 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-4 w-32" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("teamHealingDealt")}
- </CardTitle>
- <CardIcon>
- <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
- <path d="M3.22 12H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-8 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-4 w-32" />
- </CardFooter>
- </Card>
- </div>
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
- <Card className="col-span-full">
- <CardHeader>
- <CardTitle>{t("title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <div className="space-y-4">
- <div className="w-full">
- <div className="rounded-md border">
- <Skeleton className="h-[70vh] w-full md:h-96" />
- </div>
- </div>
- </div>
- </CardContent>
- </Card>
- </div>
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card className="col-span-full">
- <CardHeader>
- <CardTitle>{t("analysis.title")}</CardTitle>
- </CardHeader>
- <CardContent className="space-y-4">
- <ul className="list-outside list-disc pl-4">
- <li>
- <Skeleton className="h-6 w-full md:w-1/2" />
- <Skeleton className="h-6 w-full md:hidden md:w-1/2" />
- <Skeleton className="h-6 w-full md:hidden md:w-1/2" />
- </li>
- <li>
- <Skeleton className="h-6 w-full md:w-1/2" />
- <Skeleton className="h-6 w-full md:hidden md:w-1/2" />
- </li>
- <li>
- <Skeleton className="h-6 w-full md:w-1/2" />
- <Skeleton className="h-6 w-full md:hidden md:w-1/2" />
- </li>
- </ul>
- </CardContent>
- </Card>
- </div>
- </div>
- </div>
- );
-}
diff --git a/apps/web/src/app/demo/page.tsx b/apps/web/src/app/demo/page.tsx
index 30c333050..22a052e5b 100644
--- a/apps/web/src/app/demo/page.tsx
+++ b/apps/web/src/app/demo/page.tsx
@@ -9,28 +9,29 @@ import { HeatmapTab } from "@/components/map/heatmap/heatmap-tab";
import { HeroBans } from "@/components/map/hero-bans";
import { Killfeed } from "@/components/map/killfeed";
import { MapEvents } from "@/components/map/map-events";
+import { MapTabsSkeleton } from "@/components/map/map-tabs-skeleton";
import { PlayerSwitcher } from "@/components/map/player-switcher";
import { ReplayTab } from "@/components/map/replay/replay-tab";
import { ModeToggle } from "@/components/theme-switcher";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { PlayerService } from "@/data/player";
+import { defaultLocale, type Locale } from "@/i18n/config";
import { resolveMapDataId } from "@/lib/map-data-resolver";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { toTitleCase, translateMapName } from "@/lib/utils";
-import type { PagePropsWithLocale } from "@/types/next";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
+import { getLocale, getTranslations } from "next-intl/server";
import Link from "next/link";
+import { Suspense } from "react";
const DEMO_MAP_ID = 10148;
-export async function generateMetadata(
- props: PagePropsWithLocale<"/demo">
-): Promise<Metadata> {
- const params = await props.params;
- const t = await getTranslations("demoPage.metadata");
+export async function generateMetadata(): Promise<Metadata> {
+ const t = getMetadataTranslations("demoPage.metadata");
const mapDataId = await resolveMapDataId(DEMO_MAP_ID);
const mapName = await prisma.matchStart.findFirst({
@@ -64,13 +65,59 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function MapDashboardPage() {
+// Static shell: the demo route prerenders instantly and everything that reads
+// request data (locale, DB reads) streams into ONE boundary whose fallback
+// mirrors the loaded page's own frame — header bar, back link, title row, and
+// the overview tab's pending layout (MapTabsSkeleton).
+export default function MapDashboardPage() {
+ return (
+ <Suspense fallback={<DemoPageSkeleton />}>
+ <DemoPageContent />
+ </Suspense>
+ );
+}
+
+function DemoPageSkeleton() {
+ return (
+ <div className="flex-col md:flex">
+ <div className="border-b">
+ <div className="flex h-16 items-center px-4">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="hidden h-6 w-24 md:flex" />
+ <Skeleton className="h-6 w-6" />
+ <Skeleton className="h-6 w-6 md:hidden" />
+ <Skeleton className="hidden h-6 w-24 md:flex" />
+ </div>
+ </div>
+ </div>
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <div>
+ <h4 className="text-gray-600 dark:text-gray-400">
+ <Skeleton className="h-6 w-48" />
+ </h4>
+ </div>
+ <div className="flex items-center justify-between space-y-2">
+ <h2 className="text-3xl font-bold tracking-tight">
+ <Skeleton className="h-9 w-40" />
+ </h2>
+ </div>
+ <MapTabsSkeleton />
+ </div>
+ </div>
+ );
+}
+
+async function DemoPageContent() {
const t = await getTranslations("mapPage");
+ // The tab components are cached ("use cache"), so the locale is resolved
+ // here at request time and passed in as a prop.
+ const locale = (await getLocale()) as Locale;
const id = DEMO_MAP_ID;
const mapDataId = await resolveMapDataId(id);
@@ -151,6 +198,7 @@ export default async function MapDashboardPage() {
<TabsContent value="overview" className="space-y-4">
<DefaultOverview
id={id}
+ locale={locale}
team1Color={team1}
team2Color={team2}
positionalDataOverride
@@ -159,15 +207,17 @@ export default async function MapDashboardPage() {
<TabsContent value="killfeed" className="space-y-4">
<Killfeed
id={id}
+ locale={locale}
team1Color={team1}
team2Color={team2}
- positionalDataOverride
- coachingCanvasOverride
+ positionalDataEnabled
+ coachingCanvasEnabled
/>
</TabsContent>
<TabsContent value="charts" className="space-y-4">
<MapCharts
id={id}
+ locale={locale}
team1Color={team1}
team2Color={team2}
tempoChartEnabled
@@ -175,19 +225,24 @@ export default async function MapDashboardPage() {
</TabsContent>
<TabsContent value="heatmap" className="space-y-4">
<PremiumHighlight>
- <HeatmapTab id={mapDataId} />
+ <HeatmapTab id={mapDataId} mapId={id} locale={locale} />
</PremiumHighlight>
</TabsContent>
<TabsContent value="replay" className="space-y-4">
<PremiumHighlight>
- <ReplayTab id={mapDataId} />
+ <ReplayTab id={mapDataId} mapId={id} locale={locale} />
</PremiumHighlight>
</TabsContent>
<TabsContent value="events" className="space-y-4">
- <MapEvents id={id} team1Color={team1} team2Color={team2} />
+ <MapEvents
+ id={id}
+ locale={locale}
+ team1Color={team1}
+ team2Color={team2}
+ />
</TabsContent>
<TabsContent value="compare" className="space-y-4">
- <ComparePlayers id={id} />
+ <ComparePlayers id={id} locale={locale} />
</TabsContent>
</Tabs>
</div>
diff --git a/apps/web/src/app/demo/player/[playerId]/loading.tsx b/apps/web/src/app/demo/player/[playerId]/loading.tsx
deleted file mode 100644
index 7aaf6584f..000000000
--- a/apps/web/src/app/demo/player/[playerId]/loading.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import {
- Card,
- CardContent,
- CardFooter,
- CardHeader,
- CardTitle,
-} from "@/components/ui/card";
-import { CardIcon } from "@/components/ui/card-icon";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function PlayerDashboardLoading() {
- const t = await getTranslations("mapPage.player.overview");
-
- return (
- <div className="flex-col md:flex">
- <div className="border-b">
- <div className="hidden h-16 items-center px-4 md:flex">
- <Skeleton className="h-6 w-24" />
- <div className="ml-auto flex items-center space-x-4">
- <Skeleton className="border-input hidden h-9 w-full rounded-md border px-3 py-1 md:flex md:w-[100px] lg:w-[300px]" />
- <Skeleton className="h-9 w-9" />
- <Skeleton className="h-8 w-8 rounded-full" />
- </div>
- </div>
- <div className="flex h-16 items-center px-4 md:hidden">
- <Skeleton className="h-6 w-24" />
- <div className="ml-auto flex items-center space-x-4">
- <Skeleton className="h-9 w-9" />
- <Skeleton className="h-8 w-8 rounded-full" />
- </div>
- </div>
- </div>
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div>
- <h4 className="text-gray-600 dark:text-gray-400">
- <Skeleton className="h-6 w-48" />
- </h4>
- </div>
- <div className="flex items-center justify-between space-y-2">
- <h2 className="text-3xl font-bold tracking-tight">
- <Skeleton className="h-10 w-40" />
- </h2>
- </div>
- <div className="space-y-4">
- <Skeleton className="h-8 w-32" />
- </div>
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("matchTime")}
- </CardTitle>
- <CardIcon>
- <circle cx="12" cy="12" r="10" />
- <polyline points="12 6 12 12 16 14" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-6 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-4 w-32" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="align-baseline text-sm font-medium">
- {t("fletaTitle")}
- </CardTitle>
- <CardIcon>
- <path d="M7.21 15 2.66 7.14a2 2 0 0 1 .13-2.2L4.4 2.8A2 2 0 0 1 6 2h12a2 2 0 0 1 1.6.8l1.6 2.14a2 2 0 0 1 .14 2.2L16.79 15" />
- <path d="M11 12 5.12 2.2" />
- <path d="m13 12 5.88-9.8" />
- <path d="M8 7h8" />
- <circle cx="12" cy="17" r="5" />
- <path d="M12 18v-2h-.5" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-6 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-8 w-full" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("firstPickTitle")}
- </CardTitle>
- <CardIcon>
- <polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5" />
- <line x1="13" x2="19" y1="19" y2="13" />
- <line x1="16" x2="20" y1="16" y2="20" />
- <line x1="19" x2="21" y1="21" y2="19" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-6 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-8 w-full" />
- </CardFooter>
- </Card>
- <Card>
- <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
- <CardTitle className="text-sm font-medium">
- {t("firstDeathTitle")}
- </CardTitle>
- <CardIcon>
- <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
- </CardIcon>
- </CardHeader>
- <CardContent>
- <div className="text-2xl font-bold">
- <Skeleton className="h-6 w-24" />
- </div>
- </CardContent>
- <CardFooter>
- <Skeleton className="h-8 w-full" />
- </CardFooter>
- </Card>
- </div>
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
- <Card className="col-span-full">
- <CardHeader>
- <CardTitle>{t("playerStats")}</CardTitle>
- </CardHeader>
- <CardContent className="pl-4">
- <main>
- <h1 className="scroll-m-20 pb-2 pl-2 text-3xl font-semibold tracking-tight first:mt-0">
- <Skeleton className="h-10 w-32" />
- </h1>
- <div className="flex flex-1">
- <div className="w-full p-2 lg:w-1/2">
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- <Card>
- <Skeleton className="h-56 w-full" />
- </Card>
- </div>
- </div>
- <div className="hidden w-1/2 p-2 md:grid">
- <div className="space-y-4">
- <div className="max-h-[29.5rem] rounded-xl border">
- <Skeleton className="h-[29.5rem] w-full" />
- </div>
- </div>
- </div>
- </div>
- </main>
- </CardContent>
- </Card>
- </div>
- </div>
- </div>
- );
-}
diff --git a/apps/web/src/app/demo/player/[playerId]/page.tsx b/apps/web/src/app/demo/player/[playerId]/page.tsx
index f63e86f7d..1d5dd762c 100644
--- a/apps/web/src/app/demo/player/[playerId]/page.tsx
+++ b/apps/web/src/app/demo/player/[playerId]/page.tsx
@@ -6,12 +6,19 @@ import { PlayerSwitcher } from "@/components/map/player-switcher";
import { PlayerAnalytics } from "@/components/player/analytics";
import { DefaultOverview } from "@/components/player/default-overview";
import { PlayerTelemetry } from "@/components/player/player-telemetry";
+import { StatPanel } from "@/components/player/stat-panel";
import { ModeToggle } from "@/components/theme-switcher";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { PlayerService } from "@/data/player";
+import { defaultLocale } from "@/i18n/config";
import { resolveMapDataId } from "@/lib/map-data-resolver";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { toTitleCase } from "@/lib/utils";
import type { PagePropsWithLocale } from "@/types/next";
@@ -19,6 +26,7 @@ import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
function decodePlayerId(playerId: string) {
try {
@@ -32,10 +40,7 @@ export async function generateMetadata(
props: PagePropsWithLocale<"/demo/player/[playerId]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations({
- locale: params.locale,
- namespace: "mapPage.playerMetadata",
- });
+ const t = getMetadataTranslations("mapPage.playerMetadata");
const playerName = decodePlayerId(params.playerId) ?? "Player";
return {
@@ -56,15 +61,33 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function PlayerDashboardDemoPage(
+// Static shell: params (used by the switcher, heading, and tabs) are
+// request-time under PPR, so everything streams into ONE boundary whose
+// fallback mirrors the loaded page frame and the overview tab's pending
+// layout — a single stable skeleton the content replaces in place.
+export default function PlayerDashboardDemoPage(
props: PagePropsWithLocale<"/demo/player/[playerId]">
) {
- const params = await props.params;
+ return (
+ <div className="flex-col md:flex">
+ <Suspense fallback={<PlayerDashboardDemoSkeleton />}>
+ <PlayerDashboardDemoContent params={props.params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function PlayerDashboardDemoContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/demo/player/[playerId]">["params"];
+}) {
+ const params = await paramsPromise;
const t = await getTranslations("mapPage.player.dashboard");
const id = 10148;
const mapDataId = await resolveMapDataId(id);
@@ -95,7 +118,7 @@ export default async function PlayerDashboardDemoPage(
});
return (
- <div className="flex-col md:flex">
+ <>
<div className="border-b">
<div className="hidden h-16 items-center px-4 md:flex">
<PlayerSwitcher mostPlayedHeroes={mostPlayedHeroes} />
@@ -146,6 +169,95 @@ export default async function PlayerDashboardDemoPage(
</TabsContent>
</Tabs>
</div>
- </div>
+ </>
+ );
+}
+
+const STAT_BLOCK_SLOTS = ["a", "b", "c", "d"] as const;
+const HERO_STAT_SLOTS = ["a", "b", "c", "d", "e", "f"] as const;
+
+// Mirrors the loaded frame (demo header, back link, heading, tab list) and
+// the overview tab's pending layout (stat panel + hero statistics).
+function PlayerDashboardDemoSkeleton() {
+ const t = getStaticTranslations("mapPage.player.dashboard");
+
+ return (
+ <>
+ <div className="border-b">
+ <div className="hidden h-16 items-center px-4 md:flex">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="border-input hidden h-9 w-full rounded-md border px-3 py-1 md:flex md:w-[100px] lg:w-[300px]" />
+ <Skeleton className="h-9 w-9" />
+ <Skeleton className="h-8 w-8 rounded-full" />
+ </div>
+ </div>
+ <div className="flex h-16 items-center px-4 md:hidden">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="h-9 w-9" />
+ <Skeleton className="h-8 w-8 rounded-full" />
+ </div>
+ </div>
+ </div>
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <div>
+ <h4 className="text-gray-600 dark:text-gray-400">
+ <Skeleton className="h-6 w-32" />
+ </h4>
+ </div>
+ <div className="flex items-center justify-between space-y-2">
+ <Skeleton className="h-9 w-64" />
+ </div>
+ <Tabs defaultValue="overview" className="space-y-4">
+ <TabsList>
+ <TabsTrigger value="overview">{t("overview")}</TabsTrigger>
+ <TabsTrigger value="analytics">{t("analytics")}</TabsTrigger>
+ <TabsTrigger value="charts">{t("charts")}</TabsTrigger>
+ <TabsTrigger value="telemetry">{t("telemetry")}</TabsTrigger>
+ </TabsList>
+ <StatPanel>
+ <div className="grid grid-cols-2 lg:grid-cols-4">
+ {STAT_BLOCK_SLOTS.map((slot) => (
+ <div key={slot} className="flex flex-col px-5 py-4">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-3 h-7 w-20" />
+ <Skeleton className="mt-2 h-3 w-32" />
+ </div>
+ ))}
+ </div>
+ </StatPanel>
+ <div className="pt-2">
+ <Skeleton className="h-3 w-32" />
+ <div className="mt-5 flex flex-col gap-4 2xl:flex-row">
+ <div className="2xl:flex-1">
+ <StatPanel>
+ <div className="flex flex-col lg:flex-row">
+ <div className="border-border flex flex-col items-center justify-center gap-3 px-5 py-5 lg:w-[200px] lg:shrink-0 lg:border-r">
+ <Skeleton className="aspect-square w-full max-w-[160px] rounded-lg" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ <div className="grid flex-1 grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-3">
+ {HERO_STAT_SLOTS.map((slot) => (
+ <div key={slot} className="flex flex-col px-5 py-4">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-3 h-7 w-20" />
+ <Skeleton className="mt-2 h-3 w-24" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </StatPanel>
+ </div>
+ <div className="2xl:w-[480px] 2xl:shrink-0">
+ <div className="ring-foreground/10 max-h-[29.5rem] overflow-hidden rounded-xl ring-1">
+ <Skeleton className="h-[29.5rem] w-full" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </Tabs>
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/faceit/page.tsx b/apps/web/src/app/faceit/page.tsx
index aa9922fcf..8ed3974b8 100644
--- a/apps/web/src/app/faceit/page.tsx
+++ b/apps/web/src/app/faceit/page.tsx
@@ -1,19 +1,38 @@
import { FaceitTeamSearch } from "@/components/faceit/team-search";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { FaceitTeamScoutingService } from "@/data/faceit";
import { Effect } from "effect";
import { faceitScouting } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("faceitScoutingPage");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("faceitScoutingPage");
return { title: t("metadata.searchTitle"), description: t("subtitle") };
}
-export default async function FaceitPage() {
- const enabled = await faceitScouting();
+// Static shell: only the frame prerenders. The heading stays inside the
+// flag-gated content — the faceitScouting flag notFound()s the whole page,
+// so the shell must not leak the feature's title.
+export default function FaceitPage() {
+ return (
+ <div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
+ <div className="w-full max-w-2xl space-y-8">
+ <Suspense fallback={<FaceitSearchSkeleton />}>
+ <FaceitContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function FaceitContent() {
+ const enabled = await getFlag(faceitScouting);
if (!enabled) notFound();
const t = await getTranslations("faceitScoutingPage");
@@ -24,19 +43,32 @@ export default async function FaceitPage() {
);
return (
- <div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
- <div className="w-full max-w-2xl space-y-8">
- <div className="space-y-2 text-center">
- <p className="text-muted-foreground font-mono text-[11px] tracking-[0.18em] uppercase">
- {t("searchEyebrow")}
- </p>
- <h1 className="text-4xl font-bold tracking-tight">{t("title")}</h1>
- <p className="text-muted-foreground text-lg text-balance">
- {t("subtitle")}
- </p>
- </div>
- <FaceitTeamSearch teams={teams} />
+ <>
+ <div className="space-y-2 text-center">
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.18em] uppercase">
+ {t("searchEyebrow")}
+ </p>
+ <h1 className="text-4xl font-bold tracking-tight">{t("title")}</h1>
+ <p className="text-muted-foreground text-lg text-balance">
+ {t("subtitle")}
+ </p>
</div>
- </div>
+ <FaceitTeamSearch teams={teams} />
+ </>
+ );
+}
+
+// Mirrors the loaded state: centered eyebrow/title/subtitle stack, then the
+// h-14 rounded-xl search input.
+function FaceitSearchSkeleton() {
+ return (
+ <>
+ <div className="flex flex-col items-center space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-10 w-48" />
+ <Skeleton className="h-5 w-80" />
+ </div>
+ <Skeleton className="h-14 w-full rounded-xl" />
+ </>
);
}
diff --git a/apps/web/src/app/faceit/player/[playerId]/page.tsx b/apps/web/src/app/faceit/player/[playerId]/page.tsx
index 2acd25f56..f1dffea90 100644
--- a/apps/web/src/app/faceit/player/[playerId]/page.tsx
+++ b/apps/web/src/app/faceit/player/[playerId]/page.tsx
@@ -2,10 +2,12 @@ import { AppRuntime } from "@/data/runtime";
import { FaceitPlayerScoutingService } from "@/data/faceit";
import { Effect } from "effect";
import { faceitScouting } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import prisma from "@/lib/prisma";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
import { PlayerProfileHeader } from "@/components/faceit/player-profile-header";
import { PlayerThreatAssessment } from "@/components/faceit/player-threat-assessment";
import { PlayerFsrCard } from "@/components/faceit/player-fsr-card";
@@ -14,6 +16,7 @@ import { PlayerRoleUsage } from "@/components/faceit/player-role-usage";
import { PlayerMapWinrates } from "@/components/faceit/player-map-winrates";
import { PlayerMatchHistory } from "@/components/faceit/player-match-history";
import { PlayerTeams } from "@/components/faceit/player-teams";
+import { Skeleton } from "@/components/ui/skeleton";
export async function generateMetadata({
params,
@@ -33,12 +36,31 @@ export async function generateMetadata({
};
}
-export default async function FaceitPlayerPage({
+// Static shell: the page frame prerenders and the profile (flag check, param,
+// DB reads) streams into ONE boundary whose fallback mirrors the loaded
+// sections, so navigation shows a single stable skeleton.
+export default function FaceitPlayerPage({
params,
}: {
params: Promise<{ playerId: string }>;
}) {
- const enabled = await faceitScouting();
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
+ <div className="mx-auto w-full max-w-5xl space-y-12">
+ <Suspense fallback={<PlayerProfileSkeleton />}>
+ <FaceitPlayerContent params={params} />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function FaceitPlayerContent({
+ params,
+}: {
+ params: Promise<{ playerId: string }>;
+}) {
+ const enabled = await getFlag(faceitScouting);
if (!enabled) notFound();
const { playerId } = await params;
const profile = await AppRuntime.runPromise(
@@ -51,29 +73,206 @@ export default async function FaceitPlayerPage({
profile.fsrRoles.find((r) => r.primary) ?? profile.fsrRoles[0] ?? null;
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
- <div className="mx-auto w-full max-w-5xl space-y-12">
- <PlayerProfileHeader player={profile.player} />
- <PlayerThreatAssessment
- rated={profile.rated}
- roles={profile.fsrRoles}
- byMap={profile.mapWinrates.byMap}
- matchHistory={profile.matchHistory}
- />
- {profile.rated ? (
- <>
- <PlayerFsrCard roles={profile.fsrRoles} />
- {primary ? <PlayerStatProfile role={primary} /> : null}
- <PlayerRoleUsage usage={profile.roleUsage} />
- </>
- ) : null}
- <PlayerMapWinrates
- byMap={profile.mapWinrates.byMap}
- byType={profile.mapWinrates.byType}
- />
- <PlayerMatchHistory entries={profile.matchHistory} />
- <PlayerTeams teams={profile.teams} />
+ <>
+ <PlayerProfileHeader player={profile.player} />
+ <PlayerThreatAssessment
+ rated={profile.rated}
+ roles={profile.fsrRoles}
+ byMap={profile.mapWinrates.byMap}
+ matchHistory={profile.matchHistory}
+ />
+ {profile.rated ? (
+ <>
+ <PlayerFsrCard roles={profile.fsrRoles} />
+ {primary ? <PlayerStatProfile role={primary} /> : null}
+ <PlayerRoleUsage usage={profile.roleUsage} />
+ </>
+ ) : null}
+ <PlayerMapWinrates
+ byMap={profile.mapWinrates.byMap}
+ byType={profile.mapWinrates.byType}
+ />
+ <PlayerMatchHistory entries={profile.matchHistory} />
+ <PlayerTeams teams={profile.teams} />
+ </>
+ );
+}
+
+// Mirrors the loaded sections (profile header + ribbon, threat assessment,
+// FSR, stat profile, role usage, map winrates, match history, teams) so the
+// streamed content replaces this in place.
+function PlayerProfileSkeleton() {
+ return (
+ <>
+ <div className="space-y-4">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-3 lg:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ </div>
+ ))}
+ </dl>
</div>
- </div>
+
+ <section className="space-y-5">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="grid gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="lg:col-span-5">
+ <div className="border-border space-y-3 border-y py-4">
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="h-12 w-28" />
+ <Skeleton className="h-2 w-full" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ </div>
+ <div className="lg:col-span-7">
+ <dl className="grid grid-cols-1 gap-x-8 gap-y-5 sm:grid-cols-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </dl>
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-6">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-4 w-20" />
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-3 lg:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ </div>
+ ))}
+ </dl>
+ <div className="border-border rounded-md border">
+ <Skeleton className="h-8 w-full rounded-none rounded-t-md" />
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton
+ key={k}
+ className="h-10 w-full rounded-none border-t border-[var(--border)]"
+ />
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="grid items-center gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="lg:col-span-5">
+ <Skeleton className="h-64 w-full" />
+ </div>
+ <div className="space-y-2.5 lg:col-span-7">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="flex items-center gap-3">
+ <Skeleton className="h-4 w-28 shrink-0" />
+ <Skeleton className="h-3 flex-1" />
+ <Skeleton className="h-4 w-10 shrink-0" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <ul className="space-y-3">
+ {["a", "b", "c"].map((k) => (
+ <li key={k} className="flex items-center gap-4">
+ <Skeleton className="h-4 w-20 shrink-0" />
+ <Skeleton className="h-3 flex-1" />
+ <Skeleton className="h-4 w-12 shrink-0" />
+ </li>
+ ))}
+ </ul>
+ </section>
+
+ <section className="space-y-6">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-16" />
+ <div className="border-border rounded-md border">
+ <Skeleton className="h-8 w-full rounded-none rounded-t-md" />
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton
+ key={k}
+ className="h-10 w-full rounded-none border-t border-[var(--border)]"
+ />
+ ))}
+ </div>
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-16" />
+ <div className="border-border rounded-md border">
+ <Skeleton className="h-8 w-full rounded-none rounded-t-md" />
+ {["a", "b", "c"].map((k) => (
+ <Skeleton
+ key={k}
+ className="h-10 w-full rounded-none border-t border-[var(--border)]"
+ />
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-40" />
+ </div>
+ <div className="border-border rounded-md border">
+ <Skeleton className="h-8 w-full rounded-none rounded-t-md" />
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton
+ key={k}
+ className="h-10 w-full rounded-none border-t border-[var(--border)]"
+ />
+ ))}
+ </div>
+ </section>
+
+ <div className="space-y-4">
+ <div className="space-y-1">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <ul className="space-y-2">
+ {["a", "b", "c"].map((k) => (
+ <li key={k} className="flex items-center gap-2">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-3 w-20" />
+ </li>
+ ))}
+ </ul>
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/faceit/player/page.tsx b/apps/web/src/app/faceit/player/page.tsx
index 39041d3fd..a50297fb3 100644
--- a/apps/web/src/app/faceit/player/page.tsx
+++ b/apps/web/src/app/faceit/player/page.tsx
@@ -1,26 +1,28 @@
import { FaceitPlayerSearch } from "@/components/faceit/player-search";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { FaceitPlayerScoutingService } from "@/data/faceit";
import { Effect } from "effect";
import { faceitScouting } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("faceitPlayerPage");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("faceitPlayerPage");
return { title: t("metadata.searchTitle"), description: t("subtitle") };
}
-export default async function FaceitPlayerSearchPage() {
- const enabled = await faceitScouting();
- if (!enabled) notFound();
- const t = await getTranslations("faceitPlayerPage");
- const players = await AppRuntime.runPromise(
- FaceitPlayerScoutingService.pipe(
- Effect.flatMap((svc) => svc.getFaceitPlayers())
- )
- );
+// Static shell: the frame and heading prerender (default-locale text via the
+// cookie-free translator); the flag gate and player list stream into ONE
+// boundary whose fallback mirrors the search input.
+export default function FaceitPlayerSearchPage() {
+ const t = getStaticTranslations("faceitPlayerPage");
return (
<div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
<div className="w-full max-w-2xl space-y-8">
@@ -33,8 +35,21 @@ export default async function FaceitPlayerSearchPage() {
{t("subtitle")}
</p>
</div>
- <FaceitPlayerSearch players={players} />
+ <Suspense fallback={<Skeleton className="h-14 w-full rounded-xl" />}>
+ <FaceitPlayerSearchContent />
+ </Suspense>
</div>
</div>
);
}
+
+async function FaceitPlayerSearchContent() {
+ const enabled = await getFlag(faceitScouting);
+ if (!enabled) notFound();
+ const players = await AppRuntime.runPromise(
+ FaceitPlayerScoutingService.pipe(
+ Effect.flatMap((svc) => svc.getFaceitPlayers())
+ )
+ );
+ return <FaceitPlayerSearch players={players} />;
+}
diff --git a/apps/web/src/app/faceit/team/[teamId]/page.tsx b/apps/web/src/app/faceit/team/[teamId]/page.tsx
index 2ff5a9370..3f9adf1e6 100644
--- a/apps/web/src/app/faceit/team/[teamId]/page.tsx
+++ b/apps/web/src/app/faceit/team/[teamId]/page.tsx
@@ -2,10 +2,12 @@ import { AppRuntime } from "@/data/runtime";
import { FaceitTeamScoutingService } from "@/data/faceit";
import { Effect } from "effect";
import { faceitScouting } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import prisma from "@/lib/prisma";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
import { FaceitTeamHeader } from "@/components/faceit/faceit-team-header";
import { FaceitGamePlan } from "@/components/faceit/faceit-game-plan";
import { FaceitTeamOverview } from "@/components/faceit/faceit-team-overview";
@@ -13,6 +15,7 @@ import { FaceitPatchTimeline } from "@/components/faceit/faceit-patch-timeline";
import { FaceitMapPerformance } from "@/components/faceit/faceit-map-performance";
import { FaceitHeroBanEnvironment } from "@/components/faceit/faceit-hero-ban-environment";
import { FaceitRoster } from "@/components/faceit/faceit-roster";
+import { Skeleton } from "@/components/ui/skeleton";
export async function generateMetadata({
params,
@@ -32,14 +35,35 @@ export async function generateMetadata({
};
}
-export default async function FaceitTeamPage({
+// Static shell: the page frame prerenders and the flag/param/DB work streams
+// into ONE boundary whose fallback mirrors the loaded profile's layout, so
+// navigation shows a single stable skeleton the content replaces in place.
+export default function FaceitTeamPage({
params,
searchParams,
}: {
params: Promise<{ teamId: string }>;
searchParams: Promise<{ combined?: string }>;
}) {
- const enabled = await faceitScouting();
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
+ <div className="mx-auto w-full max-w-5xl space-y-12">
+ <Suspense fallback={<FaceitTeamProfileSkeleton />}>
+ <FaceitTeamContent params={params} searchParams={searchParams} />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function FaceitTeamContent({
+ params,
+ searchParams,
+}: {
+ params: Promise<{ teamId: string }>;
+ searchParams: Promise<{ combined?: string }>;
+}) {
+ const enabled = await getFlag(faceitScouting);
if (!enabled) notFound();
const { teamId } = await params;
@@ -54,26 +78,168 @@ export default async function FaceitTeamPage({
if (!profile) notFound();
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
- <div className="mx-auto w-full max-w-5xl space-y-12">
- <FaceitTeamHeader
- name={profile.team.name}
- overview={profile.overview}
- strength={profile.strength}
- related={profile.relatedTeams}
- teamId={teamId}
- combined={combined}
- />
- <FaceitGamePlan recommendations={profile.recommendations} />
- <FaceitTeamOverview
- overview={profile.overview}
- attackDefense={profile.mapAnalysis.attackDefense}
- />
- <FaceitPatchTimeline eras={profile.patchTimeline} />
- <FaceitMapPerformance analysis={profile.mapAnalysis} />
- <FaceitHeroBanEnvironment entries={profile.heroBanEnvironment} />
- <FaceitRoster roster={profile.roster} />
- </div>
- </div>
+ <>
+ <FaceitTeamHeader
+ name={profile.team.name}
+ overview={profile.overview}
+ strength={profile.strength}
+ related={profile.relatedTeams}
+ teamId={teamId}
+ combined={combined}
+ />
+ <FaceitGamePlan recommendations={profile.recommendations} />
+ <FaceitTeamOverview
+ overview={profile.overview}
+ attackDefense={profile.mapAnalysis.attackDefense}
+ />
+ <FaceitPatchTimeline eras={profile.patchTimeline} />
+ <FaceitMapPerformance analysis={profile.mapAnalysis} />
+ <FaceitHeroBanEnvironment entries={profile.heroBanEnvironment} />
+ <FaceitRoster roster={profile.roster} />
+ </>
+ );
+}
+
+// Mirrors the loaded profile: team header + stat ribbon, then the game plan,
+// overview, patch timeline, map performance, hero ban, and roster sections.
+function FaceitTeamProfileSkeleton() {
+ return (
+ <>
+ <header className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+ </header>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-40" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="border-border grid gap-x-10 gap-y-7 border-y py-6 sm:grid-cols-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-3">
+ <Skeleton className="h-3 w-28" />
+ {["x", "y", "z"].map((j) => (
+ <Skeleton key={j} className="h-4 w-full" />
+ ))}
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-5">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-40" />
+ </div>
+ <div className="grid gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="space-y-3 lg:col-span-7">
+ <Skeleton className="h-3 w-20" />
+ <div className="flex flex-wrap gap-1.5">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="size-7 rounded-sm" />
+ ))}
+ </div>
+ <Skeleton className="h-6 w-full rounded-md" />
+ </div>
+ <div className="space-y-4 lg:col-span-5">
+ <Skeleton className="h-3 w-28" />
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-1.5">
+ <div className="flex items-baseline justify-between">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-4 w-10" />
+ </div>
+ <Skeleton className="h-2 w-full" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="space-y-2.5">
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="h-4 w-full" />
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-40" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="border-border overflow-x-auto rounded-md border">
+ <div className="divide-y divide-[var(--border)]">
+ <Skeleton className="h-8 w-full rounded-none" />
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-6">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-36" />
+ </div>
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <div className="border-border overflow-x-auto rounded-md border">
+ <div className="divide-y divide-[var(--border)]">
+ <Skeleton className="h-8 w-full rounded-none" />
+ {["x", "y", "z", "w"].map((j) => (
+ <Skeleton key={j} className="h-10 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </div>
+ ))}
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-40" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="border-border overflow-x-auto rounded-md border">
+ <div className="divide-y divide-[var(--border)]">
+ <Skeleton className="h-8 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-36" />
+ </div>
+ <div className="border-border overflow-x-auto rounded-md border">
+ <div className="divide-y divide-[var(--border)]">
+ <Skeleton className="h-8 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </section>
+ </>
);
}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index ec83263d6..0c5f8bd36 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,9 +1,16 @@
-import { BrandThemeProvider } from "@/components/brand-theme-provider";
+import {
+ BrandThemeHydrator,
+ BrandThemeProvider,
+} from "@/components/brand-theme-provider";
import { CommandDialogMenu } from "@/components/command-menu";
import { CommandMenuProvider } from "@/components/command-menu-provider";
import { DevTools } from "@/components/devtools";
-import { FeatureFlagsProvider } from "@/components/feature-flags-provider";
+import {
+ FeatureFlagsHydrator,
+ FeatureFlagsProvider,
+} from "@/components/feature-flags-provider";
import { BetaBanner } from "@/components/home/beta-banner";
+import { IntlHydrator, IntlProvider } from "@/components/intl-provider";
import { AppSettingsProvider } from "@/components/settings/app-settings-provider";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner";
@@ -13,9 +20,10 @@ import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { register } from "@/instrumentation";
import { auth } from "@/lib/auth";
+import { defaultLocale, type Locale, locales } from "@/i18n/config";
import { DSG_TEAM_ID } from "@/lib/brand-theme";
import { WebVitals } from "@/lib/axiom/client";
-import { resolveAllFlags, toFlagValues } from "@/lib/flags-helpers";
+import { getAllFlags, toFlagValues } from "@/lib/flags-helpers";
import { QueryProvider } from "@/lib/query";
import { cn } from "@/lib/utils";
import { UsageBeacon } from "@/components/usage/usage-beacon";
@@ -23,17 +31,20 @@ import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { FlagValues } from "flags/react";
import type { Metadata } from "next";
-import { NextIntlClientProvider } from "next-intl";
+import type { AbstractIntlMessages } from "next-intl";
import { Suspense } from "react";
-import { getLocale, getMessages, getTranslations } from "next-intl/server";
+import { cookies } from "next/headers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { Geist_Mono } from "next/font/google";
import localFont from "next/font/local";
import { NuqsAdapter } from "nuqs/adapters/next/app";
+import enMessages from "../../messages/en.json";
import "./globals.css";
-export async function generateMetadata(): Promise<Metadata> {
- const locale = await getLocale();
- const t = await getTranslations({ locale, namespace: "metadata" });
+export function generateMetadata(): Metadata {
+ // Resolved in the default locale (see getMetadataTranslations) so the route's
+ // <head> can be prerendered under Cache Components.
+ const t = getMetadataTranslations("metadata");
return {
title: t("title"),
@@ -52,7 +63,7 @@ export async function generateMetadata(): Promise<Metadata> {
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
@@ -81,34 +92,9 @@ const geistMono = Geist_Mono({
void register();
-export default async function RootLayout({ children }: LayoutProps<"/">) {
- const locale = await getLocale();
- const messages = await getMessages();
- const session = await auth();
- let user = null;
-
- if (session) {
- user = await AppRuntime.runPromise(
- UserService.pipe(Effect.flatMap((svc) => svc.getUser(session.user.email)))
- );
- }
-
- let isDsgMember = false;
-
- if (session) {
- isDsgMember = await AppRuntime.runPromise(
- UserService.pipe(
- Effect.flatMap((svc) =>
- svc.isMemberOfTeam(session.user.email, DSG_TEAM_ID)
- )
- )
- );
- }
-
- const flags = await resolveAllFlags();
-
+export default function RootLayout({ children }: LayoutProps<"/">) {
return (
- <html lang={locale} className="h-full" suppressHydrationWarning>
+ <html lang="en" className="h-full" suppressHydrationWarning>
<body
className={cn(
switzer.variable,
@@ -116,30 +102,49 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
"font-sans h-full antialiased"
)}
>
- <NuqsAdapter>
- <QueryProvider>
- <ThemeProvider
- attribute="class"
- defaultTheme={isDsgMember ? "disguised" : "system"}
- enableSystem
- themes={["light", "dark", "disguised"]}
- disableTransitionOnChange
- >
+ {/* Everything here is request-independent so the ENTIRE provider tree
+ prerenders into every route's static shell — pages paint their own
+ content instantly instead of waiting behind a root boundary.
+ Request-derived values (locale override, flags, session-derived
+ bits) stream in as self-contained islands below and hydrate the
+ stateful providers after first paint. */}
+ <ThemeProvider
+ attribute="class"
+ defaultTheme="system"
+ enableSystem
+ themes={["light", "dark", "disguised"]}
+ disableTransitionOnChange
+ >
+ <NuqsAdapter>
+ <QueryProvider>
<TooltipProvider>
- <NextIntlClientProvider messages={messages}>
+ <IntlProvider
+ // Same shape next-intl consumes at runtime; the JSON import
+ // type is too wide for AbstractIntlMessages (see i18n/request.ts).
+ defaultMessages={
+ enMessages as unknown as AbstractIntlMessages
+ }
+ >
<CommandMenuProvider>
<AppSettingsProvider>
- <BrandThemeProvider canUseDisguised={isDsgMember}>
- <FeatureFlagsProvider flags={flags}>
- <FlagValues values={toFlagValues(flags)} />
+ <BrandThemeProvider>
+ <FeatureFlagsProvider>
<BetaBanner />
{children}
- <CommandDialogMenu user={user} />
+ <Suspense fallback={null}>
+ <LocaleIsland />
+ </Suspense>
+ <Suspense fallback={null}>
+ <FlagsIsland />
+ </Suspense>
+ <Suspense fallback={null}>
+ <SessionIsland />
+ </Suspense>
</FeatureFlagsProvider>
</BrandThemeProvider>
</AppSettingsProvider>
</CommandMenuProvider>
- </NextIntlClientProvider>
+ </IntlProvider>
</TooltipProvider>
<Toaster />
<SpeedInsights />
@@ -149,10 +154,78 @@ export default async function RootLayout({ children }: LayoutProps<"/">) {
</Suspense>
<DevTools />
<WebVitals />
- </ThemeProvider>
- </QueryProvider>
- </NuqsAdapter>
+ </QueryProvider>
+ </NuqsAdapter>
+ </ThemeProvider>
</body>
</html>
);
}
+
+/**
+ * Streams the cookie-selected locale into the static intl provider. Reads the
+ * cookie directly (not `getLocale`) to guarantee this island is request-time.
+ * Default-locale users get no override — and no message payload — at all.
+ */
+async function LocaleIsland() {
+ const cookieLocale = (await cookies()).get("LOCALE")?.value;
+ const locale: Locale = locales.some((l) => l.code === cookieLocale)
+ ? (cookieLocale as Locale)
+ : defaultLocale;
+ if (locale === defaultLocale) return null;
+
+ const messages = (
+ (await import(`../../messages/${locale}.json`)) as {
+ default: AbstractIntlMessages;
+ }
+ ).default;
+
+ return <IntlHydrator locale={locale} messages={messages} />;
+}
+
+/**
+ * Streams real flag values (decoded from the proxy's precomputed code) into
+ * the static flags provider, plus the Flags Explorer values script.
+ */
+async function FlagsIsland() {
+ const flags = await getAllFlags();
+
+ return (
+ <>
+ <FeatureFlagsHydrator flags={flags} />
+ <FlagValues values={toFlagValues(flags)} />
+ </>
+ );
+}
+
+/**
+ * Streams the session-derived extras: the command-menu dialog (its `user`
+ * prop only feeds the lazily-opened bug-report form) and the DSG brand-theme
+ * unlock. Nothing visible blocks on these.
+ */
+async function SessionIsland() {
+ const session = await auth();
+ const [user, isDsgMember] = session
+ ? await Promise.all([
+ AppRuntime.runPromise(
+ UserService.pipe(
+ Effect.flatMap((svc) => svc.getUser(session.user.email))
+ )
+ ),
+ AppRuntime.runPromise(
+ UserService.pipe(
+ Effect.flatMap((svc) =>
+ svc.isMemberOfTeam(session.user.email, DSG_TEAM_ID)
+ )
+ )
+ ),
+ ])
+ : [null, false];
+
+ return (
+ <>
+ <BrandThemeHydrator canUseDisguised={isDsgMember} />
+ <CommandDialogMenu user={user} />
+ </>
+ );
+}
diff --git a/apps/web/src/app/leaderboard/csr/page.tsx b/apps/web/src/app/leaderboard/csr/page.tsx
index 5b89dd7ac..442a84963 100644
--- a/apps/web/src/app/leaderboard/csr/page.tsx
+++ b/apps/web/src/app/leaderboard/csr/page.tsx
@@ -7,21 +7,39 @@ import {
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";
+import { Skeleton } from "@/components/ui/skeleton";
import { getCompositeSRLeaderboard } from "@/lib/hero-rating";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { getHeroNames, toHero } from "@/lib/utils";
import { heroRoleMapping, type HeroName } from "@/types/heroes";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("leaderboardPage.csrPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("leaderboardPage.csrPage.metadata");
return {
title: t("title"),
description: t("description"),
};
}
-export default async function CsrLeaderboardPage(props: {
+// Static shell: only the page frame prerenders. The header eyebrow depends on
+// the ?hero search param, so the header streams in with the content — one
+// boundary, one fallback that mirrors the loaded layout.
+export default function CsrLeaderboardPage(props: {
+ searchParams: Promise<{ hero?: string }>;
+}) {
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <Suspense fallback={<CsrLeaderboardSkeleton />}>
+ <CsrLeaderboardContent searchParams={props.searchParams} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function CsrLeaderboardContent(props: {
searchParams: Promise<{ hero?: string }>;
}) {
const [t, heroNames] = await Promise.all([
@@ -72,7 +90,7 @@ export default async function CsrLeaderboardPage(props: {
: null;
return (
- <div className="px-6 pt-8 pb-16 sm:px-10">
+ <>
<header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-6">
<div>
<p className="text-muted-foreground font-mono text-xs tracking-[0.18em] uppercase">
@@ -185,6 +203,89 @@ export default async function CsrLeaderboardPage(props: {
<LeaderboardWithStats data={serializedData} role={role} />
</section>
)}
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded layout: header block, subnav + hero-selector row, then
+// the LeaderboardWithStats grid (its 7fr/5fr table + stats aside).
+function CsrLeaderboardSkeleton() {
+ return (
+ <>
+ <header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-6">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-3 h-9 w-52" />
+ <Skeleton className="mt-2 h-4 w-80" />
+ </div>
+ </header>
+
+ <div className="mt-6 flex flex-wrap items-center gap-3">
+ <Skeleton className="h-9 w-44 rounded-md" />
+ <Skeleton className="h-9 w-[200px] rounded-md" />
+ </div>
+
+ <section className="mt-8">
+ <div className="grid gap-8 lg:grid-cols-[minmax(0,7fr)_minmax(0,5fr)]">
+ <div className="min-w-0">
+ <Skeleton className="mb-3 h-8 w-full" />
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="mt-px h-12 w-full" />
+ ))}
+ </div>
+
+ <aside>
+ <div className="space-y-8">
+ <div className="border-border border-b pb-5">
+ <Skeleton className="h-3 w-36" />
+ <div className="mt-2 flex items-baseline justify-between gap-4">
+ <Skeleton className="h-7 w-40" />
+ <Skeleton className="h-8 w-20" />
+ </div>
+ <Skeleton className="mt-1 h-3 w-24" />
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-20" />
+ <div className="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k}>
+ <Skeleton className="h-2.5 w-14" />
+ <Skeleton className="mt-1.5 h-6 w-16" />
+ <Skeleton className="mt-1 h-2.5 w-20" />
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="h-48 w-full rounded-md" />
+ </div>
+
+ <div className="space-y-4">
+ <Skeleton className="h-3 w-44" />
+ <Skeleton className="h-64 w-full rounded-md" />
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-24" />
+ <ul className="grid grid-cols-1 gap-x-10 gap-y-2.5 sm:grid-cols-2">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <li
+ key={k}
+ className="border-border/60 flex items-baseline justify-between gap-6 border-b py-1.5"
+ >
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </section>
+ </>
);
}
diff --git a/apps/web/src/app/leaderboard/layout.tsx b/apps/web/src/app/leaderboard/layout.tsx
index b5c90695b..03966a69f 100644
--- a/apps/web/src/app/leaderboard/layout.tsx
+++ b/apps/web/src/app/leaderboard/layout.tsx
@@ -1,10 +1,10 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("leaderboardPage.metadata");
- const locale = await getLocale();
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("leaderboardPage.metadata");
return {
title: t("title"),
@@ -22,7 +22,7 @@ export async function generateMetadata(): Promise<Metadata> {
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/leaderboard/page.tsx b/apps/web/src/app/leaderboard/page.tsx
index 0105aed7c..46227c8ab 100644
--- a/apps/web/src/app/leaderboard/page.tsx
+++ b/apps/web/src/app/leaderboard/page.tsx
@@ -2,19 +2,37 @@ import {
LeaderboardHub,
type MetricStats,
} from "@/components/leaderboard/leaderboard-hub";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import { getInitialTsrLeaderboard } from "@/lib/tsr/leaderboard";
import type { Metadata } from "next";
import { getFormatter, getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("leaderboardPage.hub.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("leaderboardPage.hub.metadata");
return {
title: t("title"),
description: t("description"),
};
}
-export default async function LeaderboardHubPage() {
+// Static shell: LeaderboardHub renders the whole page frame (header included),
+// so the shell is a single boundary whose fallback mirrors the hub's own
+// layout — real header text via the cookie-free translator, skeleton metric
+// sections — replacing the old route loading.tsx.
+export default function LeaderboardHubPage() {
+ return (
+ <Suspense fallback={<HubSkeleton />}>
+ <LeaderboardHubContent />
+ </Suspense>
+ );
+}
+
+async function LeaderboardHubContent() {
const [tsr, t, formatter] = await Promise.all([
getInitialTsrLeaderboard(),
getTranslations("leaderboardPage.hub"),
@@ -84,3 +102,77 @@ function formatRecompute(
if (hours < 24) return t("relative.hoursAgo", { count: hours });
return t("relative.daysAgo", { count: Math.floor(hours / 24) });
}
+
+// Mirrors LeaderboardHub's layout (container, header, two metric sections)
+// so the streamed content replaces this in place with no jump.
+function HubSkeleton() {
+ const t = getStaticTranslations("leaderboardPage.hub");
+
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border border-b pb-6">
+ <p className="text-muted-foreground font-mono text-xs tracking-[0.18em] uppercase">
+ {t("eyebrow")}
+ </p>
+ <h1 className="mt-3 text-4xl leading-none font-semibold tracking-tight">
+ {t("title")}
+ </h1>
+ <p className="text-muted-foreground mt-3 max-w-prose text-sm leading-relaxed">
+ {t("description")}
+ </p>
+ </header>
+
+ <div className="mt-2 divide-y divide-[var(--border)]">
+ {["csr", "tsr"].map((k) => (
+ <div
+ key={k}
+ className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]"
+ >
+ <div>
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="mt-3 h-8 w-48" />
+ <Skeleton className="mt-3 h-3 w-28" />
+ <Skeleton className="mt-6 h-9 w-36" />
+ </div>
+
+ <div className="space-y-6">
+ <div className="border-border flex flex-wrap items-baseline gap-x-8 gap-y-2 border-b pb-4">
+ {["a", "b", "c"].map((j) => (
+ <div key={j} className="flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-6 w-20" />
+ </div>
+ ))}
+ </div>
+
+ <div>
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="mt-2 h-4 w-full" />
+ <Skeleton className="mt-1.5 h-4 w-3/4" />
+ </div>
+
+ <div className="grid gap-6 sm:grid-cols-2">
+ <div>
+ <Skeleton className="h-2.5 w-24" />
+ <div className="mt-2 space-y-1.5">
+ {["a", "b", "c"].map((j) => (
+ <Skeleton key={j} className="h-4 w-full" />
+ ))}
+ </div>
+ </div>
+ <div>
+ <Skeleton className="h-2.5 w-24" />
+ <div className="mt-2 space-y-1.5">
+ {["a", "b"].map((j) => (
+ <Skeleton key={j} className="h-4 w-full" />
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/map-calibration/[mapName]/page.tsx b/apps/web/src/app/map-calibration/[mapName]/page.tsx
index 681cf549e..d9dcb7ca2 100644
--- a/apps/web/src/app/map-calibration/[mapName]/page.tsx
+++ b/apps/web/src/app/map-calibration/[mapName]/page.tsx
@@ -3,20 +3,39 @@ import {
ZoneSection,
type MapZoneDto,
} from "@/components/admin/map-calibration/zone-section";
+import { Skeleton } from "@/components/ui/skeleton";
import { getCurrentUser, isAdminUser } from "@/lib/auth";
import { dataLabeling } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import type { MapTransform } from "@/lib/map-calibration/types";
import prisma from "@/lib/prisma";
import { r2 } from "@/lib/r2";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export default async function MapCalibrationEditorPage({
+// Static shell: the page frame prerenders and the flag/auth/DB-derived editor
+// streams into ONE boundary whose fallback mirrors the editor's loaded layout.
+export default function MapCalibrationEditorPage({
+ params,
+}: {
+ params: Promise<{ mapName: string }>;
+}) {
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-4 pb-4 sm:px-6">
+ <Suspense fallback={<CalibrationEditorSkeleton />}>
+ <MapCalibrationEditorContent params={params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function MapCalibrationEditorContent({
params,
}: {
params: Promise<{ mapName: string }>;
}) {
const [enabled, user, { mapName }] = await Promise.all([
- dataLabeling(),
+ getFlag(dataLabeling),
getCurrentUser(),
params,
]);
@@ -106,7 +125,7 @@ export default async function MapCalibrationEditorPage({
}
return (
- <div className="flex flex-1 flex-col px-4 pt-4 pb-4 sm:px-6">
+ <>
<CalibrationEditor
mapName={decodedMapName}
calibration={calibrationWithUrl}
@@ -121,6 +140,72 @@ export default async function MapCalibrationEditorPage({
initialZones={zones}
/>
) : null}
- </div>
+ </>
+ );
+}
+
+// Mirrors CalibrationEditor's loaded layout (toolbar row, canvas + w-80
+// sidebar) plus the ZoneSection block below it.
+function CalibrationEditorSkeleton() {
+ return (
+ <>
+ <div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+ <div className="flex items-center gap-4">
+ <Skeleton className="h-8 w-20 rounded-md" />
+ <Skeleton className="h-7 w-48" />
+ <div className="ml-auto flex gap-2">
+ <Skeleton className="h-8 w-28 rounded-md" />
+ </div>
+ </div>
+
+ <div className="flex min-h-0 flex-1 gap-4">
+ <div className="min-w-0 flex-1">
+ <Skeleton className="h-full w-full rounded-lg" />
+ </div>
+
+ <div className="flex w-80 shrink-0 flex-col gap-4">
+ <div className="rounded-lg border p-3">
+ <Skeleton className="mb-2 h-4 w-28" />
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="mb-1.5 h-9 w-full rounded-md" />
+ ))}
+ </div>
+
+ <div className="flex gap-2">
+ <Skeleton className="h-8 flex-1 rounded-md" />
+ </div>
+
+ <Skeleton className="h-24 w-full rounded-md" />
+
+ <Skeleton className="h-20 w-full rounded-md" />
+ </div>
+ </div>
+ </div>
+
+ <div className="mt-6 flex gap-4">
+ <div className="min-w-0 flex-1 space-y-2">
+ <Skeleton className="h-8 w-24 rounded-md" />
+ <Skeleton className="h-96 w-full rounded-lg" />
+ </div>
+
+ <div className="flex w-80 shrink-0 flex-col gap-3">
+ <Skeleton className="h-8 w-full rounded-md" />
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2 rounded-lg border p-3">
+ <Skeleton className="h-8 w-full rounded-md" />
+ <div className="flex gap-1.5">
+ {["x", "y", "z"].map((j) => (
+ <Skeleton key={j} className="h-5 w-16 rounded-full" />
+ ))}
+ </div>
+ <div className="flex gap-2">
+ <Skeleton className="h-8 flex-1 rounded-md" />
+ <Skeleton className="h-8 w-16 rounded-md" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/map-calibration/page.tsx b/apps/web/src/app/map-calibration/page.tsx
index 22fdeaf10..117ae571f 100644
--- a/apps/web/src/app/map-calibration/page.tsx
+++ b/apps/web/src/app/map-calibration/page.tsx
@@ -1,14 +1,37 @@
import { MapCalibrationList } from "@/components/admin/map-calibration/map-calibration-list";
+import { Skeleton } from "@/components/ui/skeleton";
import { getCurrentUser, isAdminUser } from "@/lib/auth";
import { dataLabeling } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
-import { getTranslations } from "next-intl/server";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export default async function MapCalibrationPage() {
- const enabled = await dataLabeling();
+// Static shell: the frame and default-locale heading prerender, and the
+// flag/auth/DB work streams into ONE boundary whose fallback mirrors
+// MapCalibrationList's pending layout.
+export default function MapCalibrationPage() {
+ const t = getStaticTranslations("mapCalibrationPage");
+
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
+ <div className="mx-auto w-full max-w-7xl space-y-6">
+ <div className="space-y-1">
+ <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+ <p className="text-muted-foreground">{t("description")}</p>
+ </div>
+ <Suspense fallback={<MapCalibrationListSkeleton />}>
+ <MapCalibrationContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function MapCalibrationContent() {
+ const enabled = await getFlag(dataLabeling);
if (!enabled) notFound();
- const t = await getTranslations("mapCalibrationPage");
const user = await getCurrentUser();
if (!user) {
@@ -20,14 +43,42 @@ export default async function MapCalibrationPage() {
include: { anchors: true },
});
+ return <MapCalibrationList calibrations={calibrations} />;
+}
+
+// Mirrors MapCalibrationList's pending layout (search + type-filter row, map
+// card grid) so the streamed content replaces this in place.
+function MapCalibrationListSkeleton() {
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-8 sm:px-8">
- <div className="mx-auto w-full max-w-7xl space-y-6">
- <div className="space-y-1">
- <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
- <p className="text-muted-foreground">{t("description")}</p>
+ <div className="space-y-4">
+ <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+ <Skeleton className="h-9 w-full sm:max-w-xs" />
+ <div className="flex gap-1">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-7 w-16 rounded-md" />
+ ))}
</div>
- <MapCalibrationList calibrations={calibrations} />
+ </div>
+ <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l"].map(
+ (k) => (
+ <div
+ key={k}
+ className="ring-foreground/10 bg-card rounded-xl py-6 shadow-xs ring-1"
+ >
+ <div className="space-y-2 px-6 pb-2">
+ <div className="flex items-start justify-between gap-2">
+ <Skeleton className="h-5 w-32" />
+ <Skeleton className="h-5 w-16 rounded-full" />
+ </div>
+ <Skeleton className="h-3.5 w-20" />
+ </div>
+ <div className="mt-6 px-6">
+ <Skeleton className="h-3 w-28" />
+ </div>
+ </div>
+ )
+ )}
</div>
</div>
);
diff --git a/apps/web/src/app/matchmaker/[teamId]/page.tsx b/apps/web/src/app/matchmaker/[teamId]/page.tsx
index 609d18c33..0c41d80d0 100644
--- a/apps/web/src/app/matchmaker/[teamId]/page.tsx
+++ b/apps/web/src/app/matchmaker/[teamId]/page.tsx
@@ -3,15 +3,29 @@ import prisma from "@/lib/prisma";
import { getMatchmakerCandidates } from "@/lib/matchmaker/candidates";
import { SearcherSummary } from "@/components/matchmaker/searcher-summary";
import { CandidateRow } from "@/components/matchmaker/candidate-row";
+import { Skeleton } from "@/components/ui/skeleton";
import Link from "next/link";
import { redirect } from "next/navigation";
import type { Route } from "next";
import { UserRole } from "@/generated/prisma/browser";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
type PageProps = { params: Promise<{ teamId: string }> };
-export default async function MatchmakerListPage({ params }: PageProps) {
+// Static shell: everything on this page is request-derived (params, auth,
+// candidate search), so the shell is a single boundary whose fallback mirrors
+// the candidate-list layout — one stable skeleton the content replaces in
+// place.
+export default function MatchmakerListPage({ params }: PageProps) {
+ return (
+ <Suspense fallback={<MatchmakerListSkeleton />}>
+ <MatchmakerListContent params={params} />
+ </Suspense>
+ );
+}
+
+async function MatchmakerListContent({ params }: PageProps) {
const t = await getTranslations("matchmaker");
const { teamId: rawTeamId } = await params;
const teamId = parseInt(rawTeamId, 10);
@@ -81,3 +95,53 @@ export default async function MatchmakerListPage({ params }: PageProps) {
</div>
);
}
+
+// Mirrors SearcherSummary (header card with title, rating block, tier ladder)
+// and a column of CandidateRows so the streamed content lands with no jump.
+function MatchmakerListSkeleton() {
+ return (
+ <div className="container mx-auto max-w-4xl space-y-6 p-6">
+ <header className="border-border bg-card/40 rounded-xl border p-6">
+ <div className="flex flex-wrap items-baseline justify-between gap-x-8 gap-y-3">
+ <div className="space-y-2">
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ <div className="flex flex-col items-end gap-2">
+ <Skeleton className="h-9 w-24" />
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-5 w-16" />
+ <Skeleton className="h-5 w-12" />
+ <Skeleton className="h-3.5 w-28" />
+ </div>
+ </div>
+ </div>
+ <div className="mt-5">
+ <Skeleton className="h-8 w-full rounded-md" />
+ </div>
+ </header>
+
+ <div className="border-border divide-border bg-card divide-y overflow-hidden rounded-xl border">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div
+ key={k}
+ className="flex items-center justify-between gap-6 px-5 py-4"
+ >
+ <div className="min-w-0 flex-1 space-y-1.5">
+ <div className="flex flex-wrap items-center gap-2">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-5 w-16" />
+ <Skeleton className="h-5 w-12" />
+ </div>
+ <Skeleton className="h-4 w-full max-w-xs" />
+ </div>
+ <div className="flex flex-col items-end gap-1">
+ <Skeleton className="h-6 w-16" />
+ <Skeleton className="h-3.5 w-12" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/matchmaker/[teamId]/vs/[opposingTeamId]/page.tsx b/apps/web/src/app/matchmaker/[teamId]/vs/[opposingTeamId]/page.tsx
index 0be82029f..534ff1f99 100644
--- a/apps/web/src/app/matchmaker/[teamId]/vs/[opposingTeamId]/page.tsx
+++ b/apps/web/src/app/matchmaker/[teamId]/vs/[opposingTeamId]/page.tsx
@@ -13,8 +13,11 @@ import { getMatchmakerCandidates } from "@/lib/matchmaker/candidates";
import { SkillDeviation } from "@/components/matchmaker/skill-deviation";
import { SendRequestButton } from "@/components/matchmaker/send-request-button";
import { TeamTsrCard } from "@/components/team/team-tsr-card";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import { FaceitTier, UserRole } from "@/generated/prisma/browser";
import { getFormatter, getTranslations } from "next-intl/server";
+import { Suspense } from "react";
type PageProps = {
params: Promise<{ teamId: string; opposingTeamId: string }>;
@@ -23,7 +26,21 @@ type PageProps = {
const COOLDOWN_HOURS = 24;
const DAILY_LIMIT = 10;
-export default async function MatchmakerDetailPage({ params }: PageProps) {
+// Static shell: the page frame prerenders and the request-derived matchup
+// streams into ONE boundary whose fallback mirrors the loaded layout, so
+// navigation shows a single stable skeleton that the content replaces in
+// place.
+export default function MatchmakerDetailPage({ params }: PageProps) {
+ return (
+ <div className="container mx-auto max-w-5xl space-y-6 p-6">
+ <Suspense fallback={<MatchmakerDetailSkeleton />}>
+ <MatchmakerDetailContent params={params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function MatchmakerDetailContent({ params }: PageProps) {
const [t, formatter] = await Promise.all([
getTranslations("matchmaker"),
getFormatter(),
@@ -159,7 +176,7 @@ export default async function MatchmakerDetailPage({ params }: PageProps) {
disabledReason = t("send-button-limit-short");
return (
- <div className="container mx-auto max-w-5xl space-y-6 p-6">
+ <>
<div className="flex flex-wrap items-baseline justify-between gap-3">
<div>
<p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
@@ -227,6 +244,145 @@ export default async function MatchmakerDetailPage({ params }: PageProps) {
disabledReason={disabledReason}
/>
</section>
+ </>
+ );
+}
+
+// Mirrors the loaded layout (header row, two TSR cards, skill deviation,
+// availability card, message preview) so the streamed content replaces the
+// skeleton in place. Static labels render as default-locale text.
+function MatchmakerDetailSkeleton() {
+ const t = getStaticTranslations("matchmaker");
+
+ return (
+ <>
+ <div className="flex flex-wrap items-baseline justify-between gap-3">
+ <div>
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
+ {t("detail-eyebrow")}
+ </p>
+ <Skeleton className="mt-1 h-8 w-64" />
+ </div>
+ <Skeleton className="h-2.5 w-24" />
+ </div>
+
+ <div className="grid gap-4 md:grid-cols-2">
+ <div className="space-y-2">
+ <p className="text-muted-foreground font-mono text-[10px] tracking-[0.16em] uppercase">
+ {t("your-team")}
+ </p>
+ <TsrCardSkeleton />
+ </div>
+ <div className="space-y-2">
+ <p className="text-muted-foreground font-mono text-[10px] tracking-[0.16em] uppercase">
+ {t("their-team")}
+ </p>
+ <TsrCardSkeleton />
+ </div>
+ </div>
+
+ <section className="border-border bg-card rounded-xl border p-6">
+ <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+ <div>
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
+ {t("skill-deviation")}
+ </p>
+ <Skeleton className="mt-1 h-5 w-48" />
+ </div>
+ <div className="space-y-1">
+ <Skeleton className="ml-auto h-7 w-16" />
+ <div className="text-muted-foreground text-right font-mono text-[10px] tracking-[0.16em] uppercase">
+ ΔTSR
+ </div>
+ </div>
+ </div>
+ <div className="mt-6 space-y-4">
+ <div>
+ <p className="text-muted-foreground font-mono text-[10px] tracking-[0.16em] uppercase">
+ {t("your-team")}
+ </p>
+ <div className="mt-2 space-y-3">
+ <Skeleton className="h-2 w-full" />
+ <div className="h-12" />
+ </div>
+ </div>
+ <div>
+ <p className="text-muted-foreground font-mono text-[10px] tracking-[0.16em] uppercase">
+ {t("their-team")}
+ </p>
+ <div className="mt-2 space-y-3">
+ <Skeleton className="h-2 w-full" />
+ <div className="h-12" />
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <div className="border-border bg-card rounded-xl border p-6">
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
+ {t("availability-overlap-title")}
+ </p>
+ <div className="mt-2 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ </div>
+
+ <section className="border-border bg-card space-y-5 rounded-xl border p-6">
+ <div>
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
+ {t("message-preview")}
+ </p>
+ <div className="mt-2 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-5/6" />
+ <Skeleton className="h-4 w-2/3" />
+ </div>
+ </div>
+ <Skeleton className="h-10 w-40" />
+ </section>
+ </>
+ );
+}
+
+function TsrCardSkeleton() {
+ return (
+ <div className="ring-foreground/10 bg-card flex flex-col gap-6 rounded-xl py-6 text-sm shadow-xs ring-1">
+ <div className="border-border border-b px-6 pb-6">
+ <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+ <div className="space-y-1.5">
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="h-5 w-28" />
+ </div>
+ <div className="space-y-1">
+ <Skeleton className="ml-auto h-8 w-20" />
+ <Skeleton className="ml-auto h-2.5 w-28" />
+ </div>
+ </div>
+ </div>
+ <div className="space-y-6 px-6">
+ <div className="space-y-3">
+ <div className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2">
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-2.5 w-24" />
+ </div>
+ <Skeleton className="h-2 w-full" />
+ <div className="h-12" />
+ </div>
+ <ul className="divide-border divide-y">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <li
+ key={k}
+ className="grid grid-cols-[minmax(0,1fr)_minmax(0,7rem)_5rem_4rem] items-center gap-4 py-2"
+ >
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-1.5 w-full" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-2.5 w-full" />
+ </li>
+ ))}
+ </ul>
+ </div>
</div>
);
}
diff --git a/apps/web/src/app/matchmaker/layout.tsx b/apps/web/src/app/matchmaker/layout.tsx
index 9fdc6cabd..3ede0dcfd 100644
--- a/apps/web/src/app/matchmaker/layout.tsx
+++ b/apps/web/src/app/matchmaker/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("matchmaker.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("matchmaker.metadata");
return {
title: t("title"),
diff --git a/apps/web/src/app/matchmaker/page.tsx b/apps/web/src/app/matchmaker/page.tsx
index 1dc5b0a68..6b10c9333 100644
--- a/apps/web/src/app/matchmaker/page.tsx
+++ b/apps/web/src/app/matchmaker/page.tsx
@@ -5,19 +5,32 @@ import {
MatchmakerHub,
type HubTeam,
} from "@/components/matchmaker/matchmaker-hub";
+import { Skeleton } from "@/components/ui/skeleton";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { getTierBucket } from "@/lib/tsr/tier-bucket";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("matchmaker.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("matchmaker.metadata");
return {
title: t("title"),
description: t("description"),
};
}
-export default async function MatchmakerHubPage() {
+// Static shell: MatchmakerHub paints the whole page (including its own
+// padding/header), so the shell is a single boundary whose fallback mirrors
+// the hub's layout and is replaced in place by the streamed content.
+export default function MatchmakerHubPage() {
+ return (
+ <Suspense fallback={<MatchmakerHubSkeleton />}>
+ <MatchmakerHubContent />
+ </Suspense>
+ );
+}
+
+async function MatchmakerHubContent() {
const session = await auth();
if (!session?.user?.email) redirect("/sign-in");
@@ -72,3 +85,66 @@ export default async function MatchmakerHubPage() {
return <MatchmakerHub teams={hubTeams} />;
}
+
+// Mirrors MatchmakerHub's layout: header, mechanics grid with 5/3/2 bullet
+// groups, and the team picker list (button + blacklist link per row).
+function MatchmakerHubSkeleton() {
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border border-b pb-6">
+ <Skeleton className="h-2.5 w-24" />
+ <Skeleton className="mt-3 h-9 w-56" />
+ <Skeleton className="mt-3 h-4 w-80 max-w-full" />
+ </header>
+
+ <section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
+ <div>
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="mt-3 h-8 w-48" />
+ <Skeleton className="mt-3 h-4 w-64 max-w-full" />
+ </div>
+
+ <div className="space-y-6">
+ {([5, 3, 2] as const).map((count) => (
+ <div key={count}>
+ <Skeleton className="h-2.5 w-20" />
+ <div className="mt-2 space-y-1.5">
+ {Array.from({ length: count }, (_, i) => (
+ <Skeleton key={i} className="h-4 w-full" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="border-border border-t pt-10 sm:pt-12">
+ <div className="grid gap-x-10 gap-y-6 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
+ <div>
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="mt-3 h-8 w-48" />
+ <Skeleton className="mt-3 h-4 w-64 max-w-full" />
+ </div>
+
+ <div className="border-border divide-border bg-card divide-y overflow-hidden rounded-xl border">
+ {["a", "b", "c"].map((k) => (
+ <div
+ key={k}
+ className="flex items-center justify-between gap-4 px-5 py-4"
+ >
+ <div className="min-w-0 flex-1 space-y-2">
+ <Skeleton className="h-4 w-36" />
+ <Skeleton className="h-2.5 w-24" />
+ </div>
+ <div className="flex flex-col items-end gap-1.5">
+ <Skeleton className="h-9 w-28 rounded-md" />
+ <Skeleton className="h-2.5 w-24" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/not-found-copy.tsx b/apps/web/src/app/not-found-copy.tsx
new file mode 100644
index 000000000..10353c67e
--- /dev/null
+++ b/apps/web/src/app/not-found-copy.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Link } from "@/components/ui/link";
+import { useTranslations } from "next-intl";
+
+/**
+ * Client so the copy prerenders into the static shell from the intl
+ * provider's default-locale messages (a server `getTranslations` call would
+ * read the LOCALE cookie and force the whole 404 page dynamic). Non-default
+ * locales swap in once the root layout's locale island hydrates.
+ */
+export function NotFoundCopy() {
+ const t = useTranslations("notFound");
+
+ return (
+ <>
+ <div className="flex flex-1 flex-col justify-center py-12">
+ <div className="max-w-lg">
+ <p className="not-found-eyebrow font-mono text-sm font-semibold tracking-[0.15em] text-[#ee1c25]">
+ {t("404")}
+ </p>
+ <h1 className="not-found-title mt-4 font-mono text-4xl font-extrabold tracking-tight sm:text-6xl">
+ {t("header")}
+ </h1>
+ <p className="not-found-desc text-muted-foreground mt-6 text-base leading-7">
+ {t("description")}
+ </p>
+ <div className="mt-10">
+ <Link
+ href="/"
+ className="font-mono text-sm font-semibold text-[#ee1c25]"
+ >
+ <span aria-hidden="true">←</span> {t("backHome")}
+ </Link>
+ </div>
+ </div>
+ </div>
+
+ <footer className="text-muted-foreground pt-8 text-sm">
+ <Link href="/contact">{t("contact")}</Link>
+ </footer>
+ </>
+ );
+}
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index 289e401d8..1e2df6489 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -1,11 +1,12 @@
import { Link } from "@/components/ui/link";
-import { getTranslations } from "next-intl/server";
import Image from "next/image";
import { fallingHalftoneSvg } from "./falling-halftone";
+import { NotFoundCopy } from "./not-found-copy";
-export default async function NotFound() {
- const t = await getTranslations("notFound");
-
+// Fully static: the SVG art stays server-rendered (it would bloat the client
+// bundle), and the translated copy lives in the NotFoundCopy client component
+// so this route prerenders instead of reading the LOCALE cookie.
+export default function NotFound() {
return (
<div className="bg-background text-foreground relative min-h-svh">
{/* Desktop only: full-width red→chrome bleed behind both columns. */}
@@ -44,31 +45,7 @@ export default async function NotFound() {
/>
</Link>
- <div className="flex flex-1 flex-col justify-center py-12">
- <div className="max-w-lg">
- <p className="not-found-eyebrow font-mono text-sm font-semibold tracking-[0.15em] text-[#ee1c25]">
- {t("404")}
- </p>
- <h1 className="not-found-title mt-4 font-mono text-4xl font-extrabold tracking-tight sm:text-6xl">
- {t("header")}
- </h1>
- <p className="not-found-desc text-muted-foreground mt-6 text-base leading-7">
- {t("description")}
- </p>
- <div className="mt-10">
- <Link
- href="/"
- className="font-mono text-sm font-semibold text-[#ee1c25]"
- >
- <span aria-hidden="true">←</span> {t("backHome")}
- </Link>
- </div>
- </div>
- </div>
-
- <footer className="text-muted-foreground pt-8 text-sm">
- <Link href="/contact">{t("contact")}</Link>
- </footer>
+ <NotFoundCopy />
</div>
</div>
</div>
diff --git a/apps/web/src/app/notifications/layout.tsx b/apps/web/src/app/notifications/layout.tsx
index 54ad8a2b2..0c491f821 100644
--- a/apps/web/src/app/notifications/layout.tsx
+++ b/apps/web/src/app/notifications/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("notifications.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("notifications.metadata");
return { title: t("title"), description: t("description") };
}
diff --git a/apps/web/src/app/notifications/page.tsx b/apps/web/src/app/notifications/page.tsx
index 774d03a39..e73852427 100644
--- a/apps/web/src/app/notifications/page.tsx
+++ b/apps/web/src/app/notifications/page.tsx
@@ -1,11 +1,28 @@
import { NotificationsPage } from "@/components/notifications/notifications-page";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
+import { Bell, Loader2 } from "lucide-react";
import { unauthorized } from "next/navigation";
+import { Suspense } from "react";
-export default async function Notifications() {
+// Static shell: the auth-gated content streams into ONE boundary whose
+// fallback mirrors NotificationsPage's own pending layout (header row, card
+// with the zero-count title, h-64 spinner well), so navigation shows a
+// single, stable loading state that the client component replaces in place.
+export default function Notifications() {
+ return (
+ <Suspense fallback={<NotificationsSkeleton />}>
+ <NotificationsContent />
+ </Suspense>
+ );
+}
+
+async function NotificationsContent() {
const session = await auth();
if (!session) unauthorized();
@@ -16,3 +33,32 @@ export default async function Notifications() {
return <NotificationsPage />;
}
+
+function NotificationsSkeleton() {
+ const t = getStaticTranslations("notifications");
+
+ return (
+ <div className="container mx-auto max-w-4xl p-6">
+ <div className="mb-6 flex items-center gap-4">
+ <Skeleton className="h-8 w-8 rounded-md" />
+ <div className="flex items-center gap-2">
+ <Bell className="h-6 w-6" />
+ <h1 className="text-2xl font-bold">{t("title")}</h1>
+ </div>
+ </div>
+
+ <Card>
+ <CardHeader>
+ <CardTitle className="text-lg">
+ {t("unread-notifications", { count: 0 })}
+ </CardTitle>
+ </CardHeader>
+ <CardContent className="p-0">
+ <div className="flex h-64 items-center justify-center">
+ <Loader2 className="h-8 w-8 animate-spin" />
+ </div>
+ </CardContent>
+ </Card>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 7c08540d2..b965d5d86 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,22 +1,26 @@
import { ClosedBetaBanner } from "@/components/home/banner";
-import { LandingPage } from "@/components/home/landing-page";
import { V3LandingPage } from "@/components/home/v3/landing-page";
import type { Availability } from "@/lib/auth";
-import { newLandingPage } from "@/lib/flags";
import { get } from "@vercel/edge-config";
+import { cacheLife } from "next/cache";
-export default async function Home() {
- const [appAvailability, showNewLanding] = await Promise.all([
- get<Availability>("availability"),
- newLandingPage(),
- ]);
+async function getAvailability() {
+ "use cache";
+ cacheLife("minutes");
+ return get<Availability>("availability");
+}
+// Marketing page: fully prerendered into the static shell (no loading state).
+// The availability read is cached so it can be part of the shell; the landing
+// page streams only its logged-in CTA state.
+export default async function Home() {
+ const appAvailability = await getAvailability();
const isPrivate = appAvailability === "private";
return (
<>
{isPrivate && <ClosedBetaBanner />}
- {showNewLanding ? <V3LandingPage /> : <LandingPage />}
+ <V3LandingPage />
</>
);
}
diff --git a/apps/web/src/app/pricing/page.tsx b/apps/web/src/app/pricing/page.tsx
index f7589c2ad..baabeaa69 100644
--- a/apps/web/src/app/pricing/page.tsx
+++ b/apps/web/src/app/pricing/page.tsx
@@ -11,22 +11,21 @@ import { PricingFaq } from "@/components/pricing/pricing-faq";
import { PricingHero } from "@/components/pricing/pricing-hero";
import { PricingStructuredData } from "@/components/pricing/pricing-structured-data";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { toTitleCase } from "@/lib/utils";
import type { Metadata, Route } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
+import { getTranslations } from "next-intl/server";
import { Instrument_Serif } from "next/font/google";
import type { SVGProps } from "react";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const locale = await getLocale();
- const t = await getTranslations({
- locale,
- namespace: "pricingPage.metadata",
- });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("pricingPage.metadata");
return {
title: t("title"),
@@ -94,7 +93,21 @@ const footerNavigation: FooterNavigation = {
],
};
-export default async function PricingPage() {
+// Static shell: the font-scoped page frame prerenders and the locale- and
+// auth-derived content streams into ONE boundary whose fallback mirrors the
+// full pricing page layout — so navigation shows a single, stable skeleton
+// instead of a cascade of different loading states.
+export default function PricingPage() {
+ return (
+ <div className={`${instrumentSerif.variable} bg-white dark:bg-black`}>
+ <Suspense fallback={<PricingSkeleton />}>
+ <PricingContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function PricingContent() {
const t = await getTranslations("pricingPage");
const session = await auth();
@@ -498,7 +511,7 @@ export default async function PricingPage() {
];
return (
- <div className={`${instrumentSerif.variable} bg-white dark:bg-black`}>
+ <>
<PricingStructuredData faqs={structuredFaqs} />
<main>
@@ -612,6 +625,176 @@ export default async function PricingPage() {
</div>
</div>
</footer>
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded page's section rhythm (hero, tier cards, comparison
+// table, logo cloud, testimonial, FAQ, CTA, footer) with matching paddings so
+// the streamed content replaces this in place with no jump.
+function PricingSkeleton() {
+ return (
+ <>
+ <main>
+ <section className="relative py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto max-w-2xl text-center">
+ <Skeleton className="mx-auto h-10 w-80 max-w-full sm:h-[3.75rem] sm:w-[32rem]" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="mx-auto h-5 w-96 max-w-full" />
+ <Skeleton className="mx-auto h-5 w-64 max-w-full" />
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="py-16 sm:py-24">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="rounded-2xl border p-8">
+ <Skeleton className="h-5 w-24" />
+ <Skeleton className="mt-2 h-4 w-48" />
+ <Skeleton className="mt-6 h-10 w-24" />
+ <Skeleton className="mt-8 h-10 w-full" />
+ <div className="mt-8 space-y-3">
+ {["p", "q", "r", "s", "t", "u", "v", "w"].map((item) => (
+ <Skeleton key={item} className="h-4 w-full" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="py-16 sm:py-24">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="mx-auto max-w-md space-y-8 lg:hidden">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="rounded-2xl border p-8">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="mt-2 h-10 w-24" />
+ <Skeleton className="mt-8 h-10 w-full" />
+ <div className="mt-10 space-y-4">
+ {["p", "q", "r", "s", "t"].map((item) => (
+ <Skeleton key={item} className="h-4 w-full" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+
+ <div className="mt-20 hidden lg:block">
+ <div className="grid grid-cols-4 gap-x-8 pb-8">
+ <div />
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2 px-6">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-10 w-20" />
+ <Skeleton className="mt-4 h-9 w-full" />
+ </div>
+ ))}
+ </div>
+ {["fa", "fb", "fc", "fd", "fe"].map((section) => (
+ <div key={section} className="mt-10">
+ <Skeleton className="mb-4 h-4 w-32" />
+ <div className="space-y-4">
+ {["r1", "r2", "r3", "r4", "r5"].map((row) => (
+ <div key={row} className="grid grid-cols-4 gap-x-8 py-2">
+ <Skeleton className="h-4 w-40" />
+ {["c1", "c2", "c3"].map((col) => (
+ <Skeleton key={col} className="mx-auto h-4 w-4" />
+ ))}
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="mx-auto max-w-7xl px-6 pt-32 sm:pt-48 lg:px-8">
+ <Skeleton className="mx-auto mb-8 h-5 w-64" />
+ <div className="flex justify-around gap-8 overflow-hidden py-2">
+ {["a", "b", "c", "d", "e", "f", "g"].map((k) => (
+ <Skeleton key={k} className="h-8 w-24 flex-none" />
+ ))}
+ </div>
+ </section>
+
+ <section className="px-6 py-24 sm:py-32 lg:px-8">
+ <div className="mx-auto max-w-2xl">
+ <div className="flex gap-x-1">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-5 w-5 flex-none" />
+ ))}
+ </div>
+ <div className="mt-10 space-y-2">
+ <Skeleton className="h-6 w-full" />
+ <Skeleton className="h-6 w-4/5" />
+ <Skeleton className="h-6 w-3/4" />
+ </div>
+ <div className="mt-10 flex items-center gap-x-6">
+ <Skeleton className="h-12 w-12 flex-none rounded-full" />
+ <div className="space-y-1">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-3 w-48" />
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="py-24 sm:py-32">
+ <div className="mx-auto max-w-7xl px-6 lg:px-8">
+ <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+ <div className="space-y-4 lg:col-span-5">
+ <Skeleton className="h-8 w-48" />
+ <Skeleton className="h-4 w-80 max-w-full" />
+ <Skeleton className="h-4 w-72 max-w-full" />
+ </div>
+ <div className="mt-10 lg:col-span-7 lg:mt-0">
+ <div className="space-y-10">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-5 w-72 max-w-full" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="py-32 sm:py-40">
+ <div className="mx-auto max-w-2xl px-6 text-center lg:px-8">
+ <Skeleton className="mx-auto h-8 w-72" />
+ <Skeleton className="mx-auto mt-2 h-8 w-56" />
+ <Skeleton className="mx-auto mt-6 h-5 w-96 max-w-full" />
+ <Skeleton className="mx-auto mt-2 h-5 w-80 max-w-full" />
+ <div className="mt-10 flex items-center justify-center gap-x-6">
+ <Skeleton className="h-11 w-36" />
+ <Skeleton className="h-5 w-24" />
+ </div>
+ </div>
+ </section>
+ </main>
+
+ <footer className="relative">
+ <div className="mx-auto max-w-7xl px-6 pt-4 pb-8 lg:px-8">
+ <div className="border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between dark:border-white/10">
+ <div className="flex space-x-6 md:order-2">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-6 w-6" />
+ ))}
+ </div>
+ <Skeleton className="mt-8 h-3 w-48 md:order-1 md:mt-0" />
+ </div>
+ </div>
+ </footer>
+ </>
);
}
diff --git a/apps/web/src/app/privacy/layout.tsx b/apps/web/src/app/privacy/layout.tsx
index fe8f25e67..38bf44ed0 100644
--- a/apps/web/src/app/privacy/layout.tsx
+++ b/apps/web/src/app/privacy/layout.tsx
@@ -1,14 +1,11 @@
import { Footer } from "@/components/footer";
import { Header } from "@/components/header";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const locale = await getLocale();
- const t = await getTranslations({
- locale,
- namespace: "privacyPage.metadata",
- });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("privacyPage.metadata");
return {
title: t("title"),
@@ -27,7 +24,7 @@ export async function generateMetadata(): Promise<Metadata> {
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index 8bfc2decb..78da6595a 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -1,102 +1,169 @@
+import { Skeleton } from "@/components/ui/skeleton";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
+import { Suspense } from "react";
-export default async function PrivacyPage() {
- const t = await getTranslations("privacyPage");
-
+// Static shell: the page frame prerenders and the locale-aware policy text
+// streams into ONE boundary whose fallback mirrors the loaded layout.
+export default function PrivacyPage() {
return (
<div className="bg-white px-6 py-32 lg:px-8 dark:bg-black">
<div className="mx-auto max-w-3xl text-base leading-7 text-gray-700 dark:text-gray-200">
- <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-200">
- {t("privacyPolicy.title")}
- </h1>
- <p className="mt-6 text-xl leading-8">
- {t("privacyPolicy.description")}
- </p>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("collectInformation.title")}
- </h2>
- <div className="mt-6 max-w-2xl">
- <p>{t("collectInformation.description")}</p>
- <ul className="mt-8 max-w-xl space-y-8 text-gray-600 dark:text-gray-300">
- <li className="flex gap-x-3">
- <CheckCircleIcon
- className="mt-1 h-5 w-5 flex-none text-sky-600"
- aria-hidden="true"
- />
- <span>
- <strong className="font-semibold text-gray-900 dark:text-white">
- {t("collectInformation.email.title")}:
- </strong>{" "}
- {t("collectInformation.email.description")}
- </span>
- </li>
- <li className="flex gap-x-3">
- <CheckCircleIcon
- className="mt-1 h-5 w-5 flex-none text-sky-600"
- aria-hidden="true"
- />
- <span>
- <strong className="font-semibold text-gray-900 dark:text-white">
- {t("collectInformation.picture.title")}:{" "}
- </strong>{" "}
- {t("collectInformation.picture.description")}
- </span>
- </li>
- <li className="flex gap-x-3">
- <CheckCircleIcon
- className="mt-1 h-5 w-5 flex-none text-sky-600"
- aria-hidden="true"
- />
- <span>
- <strong className="font-semibold text-gray-900 dark:text-white">
- {t("collectInformation.data.title")}:{" "}
- </strong>{" "}
- {t("collectInformation.data.description")}
- </span>
- </li>
- </ul>
- </div>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("useInformation.title")}
- </h2>
- <p className="mt-6">{t("useInformation.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("useInformation.list1")}</li>
- <li>{t("useInformation.list2")}</li>
- <li>{t("useInformation.list3")}</li>
- <li>{t("useInformation.list4")}</li>
+ <Suspense fallback={<PrivacyPolicySkeleton />}>
+ <PrivacyContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function PrivacyContent() {
+ const t = await getTranslations("privacyPage");
+
+ return (
+ <>
+ <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-200">
+ {t("privacyPolicy.title")}
+ </h1>
+ <p className="mt-6 text-xl leading-8">{t("privacyPolicy.description")}</p>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("collectInformation.title")}
+ </h2>
+ <div className="mt-6 max-w-2xl">
+ <p>{t("collectInformation.description")}</p>
+ <ul className="mt-8 max-w-xl space-y-8 text-gray-600 dark:text-gray-300">
+ <li className="flex gap-x-3">
+ <CheckCircleIcon
+ className="mt-1 h-5 w-5 flex-none text-sky-600"
+ aria-hidden="true"
+ />
+ <span>
+ <strong className="font-semibold text-gray-900 dark:text-white">
+ {t("collectInformation.email.title")}:
+ </strong>{" "}
+ {t("collectInformation.email.description")}
+ </span>
+ </li>
+ <li className="flex gap-x-3">
+ <CheckCircleIcon
+ className="mt-1 h-5 w-5 flex-none text-sky-600"
+ aria-hidden="true"
+ />
+ <span>
+ <strong className="font-semibold text-gray-900 dark:text-white">
+ {t("collectInformation.picture.title")}:{" "}
+ </strong>{" "}
+ {t("collectInformation.picture.description")}
+ </span>
+ </li>
+ <li className="flex gap-x-3">
+ <CheckCircleIcon
+ className="mt-1 h-5 w-5 flex-none text-sky-600"
+ aria-hidden="true"
+ />
+ <span>
+ <strong className="font-semibold text-gray-900 dark:text-white">
+ {t("collectInformation.data.title")}:{" "}
+ </strong>{" "}
+ {t("collectInformation.data.description")}
+ </span>
+ </li>
</ul>
+ </div>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("useInformation.title")}
+ </h2>
+ <p className="mt-6">{t("useInformation.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("useInformation.list1")}</li>
+ <li>{t("useInformation.list2")}</li>
+ <li>{t("useInformation.list3")}</li>
+ <li>{t("useInformation.list4")}</li>
+ </ul>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("storageSecurity.title")}
- </h2>
- <p className="mt-6">{t("storageSecurity.description")}</p>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("storageSecurity.title")}
+ </h2>
+ <p className="mt-6">{t("storageSecurity.description")}</p>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("thirdPartyLinks.title")}
- </h2>
- <p className="mt-6">{t("thirdPartyLinks.description")}</p>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("thirdPartyLinks.title")}
+ </h2>
+ <p className="mt-6">{t("thirdPartyLinks.description")}</p>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("changePrivacyPolicy.title")}
- </h2>
- <p className="mt-6">{t("changePrivacyPolicy.description")}</p>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("changePrivacyPolicy.title")}
+ </h2>
+ <p className="mt-6">{t("changePrivacyPolicy.description")}</p>
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("contactUs.title")}
- </h2>
- <p className="mt-6">
- {t.rich("contactUs.description", {
- link: (chunks) => (
- <Link href="mailto:privacy@lux.dev" className="text-blue-500">
- {chunks}
- </Link>
- ),
- })}
- </p>
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("contactUs.title")}
+ </h2>
+ <p className="mt-6">
+ {t.rich("contactUs.description", {
+ link: (chunks) => (
+ <Link href="mailto:privacy@lux.dev" className="text-blue-500">
+ {chunks}
+ </Link>
+ ),
+ })}
+ </p>
+ </>
+ );
+}
+
+// Mirrors the loaded content's layout (heading, intro, icon list, disc list,
+// trailing sections) so the streamed text replaces it in place with no jump.
+function PrivacyPolicySkeleton() {
+ return (
+ <>
+ <Skeleton className="mt-2 h-9 w-64" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-4/5" />
</div>
- </div>
+
+ <Skeleton className="mt-16 h-7 w-56" />
+ <div className="mt-6 max-w-2xl space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ <ul className="mt-8 max-w-xl space-y-8">
+ {["a", "b", "c"].map((k) => (
+ <li key={k} className="flex gap-x-3">
+ <Skeleton className="mt-1 h-5 w-5 shrink-0 rounded-full" />
+ <div className="flex-1 space-y-1.5">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ </li>
+ ))}
+ </ul>
+
+ <Skeleton className="mt-16 h-7 w-48" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-5/6" />
+ </div>
+ <ul className="mt-8 max-w-xl space-y-2 pl-8">
+ {["a", "b", "c", "d"].map((k) => (
+ <li key={k}>
+ <Skeleton className="h-4 w-full" />
+ </li>
+ ))}
+ </ul>
+
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k}>
+ <Skeleton className="mt-16 h-7 w-52" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+ </div>
+ ))}
+ </>
);
}
diff --git a/apps/web/src/app/profile/[playerName]/layout.tsx b/apps/web/src/app/profile/[playerName]/layout.tsx
index bf7b9d06d..556434742 100644
--- a/apps/web/src/app/profile/[playerName]/layout.tsx
+++ b/apps/web/src/app/profile/[playerName]/layout.tsx
@@ -1,13 +1,13 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
export async function generateMetadata(
props: LayoutProps<"/profile/[playerName]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("profilePage.layoutMetadata");
- const locale = await getLocale();
+ const t = getMetadataTranslations("profilePage.layoutMetadata");
const playerName = decodeURIComponent(params.playerName);
return {
@@ -26,7 +26,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/profile/[playerName]/page.tsx b/apps/web/src/app/profile/[playerName]/page.tsx
index 6cbd9a02c..7f25146e8 100644
--- a/apps/web/src/app/profile/[playerName]/page.tsx
+++ b/apps/web/src/app/profile/[playerName]/page.tsx
@@ -16,6 +16,7 @@ import {
import { SectionHeader } from "@/components/stats/team/section-header";
import { StatRibbon } from "@/components/stats/team/stat-ribbon";
import { PlayerTargetsTab } from "@/components/targets/player-targets-tab";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { RankedService } from "@/data/ranked";
import { ScrimService } from "@/data/scrim";
@@ -29,6 +30,7 @@ import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth, getViewableScrimIds } from "@/lib/auth";
import { positionalData } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { getCompositeSRLeaderboard } from "@/lib/hero-rating";
import { Permission } from "@/lib/permissions";
import prisma from "@/lib/prisma";
@@ -40,6 +42,7 @@ import type { PagePropsWithLocale } from "@/types/next";
import { $Enums, Prisma, type Scrim } from "@/generated/prisma/client";
import { getTranslations } from "next-intl/server";
import Image from "next/image";
+import { Suspense } from "react";
type HeroData = {
player_hero: string;
@@ -59,10 +62,28 @@ const ROLE_HUE_CLASS: Record<"Tank" | "Damage" | "Support", string> = {
Support: "bg-emerald-500/80",
};
-export default async function ProfilePage(
+// Static shell: the page frame prerenders and all request-derived content
+// streams into ONE boundary whose fallback mirrors the loaded profile layout,
+// so navigation shows a single stable skeleton that the content replaces in
+// place.
+export default function ProfilePage(
props: PagePropsWithLocale<"/profile/[playerName]">
) {
- const params = await props.params;
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <Suspense fallback={<ProfileSkeleton />}>
+ <ProfileContent params={props.params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function ProfileContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/profile/[playerName]">["params"];
+}) {
+ const params = await paramsPromise;
const name = decodeURIComponent(params.playerName);
const t = await getTranslations("heroes");
const session = await auth();
@@ -307,7 +328,7 @@ export default async function ProfilePage(
},
});
- const showPositioning = await positionalData();
+ const showPositioning = await getFlag(positionalData);
const { stats, kills, deaths, mapWinrates } = await AppRuntime.runPromise(
Effect.all(
@@ -413,7 +434,7 @@ export default async function ProfilePage(
: [];
return (
- <div className="px-6 pt-8 pb-16 sm:px-10">
+ <>
<ProfileHeader
player={playerData}
stats={[
@@ -745,6 +766,157 @@ export default async function ProfilePage(
</TabsContent>
)}
</Tabs>
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded profile's pending layout (header, tab bar, stat ribbon,
+// and the overview sections) so the streamed content replaces this in place.
+function ProfileSkeleton() {
+ return (
+ <>
+ <header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-8">
+ <div className="flex items-end gap-5">
+ <Skeleton className="h-14 w-14 shrink-0 rounded-full" />
+ <div className="space-y-2 pb-1">
+ <Skeleton className="h-3 w-14" />
+ <Skeleton className="h-9 w-44" />
+ </div>
+ </div>
+ <div className="flex flex-wrap items-baseline gap-x-8 gap-y-2 pb-1">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-12" />
+ <Skeleton className="h-5 w-16" />
+ <Skeleton className="h-2.5 w-20" />
+ </div>
+ ))}
+ </div>
+ </header>
+
+ <div className="border-border mt-6 flex gap-6 border-b">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="mb-3 h-3 w-16" />
+ ))}
+ </div>
+
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-36" />
+ <Skeleton className="mt-2 h-6 w-72" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-2">
+ {["a", "b"].map((k) => (
+ <div key={k} className="bg-card flex flex-col gap-2 px-5 py-5">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-8 w-28" />
+ <Skeleton className="h-3 w-40" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-56" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div
+ key={k}
+ className="bg-card flex items-center gap-4 px-5 py-5"
+ >
+ <Skeleton className="size-14 shrink-0 rounded-md" />
+ <div className="flex flex-1 flex-col gap-2">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div
+ key={k}
+ className="bg-card flex items-center gap-4 px-5 py-3"
+ >
+ <div className="flex min-w-[180px] items-center gap-3">
+ <Skeleton className="size-8 shrink-0 rounded-md" />
+ <Skeleton className="h-4 w-24" />
+ </div>
+ <Skeleton className="h-1.5 flex-1 rounded-full" />
+ <Skeleton className="h-3 w-20 shrink-0" />
+ <Skeleton className="h-4 w-20 shrink-0" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-2 h-6 w-64" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="bg-card flex flex-col gap-2 px-5 py-4">
+ <Skeleton className="h-3 w-16" />
+ <div className="flex items-baseline justify-between gap-3">
+ <Skeleton className="h-6 w-20" />
+ <Skeleton className="h-4 w-16" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <Skeleton className="h-36 w-full rounded-md" />
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-36" />
+ <Skeleton className="mt-2 h-6 w-52" />
+ </div>
+ <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-20 w-full rounded-md" />
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-40" />
+ <Skeleton className="mt-2 h-6 w-72" />
+ <Skeleton className="mt-1 h-4 w-56" />
+ </div>
+ <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-16 w-full rounded-md" />
+ ))}
+ </div>
+ </section>
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/profile/page.tsx b/apps/web/src/app/profile/page.tsx
index b1ee69d68..9b58ec00b 100644
--- a/apps/web/src/app/profile/page.tsx
+++ b/apps/web/src/app/profile/page.tsx
@@ -1,10 +1,22 @@
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export default async function BaseProfilePage() {
+export default function BaseProfilePage() {
+ return (
+ <Suspense fallback={<ProfileSkeleton />}>
+ <ProfileRedirect />
+ </Suspense>
+ );
+}
+
+// Explicit return type: the body always redirects/404s, so TS otherwise
+// infers Promise<never>, which is not a valid JSX component type.
+async function ProfileRedirect(): Promise<React.ReactNode> {
const session = await auth();
const user = await AppRuntime.runPromise(
UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user?.email)))
@@ -14,3 +26,160 @@ export default async function BaseProfilePage() {
if (!user.battletag) notFound();
redirect(`/profile/${user.battletag}`);
}
+
+// This page only redirects to /profile/[battletag], so the fallback mirrors
+// the destination profile page's frame — the redirect lands without a
+// design swap.
+function ProfileSkeleton() {
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-8">
+ <div className="flex items-end gap-5">
+ <Skeleton className="h-14 w-14 shrink-0 rounded-full" />
+ <div className="space-y-2 pb-1">
+ <Skeleton className="h-2.5 w-14" />
+ <Skeleton className="mt-2 h-9 w-44" />
+ </div>
+ </div>
+ <div className="flex flex-wrap items-end gap-x-8 gap-y-2 pb-1">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-14" />
+ <Skeleton className="h-5 w-10" />
+ <Skeleton className="h-2 w-16" />
+ </div>
+ ))}
+ </div>
+ </header>
+
+ <div className="border-border mt-6 flex gap-6 border-b pb-3">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-3 w-16" />
+ ))}
+ </div>
+
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-72" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-2">
+ {["a", "b"].map((k) => (
+ <Skeleton key={k} className="h-36 w-full" />
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-56" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div
+ key={k}
+ className="bg-card flex items-center gap-4 px-5 py-5"
+ >
+ <Skeleton className="h-14 w-14 shrink-0 rounded-md" />
+ <div className="flex flex-1 flex-col gap-2">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-52" />
+ </div>
+ <ul className="bg-border grid grid-cols-1 gap-px">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <li key={k} className="bg-card flex items-center gap-4 px-5 py-3">
+ <Skeleton className="h-8 w-8 shrink-0 rounded-md" />
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-1.5 flex-1 rounded-full" />
+ <Skeleton className="h-3 w-16 shrink-0" />
+ <Skeleton className="h-3 w-20 shrink-0" />
+ </li>
+ ))}
+ </ul>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-64" />
+ </div>
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="bg-card flex flex-col gap-2 px-5 py-4">
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-2 w-2 rounded-full" />
+ <Skeleton className="h-2.5 w-14" />
+ </div>
+ <div className="flex items-baseline justify-between gap-3">
+ <Skeleton className="h-6 w-16" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-44" />
+ </div>
+ <Skeleton className="h-32 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-8">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-3">
+ <Skeleton className="h-3 w-16" />
+ <div className="bg-border grid grid-cols-1 gap-px sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((j) => (
+ <Skeleton key={j} className="h-24 w-full" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-64" />
+ <Skeleton className="mt-1 h-4 w-48" />
+ </div>
+ <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-24 w-full rounded-md" />
+ ))}
+ </div>
+ </section>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/query/page.tsx b/apps/web/src/app/query/page.tsx
index 9cc1d6e0b..6b88cd134 100644
--- a/apps/web/src/app/query/page.tsx
+++ b/apps/web/src/app/query/page.tsx
@@ -1,19 +1,37 @@
import { DashboardLayout } from "@/components/dashboard-layout";
import { QueryBuilder } from "@/components/query-builder/query-builder";
+import { Skeleton } from "@/components/ui/skeleton";
import { auth } from "@/lib/auth";
import { queryBuilder } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { getViewableTeams, listSavedQueries } from "@/lib/query-builder/server";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("queryBuilderPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("queryBuilderPage.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function QueryPage() {
- const enabled = await queryBuilder();
+// Static shell: the dashboard chrome prerenders, and the flag/auth/DB work
+// streams into ONE boundary whose fallback mirrors QueryBuilder's own frame —
+// so navigation shows a single, stable skeleton that the builder replaces in
+// place.
+export default function QueryPage() {
+ return (
+ <DashboardLayout>
+ <Suspense fallback={<QueryBuilderSkeleton />}>
+ <QueryPageContent />
+ </Suspense>
+ </DashboardLayout>
+ );
+}
+
+async function QueryPageContent() {
+ const enabled = await getFlag(queryBuilder);
if (!enabled) notFound();
const session = await auth();
@@ -27,32 +45,92 @@ export default async function QueryPage() {
if (teams.length === 0) {
return (
- <DashboardLayout>
- <div className="px-6 pt-8 pb-16 sm:px-10">
- <header className="border-border border-b pb-6">
- <h1 className="text-4xl leading-none font-semibold tracking-tight">
- {t("title")}
- </h1>
- <p className="text-muted-foreground mt-3 max-w-2xl text-sm">
- {t("subtitle")}
- </p>
- </header>
- <div className="border-border mt-8 flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-20 text-center">
- <p className="text-foreground text-base font-medium">
- {t("noAccessTitle")}
- </p>
- <p className="text-muted-foreground mt-1 max-w-md text-sm">
- {t("noAccessBody")}
- </p>
- </div>
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border border-b pb-6">
+ <h1 className="text-4xl leading-none font-semibold tracking-tight">
+ {t("title")}
+ </h1>
+ <p className="text-muted-foreground mt-3 max-w-2xl text-sm">
+ {t("subtitle")}
+ </p>
+ </header>
+ <div className="border-border mt-8 flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-20 text-center">
+ <p className="text-foreground text-base font-medium">
+ {t("noAccessTitle")}
+ </p>
+ <p className="text-muted-foreground mt-1 max-w-md text-sm">
+ {t("noAccessBody")}
+ </p>
</div>
- </DashboardLayout>
+ </div>
);
}
+ return <QueryBuilder teams={teams} savedQueries={savedQueries} />;
+}
+
+// Mirrors QueryBuilder's frame (header with eyebrow/title/subtitle and action
+// row, the ask/build card, the output section) so the streamed builder
+// replaces this in place with no jump.
+function QueryBuilderSkeleton() {
return (
- <DashboardLayout>
- <QueryBuilder teams={teams} savedQueries={savedQueries} />
- </DashboardLayout>
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-6">
+ <div>
+ <Skeleton className="h-3 w-32" />
+ <Skeleton className="mt-3 h-9 w-52" />
+ <Skeleton className="mt-3 h-4 w-80" />
+ </div>
+ <div className="flex flex-wrap items-center gap-2">
+ <Skeleton className="h-8 w-28" />
+ <Skeleton className="h-8 w-16" />
+ <Skeleton className="h-8 w-20" />
+ <Skeleton className="h-8 w-14" />
+ </div>
+ </header>
+
+ <div className="mt-8 space-y-10">
+ <div className="border-border bg-card ring-foreground/5 overflow-hidden rounded-xl border shadow-xs ring-1">
+ <div className="space-y-2.5 p-4 sm:p-5">
+ <Skeleton className="h-3 w-8" />
+ <div className="flex flex-col gap-2 sm:flex-row sm:items-start">
+ <Skeleton className="h-16 flex-1" />
+ <Skeleton className="h-9 w-28" />
+ </div>
+ </div>
+
+ <div className="border-border bg-muted/20 space-y-3 border-t p-4 sm:p-5">
+ <Skeleton className="h-3 w-14" />
+ <div className="flex flex-wrap gap-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-8 w-24 rounded-md" />
+ ))}
+ </div>
+ <div className="flex flex-wrap gap-2">
+ {["f", "g", "h", "i"].map((k) => (
+ <Skeleton key={k} className="h-8 w-20 rounded-md" />
+ ))}
+ </div>
+ </div>
+ </div>
+
+ <section className="space-y-4">
+ <div className="mb-5 flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-14" />
+ </div>
+
+ <div className="border-border flex gap-6 border-b pb-2.5">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-3 w-12" />
+ ))}
+ </div>
+
+ <div className="border-border mt-2 flex flex-col items-center justify-center rounded-lg border border-dashed px-6 py-16 text-center">
+ <Skeleton className="h-4 w-40" />
+ <Skeleton className="mt-2 h-3 w-64" />
+ </div>
+ </section>
+ </div>
+ </div>
);
}
diff --git a/apps/web/src/app/ranked/loading.tsx b/apps/web/src/app/ranked/loading.tsx
deleted file mode 100644
index e21c61c25..000000000
--- a/apps/web/src/app/ranked/loading.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/* oxlint-disable react/no-array-index-key */
-import { Skeleton } from "@/components/ui/skeleton";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-
-const tabTriggerClass =
- "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground border-0 border-b-2 border-b-transparent data-[state=active]:border-b-primary rounded-none bg-transparent px-0 pb-3 pt-1 font-mono text-[11px] tracking-[0.16em] uppercase shadow-none data-[state=active]:shadow-none data-[state=active]:bg-transparent dark:bg-transparent dark:data-[state=active]:bg-transparent dark:data-[state=active]:border-b-primary transition-colors";
-
-const TAB_LABELS = [
- "Overview",
- "Heroes",
- "Maps",
- "Time",
- "Patches",
- "Groups",
- "Roles",
-];
-
-export default function RankedLoading() {
- return (
- <div className="px-6 pt-8 pb-16 sm:px-10">
- <header className="border-border border-b pb-6">
- <Skeleton className="h-3 w-36" />
- <Skeleton className="mt-3 h-9 w-56" />
- </header>
-
- <div className="mt-6 space-y-8">
- <div className="flex flex-wrap items-center justify-end gap-2">
- <Skeleton className="h-8 w-36" />
- <Skeleton className="h-8 w-28" />
- <Skeleton className="h-9 w-32" />
- </div>
-
- <div className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
- {Array.from({ length: 4 }).map((_, i) => (
- <div key={i} className="space-y-2 px-4 py-3">
- <Skeleton className="h-2.5 w-16" />
- <Skeleton className="h-7 w-20" />
- <Skeleton className="h-3 w-24" />
- </div>
- ))}
- </div>
-
- <Tabs defaultValue="overview" className="space-y-8">
- <TabsList className="border-border h-auto w-full justify-start gap-6 overflow-x-auto rounded-none border-b bg-transparent p-0">
- {TAB_LABELS.map((label) => (
- <TabsTrigger
- key={label}
- value={label.toLowerCase()}
- className={tabTriggerClass}
- >
- {label}
- </TabsTrigger>
- ))}
- </TabsList>
-
- <TabsContent value="overview" className="space-y-8">
- <SkeletonSection bodyHeight={350} />
- <div className="grid gap-4 md:grid-cols-2">
- <SkeletonSection bodyHeight={250} />
- <SkeletonSection bodyHeight={250} />
- </div>
- </TabsContent>
- </Tabs>
- </div>
- </div>
- );
-}
-
-function SkeletonSection({ bodyHeight }: { bodyHeight: number }) {
- return (
- <section className="space-y-4">
- <div className="space-y-2">
- <Skeleton className="h-2.5 w-32" />
- <Skeleton className="h-6 w-56" />
- <Skeleton className="h-3.5 w-72" />
- </div>
- <Skeleton className="w-full" style={{ height: bodyHeight }} />
- </section>
- );
-}
diff --git a/apps/web/src/app/ranked/page.tsx b/apps/web/src/app/ranked/page.tsx
index fd563169e..7d50581df 100644
--- a/apps/web/src/app/ranked/page.tsx
+++ b/apps/web/src/app/ranked/page.tsx
@@ -1,3 +1,4 @@
+/* oxlint-disable react/no-array-index-key */
import { DashboardContent } from "@/components/ranked/dashboard-content";
import { ImportCard } from "@/components/ranked/import-card";
import { MatchForm } from "@/components/ranked/match-form";
@@ -10,27 +11,53 @@ import {
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { getOverwatchPatches } from "@/data/overwatch/patches-service";
import { RankedService } from "@/data/ranked";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
-import type { PagePropsWithLocale } from "@/types/next";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import { Effect } from "effect";
import { Crosshair, Plus } from "lucide-react";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(
- props: PagePropsWithLocale<"/ranked">
-): Promise<Metadata> {
- const { locale } = await props.params;
- const t = await getTranslations({ locale, namespace: "ranked.metadata" });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("ranked.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function RankedPage() {
+// Static shell: the page frame and header prerender (default-locale title via
+// the cookie-free translator), and the auth-derived content streams into ONE
+// boundary whose fallback mirrors the dashboard's own pending layout.
+export default function RankedPage() {
+ const t = getStaticTranslations("ranked");
+
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border border-b pb-6">
+ <p className="text-muted-foreground font-mono text-xs tracking-[0.18em] uppercase">
+ Personal analytics
+ </p>
+ <h1 className="mt-3 text-4xl leading-none font-semibold tracking-tight">
+ {t("title")}
+ </h1>
+ </header>
+ <Suspense fallback={<RankedDashboardSkeleton />}>
+ <RankedContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function RankedContent() {
const [session, t] = await Promise.all([auth(), getTranslations("ranked")]);
const email = session?.user?.email;
if (!email) redirect("/sign-in");
@@ -49,46 +76,109 @@ export default async function RankedPage() {
getOverwatchPatches(),
]);
+ if (matches.length === 0) {
+ return (
+ <div className="mt-8 space-y-6">
+ <Empty>
+ <EmptyHeader>
+ <EmptyMedia variant="icon">
+ <Crosshair />
+ </EmptyMedia>
+ <EmptyTitle>{t("emptyTitle")}</EmptyTitle>
+ <EmptyDescription>{t("emptyDescription")}</EmptyDescription>
+ </EmptyHeader>
+ <EmptyContent>
+ <MatchForm
+ trigger={
+ <Button className="active:scale-[0.97]">
+ <Plus className="mr-1.5 size-4" />
+ {t("trackFirst")}
+ </Button>
+ }
+ />
+ </EmptyContent>
+ </Empty>
+ <div className="mx-auto w-full max-w-md">
+ <ImportCard />
+ </div>
+ </div>
+ );
+ }
+
return (
- <div className="px-6 pt-8 pb-16 sm:px-10">
- <header className="border-border border-b pb-6">
- <p className="text-muted-foreground font-mono text-xs tracking-[0.18em] uppercase">
- Personal analytics
- </p>
- <h1 className="mt-3 text-4xl leading-none font-semibold tracking-tight">
- {t("title")}
- </h1>
- </header>
- {matches.length === 0 ? (
- <div className="mt-8 space-y-6">
- <Empty>
- <EmptyHeader>
- <EmptyMedia variant="icon">
- <Crosshair />
- </EmptyMedia>
- <EmptyTitle>{t("emptyTitle")}</EmptyTitle>
- <EmptyDescription>{t("emptyDescription")}</EmptyDescription>
- </EmptyHeader>
- <EmptyContent>
- <MatchForm
- trigger={
- <Button className="active:scale-[0.97]">
- <Plus className="mr-1.5 size-4" />
- {t("trackFirst")}
- </Button>
- }
- />
- </EmptyContent>
- </Empty>
- <div className="mx-auto w-full max-w-md">
- <ImportCard />
+ <div className="mt-6">
+ <DashboardContent matches={matches} patches={patches} />
+ </div>
+ );
+}
+
+const tabTriggerClass =
+ "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground border-0 border-b-2 border-b-transparent data-[state=active]:border-b-primary rounded-none bg-transparent px-0 pb-3 pt-1 font-mono text-[11px] tracking-[0.16em] uppercase shadow-none data-[state=active]:shadow-none data-[state=active]:bg-transparent dark:bg-transparent dark:data-[state=active]:bg-transparent dark:data-[state=active]:border-b-primary transition-colors";
+
+const TAB_KEYS = [
+ "overview",
+ "heroes",
+ "maps",
+ "time",
+ "patches",
+ "groups",
+ "roles",
+];
+
+// Mirrors DashboardContent's pending layout (controls row, 4-cell stat
+// ribbon, tab bar, overview sections) so the streamed content replaces this
+// in place with no jump.
+function RankedDashboardSkeleton() {
+ const t = getStaticTranslations("ranked.tabs");
+
+ return (
+ <div className="mt-6 space-y-8">
+ <div className="flex flex-wrap items-center justify-end gap-2">
+ <Skeleton className="h-8 w-36" />
+ <Skeleton className="h-8 w-28" />
+ <Skeleton className="h-9 w-32" />
+ </div>
+
+ <div className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {Array.from({ length: 4 }).map((_, i) => (
+ <div key={i} className="space-y-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-24" />
</div>
- </div>
- ) : (
- <div className="mt-6">
- <DashboardContent matches={matches} patches={patches} />
- </div>
- )}
+ ))}
+ </div>
+
+ <Tabs defaultValue="overview" className="space-y-8">
+ <TabsList className="border-border h-auto w-full justify-start gap-6 overflow-x-auto rounded-none border-b bg-transparent p-0">
+ {TAB_KEYS.map((key) => (
+ <TabsTrigger key={key} value={key} className={tabTriggerClass}>
+ {t(key)}
+ </TabsTrigger>
+ ))}
+ </TabsList>
+
+ <TabsContent value="overview" className="space-y-8">
+ <SkeletonSection bodyHeight={350} />
+ <div className="grid gap-4 md:grid-cols-2">
+ <SkeletonSection bodyHeight={250} />
+ <SkeletonSection bodyHeight={250} />
+ </div>
+ </TabsContent>
+ </Tabs>
</div>
);
}
+
+function SkeletonSection({ bodyHeight }: { bodyHeight: number }) {
+ return (
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="h-6 w-56" />
+ <Skeleton className="h-3.5 w-72" />
+ </div>
+ <Skeleton className="w-full" style={{ height: bodyHeight }} />
+ </section>
+ );
+}
diff --git a/apps/web/src/app/reports/[id]/page.tsx b/apps/web/src/app/reports/[id]/page.tsx
index 2a0e5397e..a023c864f 100644
--- a/apps/web/src/app/reports/[id]/page.tsx
+++ b/apps/web/src/app/reports/[id]/page.tsx
@@ -1,4 +1,5 @@
import { MessageResponse } from "@/components/ai-elements/message";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
@@ -6,6 +7,7 @@ import { auth } from "@/lib/auth";
import prisma from "@/lib/prisma";
import type { Metadata } from "next";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata({
params,
@@ -38,11 +40,24 @@ export async function generateMetadata({
};
}
-export default async function ReportPage({
+// Static shell: the page frame prerenders and the report (title included —
+// it comes from the database) streams into ONE boundary whose fallback
+// mirrors the loaded header + prose layout.
+export default function ReportPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
+ return (
+ <div className="mx-auto max-w-3xl px-4 py-8">
+ <Suspense fallback={<ReportSkeleton />}>
+ <ReportContent params={params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function ReportContent({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
const session = await auth();
@@ -64,7 +79,7 @@ export default async function ReportPage({
if (report.userId !== userData.id) notFound();
return (
- <div className="mx-auto max-w-3xl px-4 py-8">
+ <>
<div className="mb-6">
<h1 className="text-2xl font-bold tracking-tight">{report.title}</h1>
<p className="text-muted-foreground mt-1 text-sm">
@@ -79,6 +94,35 @@ export default async function ReportPage({
<article className="prose prose-sm dark:prose-invert max-w-none">
<MessageResponse>{report.content}</MessageResponse>
</article>
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded state: title + byline header, then prose paragraphs.
+function ReportSkeleton() {
+ return (
+ <>
+ <div className="mb-6">
+ <Skeleton className="h-8 w-64" />
+ <Skeleton className="mt-2 h-4 w-48" />
+ </div>
+ <div className="space-y-6">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ ))}
+ <Skeleton className="h-5 w-36" />
+ {["d", "e"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-5/6" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+ ))}
+ </div>
+ </>
);
}
diff --git a/apps/web/src/app/reports/layout.tsx b/apps/web/src/app/reports/layout.tsx
index dd7b06b3a..767ab710e 100644
--- a/apps/web/src/app/reports/layout.tsx
+++ b/apps/web/src/app/reports/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("reportsPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("reportsPage.metadata");
return {
title: t("title"),
diff --git a/apps/web/src/app/reports/page.tsx b/apps/web/src/app/reports/page.tsx
index f86a6bd33..e3755f2b7 100644
--- a/apps/web/src/app/reports/page.tsx
+++ b/apps/web/src/app/reports/page.tsx
@@ -1,13 +1,29 @@
import { DirectionalTransition } from "@/components/directional-transition";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
import { ReportsList } from "./reports-list";
-export default async function ReportsPage() {
+// Static shell: the auth-derived report list streams into ONE boundary whose
+// fallback mirrors ReportsList's own layout, so navigation shows a single,
+// stable loading state that the content replaces in place.
+export default function ReportsPage() {
+ return (
+ <DirectionalTransition>
+ <Suspense fallback={<ReportsListSkeleton />}>
+ <ReportsContent />
+ </Suspense>
+ </DirectionalTransition>
+ );
+}
+
+async function ReportsContent() {
const session = await auth();
if (!session?.user?.email) redirect("/sign-in");
@@ -22,9 +38,39 @@ export default async function ReportsPage() {
include: { user: { select: { name: true } } },
});
+ return <ReportsList reports={reports} />;
+}
+
+// Mirrors ReportsList's frame (header, search row, report rows) so the
+// streamed content replaces this in place with no jump.
+function ReportsListSkeleton() {
+ const t = getStaticTranslations("reportsPage.list");
+
return (
- <DirectionalTransition>
- <ReportsList reports={reports} />
- </DirectionalTransition>
+ <div className="flex-1 space-y-6 px-6 pt-6 pb-12 md:px-8">
+ <div className="space-y-1">
+ <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
+ <p className="text-muted-foreground text-sm">{t("description")}</p>
+ </div>
+
+ <div className="flex items-center justify-between gap-4">
+ <Skeleton className="h-9 max-w-sm flex-1" />
+ <Skeleton className="h-3.5 w-20" />
+ </div>
+
+ <div className="overflow-hidden rounded-lg border">
+ <div className="divide-border divide-y">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="flex items-start gap-4 px-4 py-3.5">
+ <div className="min-w-0 flex-1 space-y-1">
+ <Skeleton className="my-0.5 h-4 w-48" />
+ <Skeleton className="my-0.5 h-3 w-full max-w-xs" />
+ </div>
+ <Skeleton className="mt-1 h-3 w-16 shrink-0" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
);
}
diff --git a/apps/web/src/app/scouting/layout.tsx b/apps/web/src/app/scouting/layout.tsx
index b4029c0df..bc5b09911 100644
--- a/apps/web/src/app/scouting/layout.tsx
+++ b/apps/web/src/app/scouting/layout.tsx
@@ -1,12 +1,10 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(
- props: LayoutProps<"/scouting">
-): Promise<Metadata> {
- const params = (await props.params) as { locale: string };
- const t = await getTranslations("scoutingPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("scoutingPage.metadata");
return {
title: t("title"),
@@ -24,7 +22,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/scouting/page.tsx b/apps/web/src/app/scouting/page.tsx
index 44ba637cb..9d4cc42a2 100644
--- a/apps/web/src/app/scouting/page.tsx
+++ b/apps/web/src/app/scouting/page.tsx
@@ -1,14 +1,18 @@
import { TeamSearch } from "@/components/scouting/team-search";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { ScoutingService } from "@/data/scouting";
import { Effect } from "effect";
import { scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("scoutingPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("scoutingPage.metadata");
return {
title: t("title"),
description: t("description"),
@@ -16,8 +20,25 @@ export async function generateMetadata(): Promise<Metadata> {
};
}
-export default async function ScoutingPage() {
- const scoutingEnabled = await scoutingTool();
+// Static shell: the page frame prerenders and the flag-gated content streams
+// into ONE boundary whose fallback mirrors the heading + search layout, so
+// navigation shows a single stable skeleton the real content replaces in
+// place. The heading stays in the content child because the whole page is
+// behind the scouting flag (notFound) and the title is locale-dependent.
+export default function ScoutingPage() {
+ return (
+ <div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
+ <div className="w-full max-w-2xl space-y-8">
+ <Suspense fallback={<ScoutingSkeleton />}>
+ <ScoutingContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function ScoutingContent() {
+ const scoutingEnabled = await getFlag(scoutingTool);
if (!scoutingEnabled) notFound();
const t = await getTranslations("scoutingPage");
@@ -26,19 +47,32 @@ export default async function ScoutingPage() {
);
return (
- <div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
- <div className="w-full max-w-2xl space-y-8">
- <div className="space-y-2 text-center">
- <p className="text-muted-foreground font-mono text-[11px] tracking-[0.18em] uppercase">
- {t("searchEyebrow")}
- </p>
- <h1 className="text-4xl font-bold tracking-tight">{t("title")}</h1>
- <p className="text-muted-foreground text-lg text-balance">
- {t("subtitle")}
- </p>
- </div>
- <TeamSearch teams={teams} />
+ <>
+ <div className="space-y-2 text-center">
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.18em] uppercase">
+ {t("searchEyebrow")}
+ </p>
+ <h1 className="text-4xl font-bold tracking-tight">{t("title")}</h1>
+ <p className="text-muted-foreground text-lg text-balance">
+ {t("subtitle")}
+ </p>
</div>
- </div>
+ <TeamSearch teams={teams} />
+ </>
+ );
+}
+
+// Mirrors the loaded layout: eyebrow/title/subtitle heading block (space-y-2,
+// centered) followed by the h-14 search input.
+function ScoutingSkeleton() {
+ return (
+ <>
+ <div className="flex flex-col items-center space-y-2">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-10 w-56" />
+ <Skeleton className="h-7 w-80 max-w-full" />
+ </div>
+ <Skeleton className="h-14 w-full rounded-xl" />
+ </>
);
}
diff --git a/apps/web/src/app/scouting/player/[slug]/layout.tsx b/apps/web/src/app/scouting/player/[slug]/layout.tsx
index 0eac47411..27d6b234c 100644
--- a/apps/web/src/app/scouting/player/[slug]/layout.tsx
+++ b/apps/web/src/app/scouting/player/[slug]/layout.tsx
@@ -1,12 +1,12 @@
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
export async function generateMetadata(
props: LayoutProps<"/scouting/player/[slug]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("scoutingPage.player.profile.metadata");
- const locale = await getLocale();
+ const t = getMetadataTranslations("scoutingPage.player.profile.metadata");
const player = decodeURIComponent(params.slug);
@@ -26,7 +26,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/scouting/player/[slug]/loading.tsx b/apps/web/src/app/scouting/player/[slug]/loading.tsx
deleted file mode 100644
index 0bc5d3a47..000000000
--- a/apps/web/src/app/scouting/player/[slug]/loading.tsx
+++ /dev/null
@@ -1,135 +0,0 @@
-/* oxlint-disable react/no-array-index-key */
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-
-export default function ScoutingPlayerLoading() {
- return (
- <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
- <div className="space-y-4">
- <Skeleton className="h-4 w-28" />
-
- <div className="space-y-2">
- <div className="flex items-baseline gap-3">
- <Skeleton className="h-9 w-40" />
- <Skeleton className="h-6 w-48" />
- </div>
- <div className="flex gap-2">
- <Skeleton className="h-5 w-16 rounded-full" />
- <Skeleton className="h-5 w-16 rounded-full" />
- <Skeleton className="h-5 w-12 rounded-full" />
- </div>
- </div>
-
- <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
- {Array.from({ length: 4 }).map((_, i) => (
- <Card size="sm" key={i}>
- <CardHeader>
- <Skeleton className="h-4 w-24" />
- </CardHeader>
- <CardContent>
- <Skeleton className="h-8 w-20" />
- <Skeleton className="mt-1 h-3 w-16" />
- </CardContent>
- </Card>
- ))}
- </div>
- </div>
-
- {/* Hero Pool skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-24" />
- </CardHeader>
- <CardContent className="space-y-4">
- <div className="flex gap-3">
- {Array.from({ length: 3 }).map((_, i) => (
- <Skeleton key={i} className="h-10 w-28 rounded-lg" />
- ))}
- </div>
- <div className="space-y-2">
- {Array.from({ length: 5 }).map((_, i) => (
- <div key={i} className="flex items-center gap-3">
- <Skeleton className="h-6 w-6 rounded" />
- <Skeleton className="h-4 w-16" />
- <Skeleton className="h-5 flex-1 rounded-sm" />
- <Skeleton className="h-3 w-12" />
- </div>
- ))}
- </div>
- </CardContent>
- </Card>
-
- {/* Scrim Overview skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-36" />
- <Skeleton className="h-4 w-64" />
- </CardHeader>
- <CardContent>
- <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
- {Array.from({ length: 8 }).map((_, i) => (
- <div key={i} className="rounded-lg border p-3">
- <Skeleton className="h-3 w-20" />
- <Skeleton className="mt-2 h-8 w-16" />
- </div>
- ))}
- </div>
- </CardContent>
- </Card>
-
- {/* Performance Radar skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-40" />
- <Skeleton className="h-4 w-72" />
- </CardHeader>
- <CardContent>
- <Skeleton className="mx-auto h-[300px] w-full max-w-md rounded-lg" />
- </CardContent>
- </Card>
-
- {/* Hero Z-Scores skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-36" />
- <Skeleton className="h-4 w-64" />
- </CardHeader>
- <CardContent className="space-y-3">
- {Array.from({ length: 3 }).map((_, i) => (
- <div
- key={i}
- className="flex items-center gap-3 rounded-lg border p-3"
- >
- <Skeleton className="h-8 w-8 rounded" />
- <Skeleton className="h-4 w-20" />
- <Skeleton className="h-4 flex-1 rounded-sm" />
- <Skeleton className="h-4 w-12" />
- </div>
- ))}
- </CardContent>
- </Card>
-
- {/* Map Winrates skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-28" />
- </CardHeader>
- <CardContent>
- <Skeleton className="h-[250px] w-full rounded-lg" />
- </CardContent>
- </Card>
-
- {/* Tournament History skeleton */}
- <Card>
- <CardHeader>
- <Skeleton className="h-5 w-36" />
- </CardHeader>
- <CardContent className="space-y-3">
- {Array.from({ length: 3 }).map((_, i) => (
- <Skeleton key={i} className="h-16 w-full rounded-lg" />
- ))}
- </CardContent>
- </Card>
- </div>
- );
-}
diff --git a/apps/web/src/app/scouting/player/[slug]/page.tsx b/apps/web/src/app/scouting/player/[slug]/page.tsx
index 6f5c1f6c4..0ece43d88 100644
--- a/apps/web/src/app/scouting/player/[slug]/page.tsx
+++ b/apps/web/src/app/scouting/player/[slug]/page.tsx
@@ -3,15 +3,19 @@ import { ScoutingPlayerMapWinrates } from "@/components/scouting/scouting-player
import { ScoutingPlayerRead } from "@/components/scouting/scouting-player-read";
import { ScoutingPlayerScrimProfile } from "@/components/scouting/scouting-player-scrim-profile";
import { ScoutingPlayerTournaments } from "@/components/scouting/scouting-player-tournaments";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { ScoutingService, ScoutingAnalyticsService } from "@/data/player";
import { scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import { ArrowLeft } from "lucide-react";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(props: {
params: Promise<{ slug: string }>;
@@ -34,14 +38,32 @@ export async function generateMetadata(props: {
};
}
-export default async function ScoutingPlayerPage(
+// Static shell: the page frame prerenders and the profile streams into ONE
+// boundary whose fallback mirrors the loaded sections' flat layout.
+export default function ScoutingPlayerPage(
props: PageProps<"/scouting/player/[slug]">
) {
- const scoutingEnabled = await scoutingTool();
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
+ <div className="mx-auto w-full max-w-5xl space-y-12">
+ <Suspense fallback={<ScoutingPlayerSkeleton />}>
+ <ScoutingPlayerContent params={props.params} />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function ScoutingPlayerContent({
+ params,
+}: {
+ params: Promise<{ slug: string }>;
+}) {
+ const scoutingEnabled = await getFlag(scoutingTool);
if (!scoutingEnabled) notFound();
- const params = await props.params;
- const slug = decodeURIComponent(params.slug);
+ const { slug: rawSlug } = await params;
+ const slug = decodeURIComponent(rawSlug);
const t = await getTranslations("scoutingPage.player.profile");
const profile = await AppRuntime.runPromise(
@@ -58,38 +80,152 @@ export default async function ScoutingPlayerPage(
);
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
- <div className="mx-auto w-full max-w-5xl space-y-12">
- <div>
- <Link
- href="/scouting/player"
- className="text-muted-foreground hover:text-foreground mb-6 inline-flex items-center gap-1.5 text-sm transition-colors"
- >
- <ArrowLeft className="h-4 w-4" aria-hidden="true" />
- {t("backToSearch")}
- </Link>
- <ScoutingPlayerHeader profile={profile} />
- </div>
+ <>
+ <div>
+ <Link
+ href="/scouting/player"
+ className="text-muted-foreground hover:text-foreground mb-6 inline-flex items-center gap-1.5 text-sm transition-colors"
+ >
+ <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+ {t("backToSearch")}
+ </Link>
+ <ScoutingPlayerHeader profile={profile} />
+ </div>
- <ScoutingPlayerRead
- strengths={analytics.strengths}
- weaknesses={analytics.weaknesses}
- signatureHeroes={profile.signatureHeroes}
- heroFrequencies={profile.heroFrequencies}
- />
+ <ScoutingPlayerRead
+ strengths={analytics.strengths}
+ weaknesses={analytics.weaknesses}
+ signatureHeroes={profile.signatureHeroes}
+ heroFrequencies={profile.heroFrequencies}
+ />
- {analytics.scrimData ? (
- <ScoutingPlayerScrimProfile scrimData={analytics.scrimData} />
- ) : null}
+ {analytics.scrimData ? (
+ <ScoutingPlayerScrimProfile scrimData={analytics.scrimData} />
+ ) : null}
- <ScoutingPlayerMapWinrates
- competitiveMapWinrates={analytics.competitiveMapWinrates}
- />
+ <ScoutingPlayerMapWinrates
+ competitiveMapWinrates={analytics.competitiveMapWinrates}
+ />
- <ScoutingPlayerTournaments
- tournamentRecords={profile.tournamentRecords}
- />
- </div>
+ <ScoutingPlayerTournaments
+ tournamentRecords={profile.tournamentRecords}
+ />
+ </>
+ );
+}
+
+function SectionHeaderSkeleton() {
+ return (
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-7 w-44" />
</div>
);
}
+
+// Mirrors the loaded sections' pending layout: back link + SectionHeader +
+// StatRibbon header, the scouting read (insight lists + hero pool), map
+// winrates, and tournament history — same paddings and flat design language.
+function ScoutingPlayerSkeleton() {
+ const t = getStaticTranslations("scoutingPage.player.profile");
+
+ return (
+ <>
+ <div>
+ <Link
+ href="/scouting/player"
+ className="text-muted-foreground hover:text-foreground mb-6 inline-flex items-center gap-1.5 text-sm transition-colors"
+ >
+ <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+ {t("backToSearch")}
+ </Link>
+ <header className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-7 w-48" />
+ </div>
+ <div className="flex flex-col items-end gap-2">
+ <Skeleton className="h-5 w-36 rounded-sm" />
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="h-3 w-32" />
+ </div>
+ </div>
+ <div className="border-border grid grid-cols-2 border-y sm:grid-cols-2 lg:grid-cols-4">
+ {Array.from({ length: 4 }, (_, i) => (
+ <div key={i} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-16" />
+ </div>
+ ))}
+ </div>
+ </header>
+ </div>
+
+ <section className="space-y-8">
+ <SectionHeaderSkeleton />
+ <div className="grid gap-x-10 gap-y-8 sm:grid-cols-2">
+ {Array.from({ length: 2 }, (_, col) => (
+ <div key={col} className="space-y-3">
+ <Skeleton className="h-3 w-20" />
+ <div className="border-border divide-border divide-y border-y">
+ {Array.from({ length: 3 }, (_, i) => (
+ <div key={i} className="flex gap-3 py-3">
+ <Skeleton className="mt-1.5 size-1.5 shrink-0 rounded-full" />
+ <div className="min-w-0 flex-1 space-y-2">
+ <Skeleton className="h-4 w-3/4" />
+ <Skeleton className="h-4 w-full" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ <div className="grid gap-x-10 gap-y-8 sm:grid-cols-2">
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-32" />
+ <div className="flex flex-wrap gap-1.5">
+ {Array.from({ length: 4 }, (_, i) => (
+ <Skeleton key={i} className="h-6 w-20 rounded-sm" />
+ ))}
+ </div>
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-40" />
+ <div className="space-y-2.5">
+ {Array.from({ length: 4 }, (_, i) => (
+ <div key={i} className="space-y-1">
+ <div className="flex items-baseline justify-between gap-3">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-3 w-14" />
+ </div>
+ <Skeleton className="h-1.5 w-full rounded-sm" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-6">
+ <SectionHeaderSkeleton />
+ {Array.from({ length: 2 }, (_, i) => (
+ <div key={i} className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-40 w-full rounded-md" />
+ </div>
+ ))}
+ </section>
+
+ <section className="space-y-5">
+ <SectionHeaderSkeleton />
+ <div className="space-y-3">
+ {Array.from({ length: 3 }, (_, i) => (
+ <Skeleton key={i} className="h-16 w-full rounded-md" />
+ ))}
+ </div>
+ </section>
+ </>
+ );
+}
diff --git a/apps/web/src/app/scouting/player/page.tsx b/apps/web/src/app/scouting/player/page.tsx
index 17e714790..df69e8bd4 100644
--- a/apps/web/src/app/scouting/player/page.tsx
+++ b/apps/web/src/app/scouting/player/page.tsx
@@ -1,14 +1,20 @@
import { PlayerSearch } from "@/components/scouting/player-search";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { ScoutingService } from "@/data/player";
import { scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("scoutingPage.player.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("scoutingPage.player.metadata");
return {
title: t("title"),
description: t("description"),
@@ -16,14 +22,8 @@ export async function generateMetadata(): Promise<Metadata> {
};
}
-export default async function ScoutPlayerPage() {
- const scoutingEnabled = await scoutingTool();
- if (!scoutingEnabled) notFound();
-
- const t = await getTranslations("scoutingPage.player");
- const players = await AppRuntime.runPromise(
- ScoutingService.pipe(Effect.flatMap((svc) => svc.getScoutingPlayers()))
- );
+export default function ScoutPlayerPage() {
+ const t = getStaticTranslations("scoutingPage.player");
return (
<div className="flex flex-1 flex-col items-center px-4 pt-16 pb-8 sm:px-8 md:pt-24">
@@ -37,7 +37,33 @@ export default async function ScoutPlayerPage() {
{t("subtitle")}
</p>
</div>
- <PlayerSearch players={players} />
+ <Suspense fallback={<PlayerSearchSkeleton />}>
+ <ScoutPlayerContent />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function ScoutPlayerContent() {
+ const scoutingEnabled = await getFlag(scoutingTool);
+ if (!scoutingEnabled) notFound();
+
+ const players = await AppRuntime.runPromise(
+ ScoutingService.pipe(Effect.flatMap((svc) => svc.getScoutingPlayers()))
+ );
+
+ return <PlayerSearch players={players} />;
+}
+
+// Mirrors PlayerSearch's resting layout (search input + centered helper line)
+// so the streamed content replaces this in place with no jump.
+function PlayerSearchSkeleton() {
+ return (
+ <div className="mx-auto w-full max-w-2xl">
+ <Skeleton className="h-14 w-full rounded-xl" />
+ <div className="mt-3 flex justify-center">
+ <Skeleton className="h-5 w-48" />
</div>
</div>
);
diff --git a/apps/web/src/app/scouting/team/[teamAbbr]/layout.tsx b/apps/web/src/app/scouting/team/[teamAbbr]/layout.tsx
index 647fc47dc..1095beafe 100644
--- a/apps/web/src/app/scouting/team/[teamAbbr]/layout.tsx
+++ b/apps/web/src/app/scouting/team/[teamAbbr]/layout.tsx
@@ -1,12 +1,12 @@
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
export async function generateMetadata(
props: LayoutProps<"/scouting/team/[teamAbbr]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("scoutingPage.team.metadata");
- const locale = await getLocale();
+ const t = getMetadataTranslations("scoutingPage.team.metadata");
const team = decodeURIComponent(params.teamAbbr);
@@ -26,7 +26,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/scouting/team/[teamAbbr]/page.tsx b/apps/web/src/app/scouting/team/[teamAbbr]/page.tsx
index a5e97843f..12ca6f309 100644
--- a/apps/web/src/app/scouting/team/[teamAbbr]/page.tsx
+++ b/apps/web/src/app/scouting/team/[teamAbbr]/page.tsx
@@ -6,6 +6,7 @@ import { ScoutingPlayerMatchups } from "@/components/scouting/scouting-player-ma
import { ScoutingReport } from "@/components/scouting/scouting-report";
import { ScoutingTeamHeader } from "@/components/scouting/scouting-team-header";
import { ScoutingTeamOverview } from "@/components/scouting/scouting-team-overview";
+import { Skeleton } from "@/components/ui/skeleton";
import {
HeroBanIntelligenceService,
MapIntelligenceService,
@@ -22,13 +23,16 @@ import { Effect } from "effect";
import { auth } from "@/lib/auth";
import { resolveDataAvailability } from "@/lib/data-availability";
import { faceitScouting, scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { generateInsights } from "@/lib/insights";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { ArrowLeft } from "lucide-react";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
type UserTeamOption = { id: number; name: string };
@@ -98,17 +102,41 @@ function resolveScoutForTeamId(
return parsed;
}
-export default async function ScoutingTeamPage(
+// Static shell: the page frame prerenders and the request-derived report
+// streams into ONE boundary whose fallback mirrors the loaded sections, so
+// navigation shows a single stable skeleton instead of a cascade.
+export default function ScoutingTeamPage(
props: PageProps<"/scouting/team/[teamAbbr]"> & {
searchParams: Promise<{ scoutFor?: string }>;
}
) {
- const scoutingEnabled = await scoutingTool();
+ return (
+ <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
+ <div className="mx-auto w-full max-w-5xl space-y-12">
+ <Suspense fallback={<ScoutingTeamSkeleton />}>
+ <ScoutingTeamContent
+ params={props.params}
+ searchParams={props.searchParams}
+ />
+ </Suspense>
+ </div>
+ </div>
+ );
+}
+
+async function ScoutingTeamContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: {
+ params: PageProps<"/scouting/team/[teamAbbr]">["params"];
+ searchParams: Promise<{ scoutFor?: string }>;
+}) {
+ const scoutingEnabled = await getFlag(scoutingTool);
if (!scoutingEnabled) notFound();
const [params, searchParams] = await Promise.all([
- props.params,
- props.searchParams,
+ paramsPromise,
+ searchParamsPromise,
]);
const teamAbbr = decodeURIComponent(params.teamAbbr);
const t = await getTranslations("scoutingPage.team");
@@ -145,7 +173,7 @@ export default async function ScoutingTeamPage(
)
),
resolveDataAvailability(teamAbbr, userTeamId),
- faceitScouting(),
+ getFlag(faceitScouting),
]);
const [mapIntelligence, banIntelligence, playerIntelligence, faceitLink] =
@@ -205,60 +233,317 @@ export default async function ScoutingTeamPage(
});
return (
- <div className="flex flex-1 flex-col px-4 pt-8 pb-16 sm:px-8">
- <div className="mx-auto w-full max-w-5xl space-y-12">
- <div className="flex flex-wrap items-center justify-between gap-4">
- <Link
- href="/scouting"
- className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm transition-colors"
- >
- <ArrowLeft className="h-4 w-4" aria-hidden="true" />
- {t("backToSearch")}
- </Link>
- <ScoutForTeamPicker
- userTeams={userTeams}
- currentTeamId={userTeamId}
- />
- </div>
+ <>
+ <div className="flex flex-wrap items-center justify-between gap-4">
+ <Link
+ href="/scouting"
+ className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm transition-colors"
+ >
+ <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+ {t("backToSearch")}
+ </Link>
+ <ScoutForTeamPicker userTeams={userTeams} currentTeamId={userTeamId} />
+ </div>
+
+ <ScoutingTeamHeader
+ name={profile.team.fullName || profile.team.abbreviation}
+ abbreviation={profile.team.abbreviation}
+ overview={overview}
+ strength={strengthRating}
+ strengthPercentile={strengthPercentile}
+ />
+
+ <ScoutingReport
+ report={insightReport}
+ hasUserTeamLink={hasUserTeamLink}
+ />
+
+ {faceitLink ? <ScoutingFaceitLink link={faceitLink} /> : null}
+
+ <ScoutingTeamOverview
+ overview={overview}
+ matchHistory={profile.matchHistory}
+ />
+
+ <ScoutingMapPerformance
+ mapAnalysis={profile.mapAnalysis}
+ mapIntelligence={mapIntelligence}
+ hasUserTeamLink={hasUserTeamLink}
+ />
+
+ <ScoutingHeroBans
+ heroBans={profile.heroBans}
+ banIntelligence={banIntelligence}
+ hasUserTeamLink={hasUserTeamLink}
+ />
+
+ <ScoutingPlayerMatchups
+ playerIntelligence={playerIntelligence}
+ hasUserTeamLink={hasUserTeamLink}
+ opponentName={profile.team.fullName || profile.team.abbreviation}
+ />
+ </>
+ );
+}
+
+// Mirrors the loaded sections (back-link row, header stat ribbon, report,
+// overview, map performance, hero bans, matchups) so the streamed content
+// replaces this in place. The back link is static, so it renders for real.
+function ScoutingTeamSkeleton() {
+ const t = getStaticTranslations("scoutingPage.team");
- <ScoutingTeamHeader
- name={profile.team.fullName || profile.team.abbreviation}
- abbreviation={profile.team.abbreviation}
- overview={overview}
- strength={strengthRating}
- strengthPercentile={strengthPercentile}
- />
-
- <ScoutingReport
- report={insightReport}
- hasUserTeamLink={hasUserTeamLink}
- />
-
- {faceitLink ? <ScoutingFaceitLink link={faceitLink} /> : null}
-
- <ScoutingTeamOverview
- overview={overview}
- matchHistory={profile.matchHistory}
- />
-
- <ScoutingMapPerformance
- mapAnalysis={profile.mapAnalysis}
- mapIntelligence={mapIntelligence}
- hasUserTeamLink={hasUserTeamLink}
- />
-
- <ScoutingHeroBans
- heroBans={profile.heroBans}
- banIntelligence={banIntelligence}
- hasUserTeamLink={hasUserTeamLink}
- />
-
- <ScoutingPlayerMatchups
- playerIntelligence={playerIntelligence}
- hasUserTeamLink={hasUserTeamLink}
- opponentName={profile.team.fullName || profile.team.abbreviation}
- />
+ return (
+ <>
+ <div className="flex flex-wrap items-center justify-between gap-4">
+ <Link
+ href="/scouting"
+ className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1.5 text-sm transition-colors"
+ >
+ <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+ {t("backToSearch")}
+ </Link>
+ <Skeleton className="h-8 w-40 rounded-md" />
</div>
- </div>
+
+ <header className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <div className="flex items-center justify-between gap-4">
+ <Skeleton className="h-7 w-56" />
+ <Skeleton className="h-5 w-14" />
+ </div>
+ </div>
+ <dl className="border-border grid grid-cols-2 divide-x divide-y border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+ </header>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-44" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="border-border divide-border divide-y border-y">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex gap-3 py-4">
+ <Skeleton className="mt-1.5 size-1.5 shrink-0 rounded-full" />
+ <div className="flex-1 space-y-1.5">
+ <Skeleton className="h-4 w-3/4" />
+ <Skeleton className="h-3 w-full" />
+ <Skeleton className="h-3 w-2/3" />
+ <Skeleton className="h-2.5 w-28" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-5">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-40" />
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-24" />
+ <div className="flex flex-wrap gap-1.5">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="size-7 rounded-sm" />
+ ))}
+ </div>
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-28" />
+ <div className="border-border overflow-x-auto rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-4 w-10" />
+ <Skeleton className="ml-auto h-4 w-12" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-8">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-44" />
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-32" />
+ <div className="border-border overflow-x-auto rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-4 flex-1" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="h-4 w-16" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-20" />
+ <div className="border-border overflow-x-auto rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="ml-auto h-4 w-14" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-24" />
+ <div className="border-border overflow-x-auto rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ {["a", "b", "c", "d"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="ml-auto h-4 w-14" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-8">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-36" />
+ </div>
+ <div className="space-y-3">
+ <div className="flex flex-wrap items-baseline justify-between gap-2">
+ <Skeleton className="h-2.5 w-36" />
+ <Skeleton className="h-3 w-48" />
+ </div>
+ <div className="border-border overflow-x-auto rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-4 flex-1" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-4 w-10" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="grid gap-6 sm:grid-cols-2">
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-3">
+ <div className="space-y-1">
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="h-3 w-44" />
+ </div>
+ <div className="border-border divide-border divide-y overflow-hidden rounded-md border">
+ {["a", "b", "c", "d", "e", "f"].map((j) => (
+ <div key={j} className="flex items-center gap-3 px-4 py-2.5">
+ <Skeleton className="h-4 w-28 shrink-0" />
+ <Skeleton className="h-2.5 flex-1" />
+ <Skeleton className="h-4 w-8 shrink-0" />
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-6">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="border-border space-y-3 rounded-md border px-4 py-3">
+ <Skeleton className="h-2.5 w-24" />
+ <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-2.5 w-20" />
+ </div>
+ <div className="space-y-3">
+ <div className="flex flex-wrap items-baseline justify-between gap-2">
+ <Skeleton className="h-2.5 w-28" />
+ <Skeleton className="h-3 w-48" />
+ </div>
+ <div className="border-border divide-border divide-y overflow-hidden rounded-md border">
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-2 px-4 py-3">
+ <div className="flex flex-wrap items-baseline justify-between gap-2">
+ <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-3 w-14" />
+ <Skeleton className="h-3 w-16" />
+ </div>
+ <Skeleton className="h-3 w-16" />
+ </div>
+ <Skeleton className="h-3 w-full" />
+ <Skeleton className="h-2.5 w-full" />
+ </div>
+ ))}
+ </div>
+ </div>
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-3">
+ <div className="flex flex-wrap items-baseline justify-between gap-2">
+ <Skeleton className="h-2.5 w-28" />
+ <Skeleton className="h-3 w-44" />
+ </div>
+ <div className="border-border divide-border divide-y overflow-hidden rounded-md border">
+ {["a", "b"].map((j) => (
+ <div key={j} className="space-y-2.5 px-4 py-3">
+ <Skeleton className="h-4 w-24" />
+ <div className="space-y-2">
+ {["a", "b", "c"].map((m) => (
+ <div key={m} className="flex items-center gap-3">
+ <Skeleton className="h-4 w-28 shrink-0" />
+ <Skeleton className="h-3 flex-1" />
+ <Skeleton className="h-4 w-10 shrink-0" />
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </section>
+ </>
);
}
diff --git a/apps/web/src/app/settings/accounts/loading-skeleton.tsx b/apps/web/src/app/settings/accounts/loading-skeleton.tsx
new file mode 100644
index 000000000..4e195e924
--- /dev/null
+++ b/apps/web/src/app/settings/accounts/loading-skeleton.tsx
@@ -0,0 +1,62 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsAccountsSkeleton() {
+ return (
+ <div className="space-y-6 lg:max-w-2xl">
+ <div className="space-y-1">
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ <div className="border-t" />
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex flex-col space-y-1.5 p-6">
+ <Skeleton className="h-5 w-32" />
+ </div>
+ <div className="p-6 pt-0">
+ <Skeleton className="h-9 w-36" />
+ </div>
+ </div>
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex flex-col space-y-1.5 p-6">
+ <Skeleton className="h-5 w-28" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ <div className="p-6 pt-0">
+ <Skeleton className="h-9 w-36" />
+ </div>
+ </div>
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex flex-col space-y-1.5 p-6">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="p-6 pt-0">
+ <Skeleton className="h-6 w-11 rounded-full" />
+ </div>
+ </div>
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex items-start justify-between p-6">
+ <div className="flex flex-col space-y-1.5">
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="h-4 w-56" />
+ </div>
+ <Skeleton className="h-8 w-24" />
+ </div>
+ <div className="space-y-2 p-6 pt-0">
+ <div className="grid grid-cols-4 gap-4 border-b pb-3">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-4 w-full" />
+ ))}
+ </div>
+ {["e", "f", "g"].map((k) => (
+ <div key={k} className="grid grid-cols-4 gap-4 py-1">
+ {["a", "b", "c", "d"].map((j) => (
+ <Skeleton key={j} className="h-8 w-full" />
+ ))}
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/settings/accounts/page.tsx b/apps/web/src/app/settings/accounts/page.tsx
index acc9ab701..c18ad616a 100644
--- a/apps/web/src/app/settings/accounts/page.tsx
+++ b/apps/web/src/app/settings/accounts/page.tsx
@@ -17,8 +17,18 @@ import { auth } from "@/lib/auth";
import prisma from "@/lib/prisma";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsAccountsSkeleton } from "./loading-skeleton";
-export default async function LinkedAccountSettingsPage() {
+export default function LinkedAccountSettingsPage() {
+ return (
+ <Suspense fallback={<SettingsAccountsSkeleton />}>
+ <LinkedAccountSettingsPageContent />
+ </Suspense>
+ );
+}
+
+async function LinkedAccountSettingsPageContent() {
const t = await getTranslations("settingsPage.linkedAccounts");
const session = await auth();
diff --git a/apps/web/src/app/settings/admin/analytics/layout.tsx b/apps/web/src/app/settings/admin/analytics/layout.tsx
index 15c73549b..3a050b2e8 100644
--- a/apps/web/src/app/settings/admin/analytics/layout.tsx
+++ b/apps/web/src/app/settings/admin/analytics/layout.tsx
@@ -4,10 +4,21 @@ import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
+import { Suspense } from "react";
+import type { ReactNode } from "react";
+import { SettingsAdminAnalyticsSkeleton } from "./loading-skeleton";
-export default async function AdminAnalyticsLayout({
+export default function AdminAnalyticsLayout({
children,
}: LayoutProps<"/settings/admin/analytics">) {
+ return (
+ <Suspense fallback={<SettingsAdminAnalyticsSkeleton />}>
+ <AdminAnalyticsGate>{children}</AdminAnalyticsGate>
+ </Suspense>
+ );
+}
+
+async function AdminAnalyticsGate({ children }: { children: ReactNode }) {
const session = await auth();
const user = await AppRuntime.runPromise(
diff --git a/apps/web/src/app/settings/admin/analytics/loading-skeleton.tsx b/apps/web/src/app/settings/admin/analytics/loading-skeleton.tsx
new file mode 100644
index 000000000..58a792dd6
--- /dev/null
+++ b/apps/web/src/app/settings/admin/analytics/loading-skeleton.tsx
@@ -0,0 +1,45 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsAdminAnalyticsSkeleton() {
+ return (
+ <div className="space-y-6">
+ <div>
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <Skeleton className="h-px w-full" />
+ <Skeleton className="h-9 w-40" />
+ <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="rounded-lg border p-4">
+ <Skeleton className="h-3.5 w-16" />
+ <Skeleton className="mt-3 h-7 w-20" />
+ </div>
+ ))}
+ </div>
+ <div className="space-y-6">
+ <div className="bg-muted flex gap-1 rounded-lg p-1">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-7 w-20 rounded-md" />
+ ))}
+ </div>
+ <div className="space-y-6">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="grid gap-6 md:grid-cols-2">
+ <div className="rounded-lg border p-6">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="mt-1.5 h-4 w-56" />
+ <Skeleton className="mt-4 h-64 w-full rounded-md" />
+ </div>
+ <div className="rounded-lg border p-6">
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="mt-1.5 h-4 w-52" />
+ <Skeleton className="mt-4 h-64 w-full rounded-md" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/settings/admin/analytics/page.tsx b/apps/web/src/app/settings/admin/analytics/page.tsx
index 6068313ec..f652d546d 100644
--- a/apps/web/src/app/settings/admin/analytics/page.tsx
+++ b/apps/web/src/app/settings/admin/analytics/page.tsx
@@ -41,6 +41,8 @@ import type { UsageEnv } from "@/generated/prisma/client";
import { Effect } from "effect";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsAdminAnalyticsSkeleton } from "./loading-skeleton";
type MonthWindow = {
monthStart: Date;
@@ -416,7 +418,19 @@ async function getTeamActivityData(firstUserDate: Date) {
return { monthlyActivity: { twelveMonth, historical }, pieData };
}
-export default async function AdminAnalyticsPage(props: {
+export default function AdminAnalyticsPage(props: {
+ searchParams: Promise<{ env?: string }>;
+}) {
+ return (
+ <Suspense fallback={<SettingsAdminAnalyticsSkeleton />}>
+ <AdminAnalyticsPageContent searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function AdminAnalyticsPageContent({
+ searchParams,
+}: {
searchParams: Promise<{ env?: string }>;
}) {
const session = await auth();
@@ -436,7 +450,7 @@ export default async function AdminAnalyticsPage(props: {
const t = await getTranslations("settingsPage.admin.analytics");
- const sp = await props.searchParams;
+ const sp = await searchParams;
const envParam = (Array.isArray(sp.env) ? sp.env[0] : sp.env) ?? "PRODUCTION";
const env: UsageEnv = ["PRODUCTION", "PREVIEW", "DEVELOPMENT"].includes(
envParam
diff --git a/apps/web/src/app/settings/admin/audit-logs/layout.tsx b/apps/web/src/app/settings/admin/audit-logs/layout.tsx
index 08a291523..82c1c27a8 100644
--- a/apps/web/src/app/settings/admin/audit-logs/layout.tsx
+++ b/apps/web/src/app/settings/admin/audit-logs/layout.tsx
@@ -4,10 +4,21 @@ import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
+import { Suspense } from "react";
+import type { ReactNode } from "react";
+import { SettingsAdminAuditLogsSkeleton } from "./loading-skeleton";
-export default async function AdminLayout({
+export default function AdminLayout({
children,
}: LayoutProps<"/settings/admin/audit-logs">) {
+ return (
+ <Suspense fallback={<SettingsAdminAuditLogsSkeleton />}>
+ <AdminAuditLogsGate>{children}</AdminAuditLogsGate>
+ </Suspense>
+ );
+}
+
+async function AdminAuditLogsGate({ children }: { children: ReactNode }) {
const session = await auth();
const user = await AppRuntime.runPromise(
diff --git a/apps/web/src/app/settings/admin/audit-logs/loading-skeleton.tsx b/apps/web/src/app/settings/admin/audit-logs/loading-skeleton.tsx
new file mode 100644
index 000000000..eecebb4e8
--- /dev/null
+++ b/apps/web/src/app/settings/admin/audit-logs/loading-skeleton.tsx
@@ -0,0 +1,49 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsAdminAuditLogsSkeleton() {
+ return (
+ <main className="py-6">
+ <div className="space-y-4">
+ <Skeleton className="h-6 w-40" />
+ <div className="flex flex-col justify-between gap-2 sm:flex-row">
+ <div className="flex flex-wrap gap-2">
+ <Skeleton className="h-9 w-[200px]" />
+ <Skeleton className="h-9 w-[200px]" />
+ <Skeleton className="h-9 w-44" />
+ <Skeleton className="h-9 w-36" />
+ </div>
+ </div>
+ <div className="rounded-md border">
+ <div className="max-h-[75vh] overflow-auto">
+ <div className="w-full">
+ <div className="border-b px-4 py-3">
+ <div className="grid grid-cols-5 gap-4">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-4 w-20" />
+ ))}
+ </div>
+ </div>
+ <div>
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="border-b px-4 py-3 last:border-0">
+ <div className="grid grid-cols-5 gap-4">
+ <Skeleton className="h-5 w-32" />
+ <Skeleton className="h-5 w-24" />
+ <Skeleton className="h-5 w-28" />
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="h-5 w-20" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-9 w-32" />
+ </div>
+ </div>
+ </main>
+ );
+}
diff --git a/apps/web/src/app/settings/admin/audit-logs/page.tsx b/apps/web/src/app/settings/admin/audit-logs/page.tsx
index e6a9e3841..ee7c6dc45 100644
--- a/apps/web/src/app/settings/admin/audit-logs/page.tsx
+++ b/apps/web/src/app/settings/admin/audit-logs/page.tsx
@@ -6,8 +6,18 @@ import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsAdminAuditLogsSkeleton } from "./loading-skeleton";
-export default async function AuditLogsPage() {
+export default function AuditLogsPage() {
+ return (
+ <Suspense fallback={<SettingsAdminAuditLogsSkeleton />}>
+ <AuditLogsPageContent />
+ </Suspense>
+ );
+}
+
+async function AuditLogsPageContent() {
const session = await auth();
if (!session?.user) {
redirect("/sign-in");
diff --git a/apps/web/src/app/settings/admin/impersonate-user/layout.tsx b/apps/web/src/app/settings/admin/impersonate-user/layout.tsx
index 915731486..6ab867b9c 100644
--- a/apps/web/src/app/settings/admin/impersonate-user/layout.tsx
+++ b/apps/web/src/app/settings/admin/impersonate-user/layout.tsx
@@ -4,10 +4,21 @@ import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
+import { Suspense } from "react";
+import type { ReactNode } from "react";
+import { SettingsAdminImpersonateUserSkeleton } from "./loading-skeleton";
-export default async function AdminLayout({
+export default function AdminLayout({
children,
}: LayoutProps<"/settings/admin/impersonate-user">) {
+ return (
+ <Suspense fallback={<SettingsAdminImpersonateUserSkeleton />}>
+ <AdminImpersonateUserGate>{children}</AdminImpersonateUserGate>
+ </Suspense>
+ );
+}
+
+async function AdminImpersonateUserGate({ children }: { children: ReactNode }) {
const session = await auth();
const user = await AppRuntime.runPromise(
diff --git a/apps/web/src/app/settings/admin/impersonate-user/loading-skeleton.tsx b/apps/web/src/app/settings/admin/impersonate-user/loading-skeleton.tsx
new file mode 100644
index 000000000..0417da76c
--- /dev/null
+++ b/apps/web/src/app/settings/admin/impersonate-user/loading-skeleton.tsx
@@ -0,0 +1,21 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsAdminImpersonateUserSkeleton() {
+ return (
+ <div className="space-y-6">
+ <div className="space-y-1">
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <Skeleton className="h-px w-full" />
+ <div className="space-y-8">
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-10 w-full" />
+ <Skeleton className="h-3.5 w-64" />
+ </div>
+ <Skeleton className="h-9 w-24" />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/settings/admin/impersonate-user/page.tsx b/apps/web/src/app/settings/admin/impersonate-user/page.tsx
index 1ec1de588..dcdc6f56b 100644
--- a/apps/web/src/app/settings/admin/impersonate-user/page.tsx
+++ b/apps/web/src/app/settings/admin/impersonate-user/page.tsx
@@ -8,8 +8,18 @@ import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsAdminImpersonateUserSkeleton } from "./loading-skeleton";
-export default async function AdminSettingsPage() {
+export default function AdminSettingsPage() {
+ return (
+ <Suspense fallback={<SettingsAdminImpersonateUserSkeleton />}>
+ <AdminSettingsPageContent />
+ </Suspense>
+ );
+}
+
+async function AdminSettingsPageContent() {
const t = await getTranslations("settingsPage.admin.impersonateUser");
const session = await auth();
diff --git a/apps/web/src/app/settings/admin/loading-skeleton.tsx b/apps/web/src/app/settings/admin/loading-skeleton.tsx
new file mode 100644
index 000000000..93851a40b
--- /dev/null
+++ b/apps/web/src/app/settings/admin/loading-skeleton.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsAdminSkeleton() {
+ return (
+ <div className="max-w-full space-y-4">
+ <div>
+ <Skeleton className="h-7 w-40" />
+ <Skeleton className="mt-1.5 h-4 w-64" />
+ </div>
+
+ <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-3 rounded-lg border p-4">
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-3.5 w-24" />
+ <Skeleton className="h-4 w-4 rounded" />
+ </div>
+ <Skeleton className="h-7 w-16" />
+ <Skeleton className="h-3 w-32" />
+ </div>
+ ))}
+ </div>
+
+ <div className="space-y-4">
+ <div className="flex gap-1">
+ {["a", "b"].map((k) => (
+ <Skeleton key={k} className="h-9 w-28 rounded-md" />
+ ))}
+ </div>
+
+ <div className="rounded-lg border">
+ <div className="space-y-1.5 p-6 pb-3">
+ <Skeleton className="h-5 w-32" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ <div className="space-y-4 p-6 pt-0">
+ <div className="flex gap-2">
+ <Skeleton className="h-9 flex-1" />
+ <Skeleton className="h-9 w-24 rounded-md" />
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-8 w-full" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/settings/admin/page.tsx b/apps/web/src/app/settings/admin/page.tsx
index 419446450..7684c2dc4 100644
--- a/apps/web/src/app/settings/admin/page.tsx
+++ b/apps/web/src/app/settings/admin/page.tsx
@@ -17,8 +17,18 @@ import { auth } from "@/lib/auth";
import { $Enums } from "@/generated/prisma/browser";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsAdminSkeleton } from "./loading-skeleton";
-export default async function AdminDashboard() {
+export default function AdminDashboard() {
+ return (
+ <Suspense fallback={<SettingsAdminSkeleton />}>
+ <AdminDashboardContent />
+ </Suspense>
+ );
+}
+
+async function AdminDashboardContent() {
const session = await auth();
if (!session?.user) {
redirect("/sign-in");
diff --git a/apps/web/src/app/settings/billing/loading-skeleton.tsx b/apps/web/src/app/settings/billing/loading-skeleton.tsx
new file mode 100644
index 000000000..64c6d2e32
--- /dev/null
+++ b/apps/web/src/app/settings/billing/loading-skeleton.tsx
@@ -0,0 +1,61 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsBillingSkeleton() {
+ return (
+ <section>
+ <div>
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="mt-2 h-4 w-80" />
+ </div>
+ <div className="my-6 border-t" />
+ <div className="space-y-6">
+ <div className="flex w-full items-center justify-center p-10">
+ <div className="w-full">
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="mt-2 h-4 w-64" />
+ <dl className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="rounded-lg border p-4">
+ <div className="flex items-center space-x-4">
+ <Skeleton className="h-20 w-20 shrink-0 rounded-full" />
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ </div>
+ </div>
+ ))}
+ </dl>
+ </div>
+ </div>
+ <div className="rounded-lg border">
+ <div className="flex flex-row items-start justify-between gap-4 p-6">
+ <div className="space-y-2">
+ <Skeleton className="h-5 w-32" />
+ <Skeleton className="h-4 w-64" />
+ </div>
+ <Skeleton className="h-8 w-20 rounded-md" />
+ </div>
+ <div className="space-y-4 p-6 pt-0">
+ <div className="flex items-baseline gap-2">
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-7 w-24" />
+ </div>
+ <div className="space-y-1">
+ <Skeleton className="h-4 w-28" />
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <div
+ key={k}
+ className="flex items-center justify-between border-b py-1.5 last:border-b-0"
+ >
+ <Skeleton className="h-4 w-48" />
+ <Skeleton className="h-4 w-16" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+}
diff --git a/apps/web/src/app/settings/billing/page.tsx b/apps/web/src/app/settings/billing/page.tsx
index d214a380a..0f1498542 100644
--- a/apps/web/src/app/settings/billing/page.tsx
+++ b/apps/web/src/app/settings/billing/page.tsx
@@ -10,8 +10,18 @@ import { getCustomerPortalUrl } from "@/lib/stripe";
import type { Route } from "next";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsBillingSkeleton } from "./loading-skeleton";
-export default async function SettingsBillingPage() {
+export default function SettingsBillingPage() {
+ return (
+ <Suspense fallback={<SettingsBillingSkeleton />}>
+ <SettingsBillingPageContent />
+ </Suspense>
+ );
+}
+
+async function SettingsBillingPageContent() {
const t = await getTranslations("settingsPage.billing");
const session = await auth();
diff --git a/apps/web/src/app/settings/layout.tsx b/apps/web/src/app/settings/layout.tsx
index 6f30bbd27..71354e8a1 100644
--- a/apps/web/src/app/settings/layout.tsx
+++ b/apps/web/src/app/settings/layout.tsx
@@ -4,16 +4,16 @@ import { Separator } from "@/components/ui/separator";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
+import { defaultLocale } from "@/i18n/config";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import { $Enums } from "@/generated/prisma/browser";
import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
+import type { ReactNode } from "react";
-export async function generateMetadata(
- props: LayoutProps<"/settings">
-): Promise<Metadata> {
- const params = (await props.params) as { locale: string };
- const t = await getTranslations("settingsPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("settingsPage.metadata");
return {
title: t("title"),
@@ -31,14 +31,20 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function SettingsLayout({
- children,
-}: LayoutProps<"/settings">) {
+export default function SettingsLayout({ children }: LayoutProps<"/settings">) {
+ return (
+ <DashboardLayout>
+ <SettingsChrome>{children}</SettingsChrome>
+ </DashboardLayout>
+ );
+}
+
+async function SettingsChrome({ children }: { children: ReactNode }) {
const t = await getTranslations("settingsPage");
const sidebarNavItems: { title: string; href: Route }[] = [
@@ -84,29 +90,27 @@ export default async function SettingsLayout({
const isAdmin = user?.role === $Enums.UserRole.ADMIN;
return (
- <DashboardLayout>
- <div className="min-h-[90vh] space-y-6 p-10 pb-16 md:block">
- <div className="space-y-0.5">
- <h2 className="text-2xl font-bold tracking-tight">{t("title")}</h2>
- <p className="text-muted-foreground">{t("description")}</p>
- </div>
- <Separator className="my-6" />
- <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
- <aside className="lg:w-1/6">
- <SidebarNav items={sidebarNavItems} />
- {isAdmin && (
- <>
- <h3 className="text-muted-foreground mt-6 pl-2 text-sm tracking-tight">
- {t("sideNav.admin")}
- </h3>
- <Separator className="mb-4" />
- <SidebarNav items={adminNavItems} />
- </>
- )}
- </aside>
- <div className="flex-1">{children}</div>
- </div>
+ <div className="min-h-[90vh] space-y-6 p-10 pb-16 md:block">
+ <div className="space-y-0.5">
+ <h2 className="text-2xl font-bold tracking-tight">{t("title")}</h2>
+ <p className="text-muted-foreground">{t("description")}</p>
</div>
- </DashboardLayout>
+ <Separator className="my-6" />
+ <div className="flex flex-col space-y-8 lg:flex-row lg:space-y-0 lg:space-x-12">
+ <aside className="lg:w-1/6">
+ <SidebarNav items={sidebarNavItems} />
+ {isAdmin && (
+ <>
+ <h3 className="text-muted-foreground mt-6 pl-2 text-sm tracking-tight">
+ {t("sideNav.admin")}
+ </h3>
+ <Separator className="mb-4" />
+ <SidebarNav items={adminNavItems} />
+ </>
+ )}
+ </aside>
+ <div className="flex-1">{children}</div>
+ </div>
+ </div>
);
}
diff --git a/apps/web/src/app/settings/loading-skeleton.tsx b/apps/web/src/app/settings/loading-skeleton.tsx
new file mode 100644
index 000000000..65f32ae46
--- /dev/null
+++ b/apps/web/src/app/settings/loading-skeleton.tsx
@@ -0,0 +1,67 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SettingsProfileSkeleton() {
+ return (
+ <div className="space-y-6 lg:max-w-2xl">
+ <div className="space-y-1">
+ <Skeleton className="h-6 w-32" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="bg-border h-px w-full" />
+ <div className="space-y-8">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-9 w-full" />
+ <Skeleton className="h-3 w-60" />
+ </div>
+ ))}
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-16 w-16 rounded-full" />
+ <Skeleton className="h-3 w-56" />
+ </div>
+ <div className="space-y-2">
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-5 w-9 rounded-full" />
+ <Skeleton className="h-4 w-44" />
+ </div>
+ <Skeleton className="h-3 w-64" />
+ </div>
+ <div className="bg-border h-px w-full" />
+ <div className="space-y-6">
+ <div className="space-y-1">
+ <Skeleton className="h-6 w-40" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-28" />
+ <div className="mt-2 space-y-4">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="flex items-start gap-2">
+ <Skeleton className="mt-1 h-4 w-4 rounded-full" />
+ <div className="flex-1 space-y-1.5">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-3 w-52" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ <Skeleton className="h-9 w-24" />
+ </div>
+ <div className="max-w-lg rounded-lg border border-red-500 dark:border-red-700">
+ <div className="p-6 pb-2">
+ <Skeleton className="h-5 w-28" />
+ </div>
+ <div className="space-y-3 p-6 pt-2">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ <Skeleton className="h-9 w-32" />
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/settings/page.tsx b/apps/web/src/app/settings/page.tsx
index 7be9f9c34..a5966840b 100644
--- a/apps/web/src/app/settings/page.tsx
+++ b/apps/web/src/app/settings/page.tsx
@@ -10,8 +10,18 @@ import { getCustomerPortalUrl } from "@/lib/stripe";
import type { Route } from "next";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { SettingsProfileSkeleton } from "./loading-skeleton";
-export default async function SettingsProfilePage() {
+export default function SettingsProfilePage() {
+ return (
+ <Suspense fallback={<SettingsProfileSkeleton />}>
+ <SettingsProfilePageContent />
+ </Suspense>
+ );
+}
+
+async function SettingsProfilePageContent() {
const t = await getTranslations("settingsPage.profile");
const session = await auth();
diff --git a/apps/web/src/app/stats/[playerName]/loading.tsx b/apps/web/src/app/stats/[playerName]/loading.tsx
deleted file mode 100644
index 97f3a4734..000000000
--- a/apps/web/src/app/stats/[playerName]/loading.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function StatsLoading() {
- const t = await getTranslations("statsPage.playerStats");
-
- return (
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div className="flex items-center justify-between space-y-2">
- <Skeleton className="h-9 w-[200px]" />
- </div>
-
- <main className="space-y-2">
- <div className="items-center gap-2 space-y-2 md:flex md:space-y-0">
- <Skeleton className="h-9 w-[180px]" />
- </div>
- <div className="items-center gap-2 space-y-2 md:flex md:space-y-0">
- <Skeleton className="h-9 w-[180px]" />
- </div>
-
- <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("mostPlayed.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("bestPerformance.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle>{t("avgHeroDmgDealtPer10.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle>{t("avgDeathPer10.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("timeSpent.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("finalBlowsByMethod.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-full xl:col-span-3">
- <CardHeader>
- <CardTitle>{t("mapWinrates.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("winrateMapType.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("heroesDiedToMost.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("heroesElimMost.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle>
- <div className="flex items-center gap-2">
- <Label htmlFor="stat">{t("stats.title")}</Label>
- <Skeleton className="h-6 w-[180px]" />
- </div>
- </CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- </section>
- </main>
- </div>
- );
-}
diff --git a/apps/web/src/app/stats/[playerName]/page.tsx b/apps/web/src/app/stats/[playerName]/page.tsx
index acd3eb24e..e01b62026 100644
--- a/apps/web/src/app/stats/[playerName]/page.tsx
+++ b/apps/web/src/app/stats/[playerName]/page.tsx
@@ -1,9 +1,12 @@
+import { SectionHeader } from "@/components/section-header";
+import { StatPanel } from "@/components/player/stat-panel";
import {
RangePicker,
type Timeframe,
} from "@/components/stats/player/range-picker";
import { Card } from "@/components/ui/card";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { ScrimService } from "@/data/scrim";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
@@ -11,17 +14,23 @@ import { UserService } from "@/data/user";
import { auth, getViewableScrimIds } from "@/lib/auth";
import { Permission } from "@/lib/permissions";
import prisma from "@/lib/prisma";
+import { defaultLocale } from "@/i18n/config";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import type { PagePropsWithLocale } from "@/types/next";
import type { Kill, PlayerStat, Scrim } from "@/generated/prisma/client";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(
props: PagePropsWithLocale<"/stats/[playerName]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("statsPage.playerMetadata");
+ const t = getMetadataTranslations("statsPage.playerMetadata");
const playerName = decodeURIComponent(params.playerName);
const suffix = playerName.endsWith("s") ? "'" : "'s";
@@ -44,15 +53,33 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function PlayerStats(
+// Static shell: the page frame prerenders and the request-derived content
+// (params, auth, permissions, DB reads) streams into ONE boundary whose
+// fallback mirrors the profile's own pending layout. The player-name heading
+// is request-time (it comes from params), so it lives in the content child.
+export default function PlayerStats(
props: PagePropsWithLocale<"/stats/[playerName]">
) {
- const params = await props.params;
+ return (
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <Suspense fallback={<PlayerStatsSkeleton />}>
+ <PlayerStatsContent params={props.params} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function PlayerStatsContent({
+ params: paramsPromise,
+}: {
+ params: Promise<{ playerName: string }>;
+}) {
+ const params = await paramsPromise;
const t = await getTranslations("statsPage.playerStats");
const name = decodeURIComponent(params.playerName);
@@ -181,7 +208,7 @@ export default async function PlayerStats(
allPlayerDeaths = result.allPlayerDeaths;
} catch {
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <>
<div className="mb-6">
<h1 className="text-2xl font-bold tracking-tight">{name}</h1>
<p className="text-muted-foreground mt-1 text-sm">
@@ -202,12 +229,12 @@ export default async function PlayerStats(
</Link>
</div>
</Card>
- </div>
+ </>
);
}
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <>
<div className="mb-6">
<h1 className="text-2xl font-bold tracking-tight">{name}</h1>
</div>
@@ -221,6 +248,121 @@ export default async function PlayerStats(
mapWinrates={mapWinrates}
deaths={allPlayerDeaths}
/>
+ </>
+ );
+}
+
+// Mirrors the loaded layout: heading block, RangePicker toolbar row, then the
+// PlayerProfile sections (SectionHeader + StatPanel shapes) so the streamed
+// content replaces this in place with no jump.
+function PlayerStatsSkeleton() {
+ const t = getStaticTranslations("statsPage.playerStats");
+
+ return (
+ <>
+ <div className="mb-6">
+ <Skeleton className="h-8 w-[200px]" />
+ </div>
+
+ <main className="space-y-6">
+ <div className="flex flex-wrap items-center gap-2">
+ <Skeleton className="h-9 w-[180px] rounded-md" />
+ <Skeleton className="h-9 w-[280px] rounded-md" />
+ </div>
+
+ <div className="min-h-[60vh] space-y-10">
+ <section>
+ <SectionHeader
+ id="skeleton-overview"
+ title={t("sections.overview")}
+ />
+ <StatPanel>
+ <div className="grid grid-cols-2 lg:grid-cols-4">
+ {Array.from({ length: 4 }, (_, i) => (
+ <div key={i} className="flex min-w-0 flex-col px-5 py-4">
+ <Skeleton className="h-3.5 w-16" />
+ <Skeleton className="mt-3.5 h-7 w-20" />
+ </div>
+ ))}
+ </div>
+ </StatPanel>
+ </section>
+
+ <section>
+ <SectionHeader
+ id="skeleton-heroes"
+ title={t("heroPortfolio.title")}
+ description={t("heroPortfolio.description")}
+ />
+ <StatPanel>
+ <div className="px-5 py-5">
+ <Skeleton className="h-40" />
+ </div>
+ </StatPanel>
+ </section>
+
+ <section>
+ <SectionHeader id="skeleton-form" title={t("sections.form")} />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-2">
+ <ChartCellSkeleton title={t("avgHeroDmgDealtPer10.title")} />
+ <ChartCellSkeleton title={t("avgDeathPer10.title")} />
+ </div>
+ </StatPanel>
+ <div className="mt-3">
+ <StatPanel>
+ <ChartCellSkeleton title={t("stats.title")} />
+ </StatPanel>
+ </div>
+ </section>
+
+ <section>
+ <SectionHeader id="skeleton-maps" title={t("sections.maps")} />
+ <StatPanel>
+ <ChartCellSkeleton title={t("mapWinrates.title")} />
+ </StatPanel>
+ <div className="mt-3">
+ <StatPanel>
+ <ChartCellSkeleton title={t("winrateMapType.title")} />
+ </StatPanel>
+ </div>
+ </section>
+
+ <section>
+ <SectionHeader id="skeleton-habits" title={t("sections.habits")} />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-2">
+ <ChartCellSkeleton title={t("timeSpent.title")} />
+ <ChartCellSkeleton title={t("finalBlowsByMethod.title")} />
+ </div>
+ </StatPanel>
+ </section>
+
+ <section>
+ <SectionHeader id="skeleton-combat" title={t("sections.combat")} />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px md:grid-cols-3">
+ <ChartCellSkeleton title={t("bestPerformance.title")} />
+ <ChartCellSkeleton title={t("heroesElimMost.title")} />
+ <ChartCellSkeleton title={t("heroesDiedToMost.title")} />
+ </div>
+ </StatPanel>
+ </section>
+ </div>
+ </main>
+ </>
+ );
+}
+
+function ChartCellSkeleton({ title }: { title: string }) {
+ return (
+ <div className="bg-card flex flex-col px-5 py-5">
+ <h3 className="text-muted-foreground font-mono text-[0.6875rem] tracking-[0.06em] uppercase">
+ {title}
+ </h3>
+ <div className="mt-5">
+ <Skeleton className="h-72" />
+ </div>
</div>
);
}
diff --git a/apps/web/src/app/stats/hero/[heroName]/loading.tsx b/apps/web/src/app/stats/hero/[heroName]/loading.tsx
deleted file mode 100644
index 3b3129883..000000000
--- a/apps/web/src/app/stats/hero/[heroName]/loading.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
-
-export default async function StatsLoading() {
- const t = await getTranslations("statsPage.heroStats");
-
- return (
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div className="flex items-center justify-between space-y-2">
- <Skeleton className="h-9 w-[220px]" />
- </div>
-
- <main className="space-y-2">
- <div className="items-center gap-2 space-y-2 md:flex md:space-y-0">
- <Skeleton className="h-9 w-[180px]" />
- </div>
-
- <section className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle>{t("title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("bestPerformance.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("finalBlowsByMethod")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle className="flex items-center gap-1">
- {t("avgHeroDmgDealtPer10.title")}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle className="flex items-center gap-1">
- {t("avgDeathPer10.title")}
- </CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("heroesDiedToMost.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2 xl:col-span-1">
- <CardHeader>
- <CardTitle>{t("heroesElimMost.title")}</CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- <Card className="col-span-1 md:col-span-2">
- <CardHeader>
- <CardTitle>
- <div className="flex items-center gap-2">
- <Label htmlFor="stat">{t("stats.title")}</Label>
- <Skeleton className="h-6 w-[180px]" />
- </div>
- </CardTitle>
- </CardHeader>
- <CardContent>
- <Skeleton className="h-72" />
- </CardContent>
- </Card>
- </section>
- </main>
- </div>
- );
-}
diff --git a/apps/web/src/app/stats/hero/[heroName]/page.tsx b/apps/web/src/app/stats/hero/[heroName]/page.tsx
index d99621bc0..76e4bdb38 100644
--- a/apps/web/src/app/stats/hero/[heroName]/page.tsx
+++ b/apps/web/src/app/stats/hero/[heroName]/page.tsx
@@ -1,31 +1,40 @@
+import { StatPanel } from "@/components/player/stat-panel";
+import { SectionHeader } from "@/components/section-header";
import {
RangePicker,
type Timeframe,
} from "@/components/stats/hero/range-picker";
import { Card } from "@/components/ui/card";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { HeroService } from "@/data/hero";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth, getViewableScrimIds } from "@/lib/auth";
+import { defaultLocale } from "@/i18n/config";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import { Permission } from "@/lib/permissions";
import prisma from "@/lib/prisma";
-import { translateHeroName } from "@/lib/utils";
+import { toHero, translateHeroName } from "@/lib/utils";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
import type { PagePropsWithLocale } from "@/types/next";
import type { Kill, PlayerStat, Scrim } from "@/generated/prisma/client";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(
props: PagePropsWithLocale<"/stats/hero/[heroName]">
): Promise<Metadata> {
const params = await props.params;
const heroName = decodeURIComponent(params.heroName);
- const hero = await translateHeroName(heroName);
- const t = await getTranslations("statsPage.heroMetadata");
+ const hero = getMetadataTranslations("heroes")(toHero(heroName));
+ const t = getMetadataTranslations("statsPage.heroMetadata");
return {
title: t("title", { hero }),
@@ -43,12 +52,27 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function HeroStats(
+// Static shell: the page frame prerenders, and all request-time work (params,
+// auth, DB reads) streams into ONE boundary whose fallback mirrors the loaded
+// hero profile's pending layout.
+export default function HeroStats(
+ props: PagePropsWithLocale<"/stats/hero/[heroName]">
+) {
+ return (
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <Suspense fallback={<HeroStatsSkeleton />}>
+ <HeroStatsContent {...props} />
+ </Suspense>
+ </div>
+ );
+}
+
+async function HeroStatsContent(
props: PagePropsWithLocale<"/stats/hero/[heroName]">
) {
const params = await props.params;
@@ -174,7 +198,7 @@ export default async function HeroStats(
);
} catch {
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <>
<div className="mb-6">
<h1 className="text-2xl font-bold tracking-tight">
{translatedHeroName}
@@ -194,12 +218,12 @@ export default async function HeroStats(
</Link>
</div>
</Card>
- </div>
+ </>
);
}
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <>
<div className="mb-6">
<h1 className="text-2xl font-bold tracking-tight">
{translatedHeroName}
@@ -214,6 +238,116 @@ export default async function HeroStats(
deaths={allHeroDeaths}
hero={hero as HeroName}
/>
+ </>
+ );
+}
+
+// Mirrors the loaded state: heading, RangePicker's timeframe select, and the
+// HeroProfile section stack (SectionHeader + StatPanel, 250px chart cells) so
+// the streamed content replaces this in place.
+function HeroStatsSkeleton() {
+ const t = getStaticTranslations("statsPage.heroStats");
+
+ return (
+ <>
+ <div className="mb-6">
+ <Skeleton className="h-8 w-[220px]" />
+ </div>
+
+ <div className="space-y-6">
+ <div className="flex flex-wrap items-center gap-2">
+ <Skeleton className="h-9 w-[180px]" />
+ </div>
+
+ <div className="min-h-[60vh] space-y-10">
+ <section aria-labelledby="hero-overview">
+ <header className="mb-5 flex flex-col gap-1">
+ <h2
+ id="hero-overview"
+ className="text-muted-foreground font-mono text-[0.6875rem] tracking-[0.08em] uppercase"
+ >
+ {t("sections.overview")}
+ </h2>
+ <Skeleton className="h-4 w-56" />
+ </header>
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-[auto_1fr]">
+ <div className="bg-card flex items-center gap-4 px-5 py-4">
+ <Skeleton className="size-16 rounded-md" />
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-3 w-16" />
+ </div>
+ </div>
+ <div className="bg-card grid grid-cols-2 lg:grid-cols-4">
+ {Array.from({ length: 4 }, (_, i) => (
+ <div key={i} className="flex min-w-0 flex-col px-5 py-4">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="mt-3.5 h-7 w-14" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </StatPanel>
+ </section>
+
+ <section aria-labelledby="hero-talent">
+ <SectionHeader
+ id="hero-talent"
+ title={t("sections.talent")}
+ description={t("talent.description")}
+ />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-[1.4fr_1fr]">
+ <ChartCellSkeleton />
+ <ChartCellSkeleton />
+ </div>
+ </StatPanel>
+ </section>
+
+ <section aria-labelledby="hero-form">
+ <SectionHeader id="hero-form" title={t("sections.form")} />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-2">
+ <ChartCellSkeleton />
+ <ChartCellSkeleton />
+ </div>
+ </StatPanel>
+ <div className="mt-3">
+ <StatPanel>
+ <ChartCellSkeleton />
+ </StatPanel>
+ </div>
+ </section>
+
+ <section aria-labelledby="hero-combat">
+ <SectionHeader id="hero-combat" title={t("sections.combat")} />
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-2">
+ <ChartCellSkeleton />
+ <ChartCellSkeleton />
+ </div>
+ </StatPanel>
+ <div className="mt-3">
+ <StatPanel>
+ <div className="bg-border grid grid-cols-1 gap-px lg:grid-cols-2">
+ <ChartCellSkeleton />
+ <ChartCellSkeleton />
+ </div>
+ </StatPanel>
+ </div>
+ </section>
+ </div>
+ </div>
+ </>
+ );
+}
+
+function ChartCellSkeleton() {
+ return (
+ <div className="bg-card flex flex-col px-5 py-5">
+ <Skeleton className="h-3.5 w-40" />
+ <Skeleton className="mt-5 h-[250px]" />
</div>
);
}
diff --git a/apps/web/src/app/stats/hero/page.tsx b/apps/web/src/app/stats/hero/page.tsx
index c24bab518..a0e5c00b4 100644
--- a/apps/web/src/app/stats/hero/page.tsx
+++ b/apps/web/src/app/stats/hero/page.tsx
@@ -1,17 +1,20 @@
import { StatPanel } from "@/components/player/stat-panel";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
+import { defaultLocale } from "@/i18n/config";
+import {
+ getMetadataTranslations,
+ getStaticTranslations,
+} from "@/lib/metadata-i18n";
import { getHeroNames, toHero } from "@/lib/utils";
import { type HeroName, roleHeroMapping } from "@/types/heroes";
-import type { PagePropsWithLocale } from "@/types/next";
import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
import Image from "next/image";
+import { Suspense } from "react";
-export async function generateMetadata(
- props: PagePropsWithLocale<"/stats/hero">
-): Promise<Metadata> {
- const params = await props.params;
- const t = await getTranslations("statsPage.heroStatsMetadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("statsPage.heroStatsMetadata");
return {
title: t("title"),
description: t("description"),
@@ -28,12 +31,36 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function HeroSelect() {
+// Static shell: the frame and heading prerender (default-locale text via the
+// cookie-free translator); the locale-aware roster streams into ONE boundary
+// whose fallback mirrors the three role panels.
+export default function HeroSelect() {
+ const t = getStaticTranslations("statsPage.heroStats");
+
+ return (
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <div className="mb-6">
+ <h1 className="text-2xl font-bold tracking-tight">
+ {t("pickerTitle")}
+ </h1>
+ <p className="text-muted-foreground mt-1 max-w-prose text-sm">
+ {t("description")}
+ </p>
+ </div>
+
+ <Suspense fallback={<HeroRosterSkeleton />}>
+ <HeroRosterContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function HeroRosterContent() {
const t = await getTranslations("statsPage.heroStats");
const heroNames = await getHeroNames();
@@ -48,57 +75,79 @@ export default async function HeroSelect() {
];
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <div className="mb-6">
- <h1 className="text-2xl font-bold tracking-tight">
- {t("pickerTitle")}
- </h1>
- <p className="text-muted-foreground mt-1 max-w-prose text-sm">
- {t("description")}
- </p>
- </div>
-
- <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
- {groups.map((group) => (
- <section
- key={group.id}
- aria-labelledby={group.id}
- className="flex flex-col gap-3"
+ <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+ {groups.map((group) => (
+ <section
+ key={group.id}
+ aria-labelledby={group.id}
+ className="flex flex-col gap-3"
+ >
+ <h2
+ id={group.id}
+ className="text-muted-foreground font-mono text-[0.6875rem] tracking-[0.08em] uppercase"
>
- <h2
- id={group.id}
- className="text-muted-foreground font-mono text-[0.6875rem] tracking-[0.08em] uppercase"
- >
- {group.title}
- </h2>
- <StatPanel className="flex-1">
- <div className="bg-border grid grid-cols-3 gap-px sm:grid-cols-4 md:grid-cols-3">
- {group.heroes.map((hero) => {
- const heroLabel = heroNames.get(toHero(hero)) ?? hero;
- return (
- <Link
- key={hero}
- href={`/stats/hero/${hero}` as Route}
- className="bg-card [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted/40 flex flex-col items-center gap-2 px-3 py-4 text-center no-underline transition-colors"
- >
- <Image
- src={`/heroes/${toHero(hero)}.png`}
- alt={t("altText", { hero: heroLabel })}
- width={128}
- height={128}
- className="ring-foreground/10 size-14 rounded-md object-cover ring-1"
- />
- <span className="truncate text-xs font-medium">
- {heroLabel}
- </span>
- </Link>
- );
- })}
- </div>
- </StatPanel>
- </section>
- ))}
- </div>
+ {group.title}
+ </h2>
+ <StatPanel className="flex-1">
+ <div className="bg-border grid grid-cols-3 gap-px sm:grid-cols-4 md:grid-cols-3">
+ {group.heroes.map((hero) => {
+ const heroLabel = heroNames.get(toHero(hero)) ?? hero;
+ return (
+ <Link
+ key={hero}
+ href={`/stats/hero/${hero}` as Route}
+ className="bg-card [@media(hover:hover)_and_(pointer:fine)]:hover:bg-muted/40 flex flex-col items-center gap-2 px-3 py-4 text-center no-underline transition-colors"
+ >
+ <Image
+ src={`/heroes/${toHero(hero)}.png`}
+ alt={t("altText", { hero: heroLabel })}
+ width={128}
+ height={128}
+ className="ring-foreground/10 size-14 rounded-md object-cover ring-1"
+ />
+ <span className="truncate text-xs font-medium">
+ {heroLabel}
+ </span>
+ </Link>
+ );
+ })}
+ </div>
+ </StatPanel>
+ </section>
+ ))}
+ </div>
+ );
+}
+
+// Mirrors the roster's pending layout: three role panels with one skeleton
+// cell per hero, so the streamed content replaces it in place with no jump.
+function HeroRosterSkeleton() {
+ const roles = [
+ { id: "tank-roster", heroes: roleHeroMapping.Tank },
+ { id: "damage-roster", heroes: roleHeroMapping.Damage },
+ { id: "support-roster", heroes: roleHeroMapping.Support },
+ ];
+
+ return (
+ <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+ {roles.map((role) => (
+ <section key={role.id} className="flex flex-col gap-3">
+ <Skeleton className="h-3 w-14" />
+ <StatPanel className="flex-1">
+ <div className="bg-border grid grid-cols-3 gap-px sm:grid-cols-4 md:grid-cols-3">
+ {role.heroes.map((hero) => (
+ <div
+ key={hero}
+ className="bg-card flex flex-col items-center gap-2 px-3 py-4"
+ >
+ <Skeleton className="size-14 rounded-md" />
+ <Skeleton className="h-3 w-10" />
+ </div>
+ ))}
+ </div>
+ </StatPanel>
+ </section>
+ ))}
</div>
);
}
diff --git a/apps/web/src/app/stats/layout.tsx b/apps/web/src/app/stats/layout.tsx
index 024a3513b..d98e8ff70 100644
--- a/apps/web/src/app/stats/layout.tsx
+++ b/apps/web/src/app/stats/layout.tsx
@@ -1,12 +1,10 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(
- props: LayoutProps<"/stats">
-): Promise<Metadata> {
- const params = (await props.params) as { locale: string };
- const t = await getTranslations("statsPage.layoutMetadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("statsPage.layoutMetadata");
return {
title: t("title"),
@@ -24,7 +22,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/stats/map/page.tsx b/apps/web/src/app/stats/map/page.tsx
index 1a20cfe7a..3e6e3bc26 100644
--- a/apps/web/src/app/stats/map/page.tsx
+++ b/apps/web/src/app/stats/map/page.tsx
@@ -1,16 +1,30 @@
import { MapHeroTrends } from "@/components/stats/map/map-hero-trends";
+import { Skeleton } from "@/components/ui/skeleton";
import { MapHeroTrendsService } from "@/data/map";
import { getOverwatchPatches } from "@/data/overwatch/patches-service";
import { AppRuntime } from "@/data/runtime";
import { Effect } from "effect";
import type { Metadata } from "next";
+import { connection } from "next/server";
+import { Suspense } from "react";
export const metadata: Metadata = {
title: "Map Hero Trends | Parsertime",
description: "Recent hero pick rates, winrates, and playtime trends by map.",
};
-export default async function MapHeroStatsPage() {
+export default function MapHeroStatsPage() {
+ return (
+ <Suspense fallback={<MapHeroTrendsFallback />}>
+ <MapHeroTrendsContent />
+ </Suspense>
+ );
+}
+
+async function MapHeroTrendsContent() {
+ // The trends service reads Date.now() and the request locale, so render at
+ // request time rather than prerendering.
+ await connection();
const [data, patches] = await Promise.all([
AppRuntime.runPromise(
MapHeroTrendsService.pipe(
@@ -27,3 +41,74 @@ export default async function MapHeroStatsPage() {
/>
);
}
+
+function MapHeroTrendsFallback() {
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border flex flex-wrap items-end justify-between gap-x-10 gap-y-4 border-b pb-6">
+ <div className="space-y-3">
+ <Skeleton className="h-3 w-32" />
+ <Skeleton className="h-10 w-64" />
+ </div>
+ <div className="flex flex-wrap items-baseline gap-x-8 gap-y-2">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex items-baseline gap-2">
+ <Skeleton className="h-2.5 w-12" />
+ <Skeleton className="h-5 w-8" />
+ </div>
+ ))}
+ </div>
+ </header>
+
+ <div className="mt-6 flex flex-wrap items-center gap-3">
+ <Skeleton className="h-9 w-full sm:w-[280px]" />
+ <div className="border-border bg-card flex rounded-md border p-0.5">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-8 w-16 rounded-sm" />
+ ))}
+ </div>
+ <div className="ml-auto flex items-center gap-2">
+ <Skeleton className="hidden h-2.5 w-8 sm:block" />
+ <Skeleton className="h-9 w-40" />
+ </div>
+ </div>
+
+ <div className="mt-3 flex flex-wrap gap-x-1 gap-y-1">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-5 w-20 rounded-sm" />
+ ))}
+ </div>
+
+ <section className="mt-8">
+ <div className="border-border grid grid-cols-[2.5rem_minmax(0,1fr)_5rem_5.5rem_5.5rem_5.5rem_4.5rem_5.5rem] items-center gap-4 border-b pb-3">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-2.5 w-full" />
+ ))}
+ </div>
+ <ul>
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <li
+ key={k}
+ className="border-border grid grid-cols-[2.5rem_minmax(0,1fr)_5rem_5.5rem_5.5rem_5.5rem_4.5rem_5.5rem] items-center gap-4 border-b py-3"
+ >
+ <Skeleton className="h-4 w-6" />
+ <div className="flex min-w-0 items-center gap-3">
+ <Skeleton className="h-9 w-9 shrink-0 rounded-[4px]" />
+ <div className="min-w-0 space-y-1.5">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-2.5 w-14" />
+ </div>
+ </div>
+ <Skeleton className="h-3 w-10" />
+ <Skeleton className="h-4 w-12 justify-self-end" />
+ <Skeleton className="h-4 w-10 justify-self-end" />
+ <Skeleton className="h-4 w-10 justify-self-end" />
+ <Skeleton className="h-4 w-8 justify-self-end" />
+ <Skeleton className="h-4 w-10 justify-self-end" />
+ </li>
+ ))}
+ </ul>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/page.tsx b/apps/web/src/app/stats/page.tsx
index 4dc59abfb..1d702c646 100644
--- a/apps/web/src/app/stats/page.tsx
+++ b/apps/web/src/app/stats/page.tsx
@@ -7,7 +7,9 @@ import {
} from "@/components/stats/leaderboard-card";
import { Searchbar } from "@/components/stats/searchbar";
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { getApproximateCounts } from "@/lib/approximate-count";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import {
format,
@@ -17,8 +19,32 @@ import {
} from "@/lib/utils";
import type { Route } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export default async function StatsPage() {
+// Static shell: the page frame, title (default-locale via the cookie-free
+// translator), and searchbar prerender; the DB-derived sections stream into
+// ONE boundary whose fallback mirrors their loaded layout.
+export default function StatsPage() {
+ const t = getStaticTranslations("statsPage");
+
+ return (
+ <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
+ <div className="mb-3 flex items-end justify-between gap-4">
+ <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
+ </div>
+
+ <div className="mb-8">
+ <Searchbar />
+ </div>
+
+ <Suspense fallback={<StatsSkeleton />}>
+ <StatsContent />
+ </Suspense>
+ </div>
+ );
+}
+
+async function StatsContent() {
const t = await getTranslations("statsPage");
// Large tables use approximate counts (pg_class.reltuples) to avoid scanning
@@ -180,15 +206,7 @@ export default async function StatsPage() {
}
return (
- <div className="flex-1 px-6 pt-6 pb-12 md:px-8">
- <div className="mb-3 flex items-end justify-between gap-4">
- <h1 className="text-2xl font-bold tracking-tight">{t("title")}</h1>
- </div>
-
- <div className="mb-8">
- <Searchbar />
- </div>
-
+ <>
<section aria-labelledby="global-stats" className="mb-8">
<SectionHeader id="global-stats" title={t("globalStats")} />
<StatPanel>
@@ -291,6 +309,60 @@ export default async function StatsPage() {
</div>
</StatPanel>
</section>
- </div>
+ </>
+ );
+}
+
+// Mirrors the loaded sections: SectionHeader eyebrow, the four-block global
+// stat panel, and the eight-card leaderboard grid.
+function StatsSkeleton() {
+ return (
+ <>
+ <section className="mb-8">
+ <header className="mb-5 flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-24" />
+ </header>
+ <div className="ring-foreground/10 bg-card overflow-hidden rounded-xl shadow-xs ring-1">
+ <div className="grid grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex min-w-0 flex-col px-5 py-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="mt-3.5 h-7 w-20" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section>
+ <header className="mb-5 flex flex-col gap-1">
+ <Skeleton className="h-2.5 w-28" />
+ </header>
+ <div className="ring-foreground/10 bg-card overflow-hidden rounded-xl shadow-xs ring-1">
+ <div className="bg-border grid grid-cols-1 gap-px md:grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="bg-card flex flex-col px-5 py-4">
+ <Skeleton className="h-2.5 w-28" />
+ <div className="mt-3 flex flex-col gap-1">
+ <div className="flex gap-2 py-1">
+ <Skeleton className="h-2.5 w-6" />
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="ml-auto h-2.5 w-14" />
+ </div>
+ {["a", "b", "c"].map((r) => (
+ <div key={r} className="flex gap-2 py-1.5">
+ <Skeleton className="h-4 w-6" />
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="ml-auto h-4 w-14" />
+ </div>
+ ))}
+ </div>
+ <Skeleton className="mt-3 h-3 w-36" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+ </>
);
}
diff --git a/apps/web/src/app/stats/team/[teamId]/_lib/context.ts b/apps/web/src/app/stats/team/[teamId]/_lib/context.ts
index 5c0770c6f..81e0a6219 100644
--- a/apps/web/src/app/stats/team/[teamId]/_lib/context.ts
+++ b/apps/web/src/app/stats/team/[teamId]/_lib/context.ts
@@ -1,15 +1,19 @@
+import {
+ getCachedTeamSubstituteNames,
+ getCachedTeamWinrates,
+} from "@/data/cached/team-cache";
import { AppRuntime } from "@/data/runtime";
-import { type TeamDateRange, TeamStatsService } from "@/data/team";
-import { getTeamSubstituteNames } from "@/data/team/substitutes";
+import { type TeamDateRange } from "@/data/team";
import { UserService } from "@/data/user";
import { $Enums } from "@/generated/prisma/browser";
import { auth, canManageTeam } from "@/lib/auth";
import { positionalData, simulationTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { Permission } from "@/lib/permissions";
import prisma from "@/lib/prisma";
import { isValidTimeframe, type Timeframe } from "@/lib/timeframe";
import { computeTeamTsr, matchesAnyName } from "@/lib/tsr/team";
-import { addMonths, addWeeks, addYears } from "date-fns";
+import { addDays, addMonths, addWeeks, addYears, startOfDay } from "date-fns";
import { Effect } from "effect";
import { notFound } from "next/navigation";
@@ -24,32 +28,39 @@ export function computeDateRange(
customFrom?: string,
customTo?: string
): TeamDateRange | undefined {
- const now = new Date();
+ // `to` anchors to the START OF TOMORROW rather than the exact instant. This
+ // range feeds `getCachedTeamWinrates`' cache key, and PPR renders each request
+ // twice (cache-warming + final prerender). A raw `new Date()` differs by
+ // milliseconds between the two passes, so the key would never match ("Unexpected
+ // cache miss after cache warming phase"). Quantizing to a day boundary makes the
+ // key change only once per day — matching the `cacheLife("days")` on the cached
+ // read — while start-of-tomorrow keeps all of today's scrims inside the window.
+ const to = startOfDay(addDays(new Date(), 1));
switch (timeframe) {
case "one-week":
- return { from: addWeeks(now, -1), to: now };
+ return { from: addWeeks(to, -1), to };
case "two-weeks":
- return { from: addWeeks(now, -2), to: now };
+ return { from: addWeeks(to, -2), to };
case "one-month":
- return { from: addMonths(now, -1), to: now };
+ return { from: addMonths(to, -1), to };
case "three-months":
- return { from: addMonths(now, -3), to: now };
+ return { from: addMonths(to, -3), to };
case "six-months":
- return { from: addMonths(now, -6), to: now };
+ return { from: addMonths(to, -6), to };
case "one-year":
- return { from: addYears(now, -1), to: now };
+ return { from: addYears(to, -1), to };
case "all-time":
return undefined;
case "custom": {
if (customFrom && customTo) {
const from = new Date(customFrom);
- const to = new Date(customTo);
- if (!isNaN(from.getTime()) && !isNaN(to.getTime())) {
- return { from, to };
+ const customToDate = new Date(customTo);
+ if (!isNaN(from.getTime()) && !isNaN(customToDate.getTime())) {
+ return { from, to: customToDate };
}
}
- return { from: addWeeks(now, -1), to: now };
+ return { from: addWeeks(to, -1), to };
}
}
}
@@ -124,7 +135,7 @@ export async function loadTeamStatsShell(
const [isManager, substituteNames] = await Promise.all([
canManageTeam(teamId, user),
- getTeamSubstituteNames(teamId),
+ getCachedTeamSubstituteNames(teamId),
]);
const [timeframe1, timeframe2, timeframe3] = await Promise.all([
@@ -152,8 +163,8 @@ export async function loadTeamStatsShell(
const dateRange = computeDateRange(effectiveTimeframe, customFrom, customTo);
const [positionalEnabled, simulationEnabled] = await Promise.all([
- positionalData(),
- simulationTool(),
+ getFlag(positionalData),
+ getFlag(simulationTool),
]);
return {
@@ -181,11 +192,7 @@ export async function loadTeamStatsHeaderData(
) {
const { teamId, team, dateRange, substituteNames } = shell;
const [winrates, teamTsr] = await Promise.all([
- AppRuntime.runPromise(
- TeamStatsService.pipe(
- Effect.flatMap((svc) => svc.getTeamWinrates(teamId, dateRange))
- )
- ),
+ getCachedTeamWinrates(teamId, dateRange),
prisma.scrim
.findMany({ where: { teamId }, select: { id: true } })
.then((rows) =>
diff --git a/apps/web/src/app/stats/team/[teamId]/charts/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/charts/loading-skeleton.tsx
new file mode 100644
index 000000000..1e199ceca
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/charts/loading-skeleton.tsx
@@ -0,0 +1,53 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function ChartsSkeleton() {
+ return (
+ <div className="mt-8">
+ <div className="space-y-12">
+ <div className="space-y-6">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="flex flex-wrap items-center gap-4">
+ <Skeleton className="h-8 w-28 rounded-md" />
+ <Skeleton className="h-5 w-20 rounded-full" />
+ </div>
+ </div>
+ <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <div
+ key={k}
+ className="border-border space-y-3 rounded-md border p-4"
+ >
+ <Skeleton className="h-4 w-36" />
+ <Skeleton className="h-56 w-full rounded" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="space-y-6">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="flex flex-wrap items-end gap-4">
+ {["x", "y"].map((k) => (
+ <div key={k} className="space-y-1.5">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-9 w-[220px] rounded-md" />
+ </div>
+ ))}
+ </div>
+ <div className="border-border space-y-3 rounded-md border p-4">
+ <Skeleton className="h-4 w-48" />
+ <Skeleton className="h-72 w-full rounded" />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/charts/page.tsx b/apps/web/src/app/stats/team/[teamId]/charts/page.tsx
index eb852dcda..83c6d33fe 100644
--- a/apps/web/src/app/stats/team/[teamId]/charts/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/charts/page.tsx
@@ -4,17 +4,32 @@ import { AppRuntime } from "@/data/runtime";
import { TeamScatterService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { ChartsSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/charts"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<ChartsSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/charts"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/heroes/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/heroes/loading-skeleton.tsx
new file mode 100644
index 000000000..653fe9a0b
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/heroes/loading-skeleton.tsx
@@ -0,0 +1,138 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function HeroesSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <div className="space-y-4">
+ <div className="space-y-8">
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="grid gap-4 md:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-9 w-16" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <div className="grid gap-8 md:grid-cols-2">
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="space-y-4">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="border-border rounded-lg border p-4">
+ <div className="mb-3 flex items-center gap-2">
+ <Skeleton className="size-4 rounded" />
+ <Skeleton className="h-2.5 w-16" />
+ </div>
+ <div className="space-y-2">
+ {["a", "b", "c", "d", "e"].map((j) => (
+ <div
+ key={j}
+ className="flex items-center gap-3 rounded-lg p-2"
+ >
+ <Skeleton className="h-4 w-4" />
+ <Skeleton className="h-10 w-10 rounded" />
+ <div className="flex-1 space-y-1">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-3 w-32" />
+ </div>
+ <Skeleton className="h-5 w-16 rounded" />
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="space-y-2">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </section>
+ </div>
+
+ <section className="space-y-4 border-t pt-6">
+ <Skeleton className="h-2.5 w-28" />
+ <div className="grid grid-cols-3 gap-4">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-8 w-12" />
+ </div>
+ ))}
+ </div>
+ </section>
+ </div>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-72" />
+ </div>
+ <div className="overflow-x-auto">
+ <Skeleton className="h-48 w-full min-w-[640px]" />
+ </div>
+ </section>
+ </div>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-10 w-full" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="h-12 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-10 w-full" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <Skeleton key={k} className="h-12 w-full rounded-none" />
+ ))}
+ </div>
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/heroes/page.tsx b/apps/web/src/app/stats/team/[teamId]/heroes/page.tsx
index a09ebc2a9..53ef42c27 100644
--- a/apps/web/src/app/stats/team/[teamId]/heroes/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/heroes/page.tsx
@@ -12,17 +12,32 @@ import {
import { calculateHeroPickrateMatrix } from "@/lib/hero-pickrate-utils";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { HeroesSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/heroes"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<HeroesSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/heroes"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/layout.tsx b/apps/web/src/app/stats/team/[teamId]/layout.tsx
index ddf357b8f..3568c2e22 100644
--- a/apps/web/src/app/stats/team/[teamId]/layout.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/layout.tsx
@@ -2,18 +2,21 @@ import { RangeTransitionProvider } from "@/components/stats/team/range-transitio
import { TeamStatsContent } from "@/components/stats/team/team-stats-content";
import { TeamStatsHeaderClient } from "@/components/stats/team/team-stats-header-client";
import { TeamStatsTabsNav } from "@/components/stats/team/team-stats-tabs-nav";
+import { defaultLocale } from "@/i18n/config";
import { isAuthedToViewTeam } from "@/lib/auth";
import { positionalData, simulationTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
+import { connection } from "next/server";
+import { Suspense } from "react";
export async function generateMetadata(
props: LayoutProps<"/stats/team/[teamId]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("teamStatsPage.layoutMetadata");
- const locale = await getLocale();
+ const t = getMetadataTranslations("teamStatsPage.layoutMetadata");
const teamId = parseInt(params.teamId);
const canViewTeam =
@@ -45,7 +48,7 @@ export async function generateMetadata(
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
@@ -55,28 +58,50 @@ export async function generateMetadata(
// in the header's stats-summary API route, since layouts do not re-render on
// soft navigation and are not a valid security boundary. Only non-sensitive
// data (feature flags, the teamId already in the URL) is read here.
-export default async function TeamStatsLayout(
+export default function TeamStatsLayout(
props: LayoutProps<"/stats/team/[teamId]">
) {
- const params = await props.params;
- const teamId = parseInt(params.teamId);
-
- const [positionalEnabled, simulationEnabled] = await Promise.all([
- positionalData(),
- simulationTool(),
- ]);
-
return (
<div className="px-6 pt-8 pb-16 sm:px-10">
<RangeTransitionProvider>
- <TeamStatsHeaderClient teamId={teamId} />
- <TeamStatsTabsNav
- teamId={teamId}
- positionalEnabled={positionalEnabled}
- simulationEnabled={simulationEnabled}
- />
+ <Suspense fallback={<div className="h-24" />}>
+ <TeamStatsNav params={props.params} />
+ </Suspense>
<TeamStatsContent>{props.children}</TeamStatsContent>
</RangeTransitionProvider>
</div>
);
}
+
+async function TeamStatsNav({
+ params,
+}: {
+ params: LayoutProps<"/stats/team/[teamId]">["params"];
+}) {
+ const { teamId: rawTeamId } = await params;
+ const teamId = parseInt(rawTeamId);
+
+ // This component lives in the layout's static-shell region and the flags
+ // below reach Edge Config `use cache` reads (via `vercelAdapter`). Force
+ // request-time so those never get prerendered into the shell and reject as a
+ // dynamic "use cache" hanging promise. `await params` above already defers on
+ // the fallback shell, but this makes the guard explicit and reorder-proof —
+ // same pattern as the footer and `AuthedAppHeader`.
+ await connection();
+
+ const [positionalEnabled, simulationEnabled] = await Promise.all([
+ getFlag(positionalData),
+ getFlag(simulationTool),
+ ]);
+
+ return (
+ <>
+ <TeamStatsHeaderClient teamId={teamId} />
+ <TeamStatsTabsNav
+ teamId={teamId}
+ positionalEnabled={positionalEnabled}
+ simulationEnabled={simulationEnabled}
+ />
+ </>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/loading.tsx b/apps/web/src/app/stats/team/[teamId]/loading-skeleton.tsx
similarity index 73%
rename from apps/web/src/app/stats/team/[teamId]/loading.tsx
rename to apps/web/src/app/stats/team/[teamId]/loading-skeleton.tsx
index 06a8ead02..29d9a09d2 100644
--- a/apps/web/src/app/stats/team/[teamId]/loading.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/loading-skeleton.tsx
@@ -4,9 +4,9 @@ import {
SkeletonTable,
} from "@/components/stats/team/overview-skeletons";
-// The header and tab nav live in the persistent layout, so this loading
-// boundary only skeletons the page content that streams in per tab.
-export default function TeamStatsLoading() {
+// The header and tab nav live in the persistent layout, so this skeleton only
+// covers the page content that streams in per tab.
+export function OverviewSkeleton() {
return (
<div className="mt-8 space-y-12">
<SkeletonRibbon />
diff --git a/apps/web/src/app/stats/team/[teamId]/maps/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/maps/loading-skeleton.tsx
new file mode 100644
index 000000000..11d2c5235
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/maps/loading-skeleton.tsx
@@ -0,0 +1,100 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function MapsSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ </div>
+ <div className="space-y-6">
+ <Skeleton className="h-[300px] w-full rounded-md" />
+ <div className="border-border divide-y divide-[var(--border)] border-y md:grid md:grid-cols-2 md:divide-x md:divide-y-0 lg:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-3 px-4 py-4">
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-4 w-10" />
+ </div>
+ <div className="space-y-1.5">
+ {["x", "y", "z"].map((j) => (
+ <div key={j} className="flex justify-between">
+ <Skeleton className="h-3.5 w-16" />
+ <Skeleton className="h-3.5 w-14" />
+ </div>
+ ))}
+ </div>
+ <Skeleton className="h-3.5 w-28" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ </div>
+ <div className="border-border grid gap-4 border-y py-4 sm:grid-cols-2 lg:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-9 w-full rounded-md" />
+ </div>
+ ))}
+ </div>
+ <Skeleton className="h-4 w-32" />
+ <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <Skeleton key={k} className="h-48 w-full rounded-md" />
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ </div>
+ <div className="overflow-x-auto">
+ <div className="space-y-1">
+ <div className="flex gap-1">
+ <Skeleton className="h-8 w-[140px] shrink-0" />
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-8 w-[100px] shrink-0" />
+ ))}
+ </div>
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="flex gap-1">
+ <Skeleton className="h-16 w-[140px] shrink-0" />
+ {["a", "b", "c", "d", "e"].map((j) => (
+ <Skeleton key={j} className="h-16 w-[100px] shrink-0" />
+ ))}
+ </div>
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-10 w-full rounded-lg" />
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/maps/page.tsx b/apps/web/src/app/stats/team/[teamId]/maps/page.tsx
index aa1d74dee..1bf7e255b 100644
--- a/apps/web/src/app/stats/team/[teamId]/maps/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/maps/page.tsx
@@ -12,17 +12,32 @@ import {
import { getMapNames } from "@/lib/utils";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { MapsSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/maps"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<MapsSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/maps"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/page.tsx b/apps/web/src/app/stats/team/[teamId]/page.tsx
index 5c2c9e33b..f84d545e2 100644
--- a/apps/web/src/app/stats/team/[teamId]/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/page.tsx
@@ -11,6 +11,7 @@ import {
import { TeamStatsGate } from "@/components/stats/team/team-stats-gate";
import type { PagePropsWithLocale } from "@/types/next";
import { Suspense } from "react";
+import { OverviewSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "./_lib/context";
// The heaviest dashboard in the app: dozens of services over a shared
@@ -18,13 +19,29 @@ import { loadTeamStatsShell } from "./_lib/context";
// a cold cache; warm renders are far faster.
export const maxDuration = 60;
-export default async function TeamStatsOverviewPage(
+export default function TeamStatsOverviewPage(
props: PagePropsWithLocale<"/stats/team/[teamId]"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<OverviewSkeleton />}>
+ <TeamStatsOverviewContent
+ params={props.params}
+ searchParams={props.searchParams}
+ />
+ </Suspense>
+ );
+}
+
+async function TeamStatsOverviewContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/performance/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/performance/loading-skeleton.tsx
new file mode 100644
index 000000000..3dbeb2428
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/performance/loading-skeleton.tsx
@@ -0,0 +1,87 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function PerformanceSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["tank", "damage", "support", "best"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="mt-0.5 h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <table className="w-full text-sm">
+ <thead className="bg-muted/30">
+ <tr>
+ {["stat", "tank-h", "damage-h", "support-h"].map((k) => (
+ <th key={k} className="px-4 py-2 text-left">
+ <Skeleton className="h-2.5 w-12" />
+ </th>
+ ))}
+ </tr>
+ </thead>
+ <tbody className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"].map((k) => (
+ <tr key={k}>
+ {["p", "q", "r", "s"].map((c) => (
+ <td key={c} className="px-4 py-3">
+ <Skeleton className="h-4 w-full" />
+ </td>
+ ))}
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <table className="w-full text-sm">
+ <thead className="bg-muted/30">
+ <tr>
+ {[
+ "rank-h",
+ "roster-h",
+ "games-h",
+ "record-h",
+ "wr-h",
+ "toggle-h",
+ ].map((k) => (
+ <th key={k} className="px-4 py-2 text-left">
+ <Skeleton className="h-2.5 w-10" />
+ </th>
+ ))}
+ </tr>
+ </thead>
+ <tbody className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <tr key={k}>
+ {["v", "w", "x", "y", "z", "u"].map((c) => (
+ <td key={c} className="px-4 py-3">
+ <Skeleton className="h-4 w-full" />
+ </td>
+ ))}
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/performance/page.tsx b/apps/web/src/app/stats/team/[teamId]/performance/page.tsx
index d95e20841..2bbd72a21 100644
--- a/apps/web/src/app/stats/team/[teamId]/performance/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/performance/page.tsx
@@ -6,17 +6,32 @@ import { AppRuntime } from "@/data/runtime";
import { TeamRoleStatsService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { PerformanceSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/performance"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<PerformanceSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/performance"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/positional/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/positional/loading-skeleton.tsx
new file mode 100644
index 000000000..cf1a38fe8
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/positional/loading-skeleton.tsx
@@ -0,0 +1,67 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function PositionalSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ <div className="bg-border grid w-full grid-cols-2 gap-px overflow-hidden rounded-md sm:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="bg-card flex flex-col px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="mt-1 h-7 w-20" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-36" />
+ </div>
+ <div className="bg-border grid w-full grid-cols-1 gap-px overflow-hidden rounded-md sm:grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="bg-card flex flex-col gap-2 p-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-[120px] w-full" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-40" />
+ </div>
+ <div className="space-y-px overflow-x-auto">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-44" />
+ </div>
+ <div className="flex flex-wrap items-baseline gap-x-5 gap-y-1">
+ <Skeleton className="h-5 w-32" />
+ <Skeleton className="h-4 w-48" />
+ <Skeleton className="h-4 w-24" />
+ </div>
+ <div className="space-y-2.5">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-8 w-full rounded-[4px]" />
+ ))}
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/positional/page.tsx b/apps/web/src/app/stats/team/[teamId]/positional/page.tsx
index b1fee6b00..56c36e9d0 100644
--- a/apps/web/src/app/stats/team/[teamId]/positional/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/positional/page.tsx
@@ -11,17 +11,32 @@ import {
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { PositionalSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/positional"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<PositionalSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/positional"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/simulator/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/simulator/loading-skeleton.tsx
new file mode 100644
index 000000000..b49f5982e
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/simulator/loading-skeleton.tsx
@@ -0,0 +1,108 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SimulatorSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <div className="grid gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="space-y-6 lg:col-span-7">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+
+ <div className="space-y-6">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-32" />
+ <Skeleton className="h-3 w-64" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="h-3 w-60" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-3 w-56" />
+ <Skeleton className="h-10 w-full rounded-md" />
+ </div>
+
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-36" />
+ <Skeleton className="h-3 w-64" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-40" />
+ <Skeleton className="h-3 w-64" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div className="space-y-6 lg:col-span-5">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-72" />
+ </div>
+
+ <div className="flex items-baseline gap-3">
+ <Skeleton className="h-12 w-24" />
+ <div className="space-y-1">
+ <Skeleton className="h-5 w-16 rounded-sm" />
+ <Skeleton className="h-3 w-32" />
+ </div>
+ </div>
+
+ <div className="space-y-3">
+ <Skeleton className="h-2.5 w-28" />
+ <div className="space-y-1.5">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="flex items-center gap-2 rounded-sm px-2 py-1.5"
+ >
+ <Skeleton className="h-4 w-28 shrink-0" />
+ <Skeleton className="h-1.5 flex-1 rounded-full" />
+ <Skeleton className="h-4 w-14" />
+ </div>
+ ))}
+ </div>
+ <Skeleton className="h-3 w-48" />
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/simulator/page.tsx b/apps/web/src/app/stats/team/[teamId]/simulator/page.tsx
index bef23ac69..ad73f836c 100644
--- a/apps/web/src/app/stats/team/[teamId]/simulator/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/simulator/page.tsx
@@ -5,17 +5,32 @@ import { TeamPredictionService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { SimulatorSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/simulator"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<SimulatorSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/simulator"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/swaps/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/swaps/loading-skeleton.tsx
new file mode 100644
index 000000000..ebe69c4f8
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/swaps/loading-skeleton.tsx
@@ -0,0 +1,90 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function SwapsSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="border-border grid gap-x-6 gap-y-6 divide-y divide-[var(--border)] border-y py-4 md:grid-cols-2 md:divide-x md:divide-y-0 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-2 md:px-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-8 w-24" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <Skeleton className="h-[280px] w-full" />
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ </div>
+ <div className="grid gap-x-8 gap-y-6 md:grid-cols-2">
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-3">
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="h-[200px] w-full" />
+ <div className="border-border grid grid-cols-3 divide-x divide-y divide-[var(--border)] border-y lg:divide-y-0">
+ {["x", "y", "z"].map((j) => (
+ <div key={j} className="flex flex-col gap-1 px-3 py-2">
+ <Skeleton className="h-2 w-12" />
+ <Skeleton className="h-5 w-16" />
+ <Skeleton className="h-2.5 w-10" />
+ </div>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <Skeleton className="h-[264px] w-full" />
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-8 w-full" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/swaps/page.tsx b/apps/web/src/app/stats/team/[teamId]/swaps/page.tsx
index d852f8f6a..651a0a51f 100644
--- a/apps/web/src/app/stats/team/[teamId]/swaps/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/swaps/page.tsx
@@ -9,17 +9,32 @@ import { AppRuntime } from "@/data/runtime";
import { TeamHeroSwapService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { SwapsSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/swaps"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<SwapsSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/swaps"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/teamfights/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/teamfights/loading-skeleton.tsx
new file mode 100644
index 000000000..9f764fdf8
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/teamfights/loading-skeleton.tsx
@@ -0,0 +1,110 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TeamfightsSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <dl className="border-border grid grid-cols-1 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-3 lg:divide-y-0">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </dl>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <dl className="border-border grid grid-cols-1 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-3 lg:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-4">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </dl>
+ </section>
+
+ <section className="space-y-4">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="grid gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="lg:col-span-7">
+ <dl className="grid grid-cols-1 gap-x-8 gap-y-5 sm:grid-cols-2">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="space-y-1">
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-3 w-32" />
+ </div>
+ ))}
+ </dl>
+ </div>
+ <div className="lg:col-span-5">
+ <Skeleton className="mb-3 h-2.5 w-28" />
+ <Skeleton className="h-52 w-full rounded-md" />
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <Skeleton className="h-9 w-64 shrink-0" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <div className="bg-muted/30 flex gap-6 px-4 py-2">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-2.5 w-16" />
+ ))}
+ </div>
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b"].map((k) => (
+ <div key={k} className="flex items-center gap-4 px-4 py-3">
+ <Skeleton className="h-7 w-7 shrink-0 rounded" />
+ <div className="flex flex-col gap-1">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ <div className="ml-auto flex gap-8">
+ {["a", "b", "c", "d", "e"].map((j) => (
+ <Skeleton key={j} className="h-4 w-12" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/teamfights/page.tsx b/apps/web/src/app/stats/team/[teamId]/teamfights/page.tsx
index 08d1e020b..27b0efbf0 100644
--- a/apps/web/src/app/stats/team/[teamId]/teamfights/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/teamfights/page.tsx
@@ -9,17 +9,32 @@ import { TeamInitiationService } from "@/data/team/initiation-service";
import { TeamAbilityImpactService, TeamFightStatsService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { TeamfightsSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/teamfights"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<TeamfightsSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/teamfights"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/tendencies/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/tendencies/loading-skeleton.tsx
new file mode 100644
index 000000000..4baa84a00
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/tendencies/loading-skeleton.tsx
@@ -0,0 +1,65 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TendenciesSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="mt-0.5 h-7 w-20" />
+ <Skeleton className="mt-0.5 h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-6">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c"].map((k) => (
+ <article key={k} className="space-y-3 py-8 first:pt-0 last:pb-0">
+ <div className="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1">
+ <Skeleton className="h-5 w-36" />
+ <div className="flex items-baseline gap-4">
+ <Skeleton className="h-3 w-16" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ </div>
+
+ <div className="flex flex-wrap items-center gap-2">
+ {["a", "b", "c"].map((j) => (
+ <Skeleton key={j} className="h-6 w-28 rounded-sm" />
+ ))}
+ </div>
+
+ <Skeleton className="h-72 w-full rounded-md" />
+
+ <div className="border-border max-w-xl overflow-hidden rounded-md border">
+ <div className="bg-muted/30 px-4 py-2">
+ <Skeleton className="h-2.5 w-40" />
+ </div>
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e"].map((j) => (
+ <div
+ key={j}
+ className="flex items-center justify-between px-4 py-3"
+ >
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-4 w-10" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </article>
+ ))}
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/tendencies/page.tsx b/apps/web/src/app/stats/team/[teamId]/tendencies/page.tsx
index 6d761aef9..b58ae9f07 100644
--- a/apps/web/src/app/stats/team/[teamId]/tendencies/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/tendencies/page.tsx
@@ -6,17 +6,32 @@ import { loadCalibration } from "@/lib/map-calibration/load-calibration";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { TendenciesSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/tendencies"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<TendenciesSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/tendencies"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/trends/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/trends/loading-skeleton.tsx
new file mode 100644
index 000000000..3f87adf53
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/trends/loading-skeleton.tsx
@@ -0,0 +1,79 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TrendsSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <Skeleton className="h-9 w-32 shrink-0" />
+ </div>
+ <Skeleton className="h-4 w-72" />
+ <Skeleton className="h-[350px] w-full rounded-md" />
+ </section>
+
+ <div className="grid gap-4 md:grid-cols-2">
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-2 h-6 w-40" />
+ <Skeleton className="mt-1 h-4 w-60" />
+ </div>
+ <Skeleton className="h-9 w-32 shrink-0" />
+ </div>
+ <div className="flex flex-wrap items-center justify-between gap-3">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-5 w-12" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <div className="bg-muted/30 px-4 py-2">
+ <div className="flex gap-6">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-3 w-14" />
+ ))}
+ </div>
+ </div>
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="px-4 py-3">
+ <Skeleton className="h-4 w-full" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-6 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-2 h-6 w-44" />
+ </div>
+ <dl className="border-border grid grid-cols-1 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-3 sm:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-4">
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-7 w-12" />
+ <Skeleton className="h-3 w-24" />
+ </div>
+ ))}
+ </dl>
+ </section>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/trends/page.tsx b/apps/web/src/app/stats/team/[teamId]/trends/page.tsx
index d0c373088..13f4a71ea 100644
--- a/apps/web/src/app/stats/team/[teamId]/trends/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/trends/page.tsx
@@ -7,17 +7,32 @@ import { AppRuntime } from "@/data/runtime";
import { TeamTrendsService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { TrendsSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/trends"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<TrendsSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/trends"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/[teamId]/ultimates/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/ultimates/loading-skeleton.tsx
new file mode 100644
index 000000000..ea8290de5
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/ultimates/loading-skeleton.tsx
@@ -0,0 +1,164 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function UltimatesSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-6">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex items-center gap-4 px-4 py-3">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="ml-auto h-4 w-16" />
+ <Skeleton className="h-4 w-28" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-48 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-5">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="space-y-0.5">
+ {["a", "b", "c", "d", "e", "f", "g", "h"].map((k) => (
+ <div key={k} className="flex items-center gap-3 py-1.5">
+ <Skeleton className="h-6 w-40 shrink-0" />
+ <div className="flex flex-1 items-center gap-3">
+ <Skeleton className="h-2 flex-1 rounded-full" />
+ <Skeleton className="h-4 w-16 shrink-0" />
+ </div>
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-5">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <Skeleton className="h-56 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-6">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <dl className="border-border grid grid-cols-1 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-3 lg:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b"].map((k) => (
+ <div key={k} className="flex items-center gap-4 px-4 py-3">
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="ml-auto h-4 w-12" />
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-4 w-24" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-6">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <dl className="border-border grid grid-cols-1 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-3 sm:divide-y-0">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-2 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+ <Skeleton className="h-3 w-full rounded-full" />
+ <div className="space-y-0.5">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="flex items-center gap-3 py-1.5">
+ <Skeleton className="h-4 w-24 shrink-0" />
+ <Skeleton className="h-2 flex-1 rounded-full" />
+ <Skeleton className="h-4 w-20 shrink-0" />
+ </div>
+ ))}
+ </div>
+ <Skeleton className="h-48 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-6">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex items-center gap-4 px-4 py-3">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="ml-auto h-4 w-12" />
+ <Skeleton className="h-4 w-12" />
+ <Skeleton className="h-4 w-40" />
+ </div>
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-40 w-full rounded-md" />
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-col gap-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-6 w-48" />
+ <Skeleton className="h-4 w-72" />
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <Skeleton className="h-9 w-full rounded-none" />
+ <div className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div key={k} className="px-4 py-3">
+ <Skeleton className="h-5 w-full" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/ultimates/page.tsx b/apps/web/src/app/stats/team/[teamId]/ultimates/page.tsx
index dd38cf825..eb4ee44f6 100644
--- a/apps/web/src/app/stats/team/[teamId]/ultimates/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/ultimates/page.tsx
@@ -11,20 +11,36 @@ import { UltimateEconomyCard } from "@/components/stats/team/ultimate-economy-ca
import { AppRuntime } from "@/data/runtime";
import { TeamFightStatsService, TeamUltService } from "@/data/team";
import { ultimateImpactTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { getTempoBaselines } from "@/lib/tempo/read";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { UltimatesSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/ultimates"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<UltimatesSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/ultimates"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
@@ -58,7 +74,7 @@ export default async function Page(
{ concurrency: "unbounded" }
)
),
- ultimateImpactTool(),
+ getFlag(ultimateImpactTool),
]);
const baselines = await getTempoBaselines();
diff --git a/apps/web/src/app/stats/team/[teamId]/winrates/loading-skeleton.tsx b/apps/web/src/app/stats/team/[teamId]/winrates/loading-skeleton.tsx
new file mode 100644
index 000000000..707ca5936
--- /dev/null
+++ b/apps/web/src/app/stats/team/[teamId]/winrates/loading-skeleton.tsx
@@ -0,0 +1,121 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function WinratesSkeleton() {
+ return (
+ <div className="mt-8 space-y-12">
+ <dl className="border-border grid grid-cols-2 divide-x divide-y divide-[var(--border)] border-y sm:grid-cols-2 lg:grid-cols-4 lg:divide-y-0">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="flex flex-col gap-1 px-4 py-3">
+ <Skeleton className="h-2.5 w-16" />
+ <Skeleton className="h-7 w-20" />
+ <Skeleton className="h-3 w-12" />
+ </div>
+ ))}
+ </dl>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ </div>
+ <div className="grid gap-6 sm:grid-cols-[1fr_auto_1fr] sm:items-start">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-4 w-56" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+ <div className="hidden items-center self-stretch sm:flex">
+ <Skeleton className="h-3 w-6" />
+ </div>
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-4 w-56" />
+ <div className="border-border flex flex-wrap gap-2 rounded-md border p-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-11 w-11 rounded-md" />
+ ))}
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ </div>
+ <div className="grid gap-x-10 gap-y-8 lg:grid-cols-12">
+ <div className="space-y-3 lg:col-span-5">
+ <div className="flex items-baseline gap-3">
+ <Skeleton className="h-14 w-28" />
+ <div className="space-y-1">
+ <Skeleton className="h-5 w-16 rounded-sm" />
+ <Skeleton className="h-3 w-20" />
+ </div>
+ </div>
+ </div>
+ <div className="lg:col-span-7">
+ <Skeleton className="h-[300px] w-full rounded-md" />
+ </div>
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ </div>
+ <div className="border-border overflow-hidden rounded-md border">
+ <div className="bg-muted/30 h-9 w-full" />
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <div
+ key={k}
+ className="border-border flex items-center gap-4 border-t px-4 py-3"
+ >
+ <Skeleton className="h-4 w-6" />
+ <div className="flex gap-1">
+ {["a", "b", "c", "d", "e"].map((j) => (
+ <Skeleton key={j} className="h-7 w-7 rounded" />
+ ))}
+ </div>
+ <Skeleton className="ml-auto h-4 w-12" />
+ <Skeleton className="h-4 w-10" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <section className="space-y-4">
+ <div className="flex flex-wrap items-end justify-between gap-x-6 gap-y-3">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ <Skeleton className="mt-1 h-4 w-80" />
+ </div>
+ </div>
+ <div className="border-border h-[420px] overflow-hidden rounded-md border">
+ <div className="bg-muted/30 h-9 w-full" />
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton
+ key={k}
+ className="border-border h-[52px] w-full rounded-none border-t"
+ />
+ ))}
+ </div>
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/[teamId]/winrates/page.tsx b/apps/web/src/app/stats/team/[teamId]/winrates/page.tsx
index 30a6de7c2..c3d5eeb3d 100644
--- a/apps/web/src/app/stats/team/[teamId]/winrates/page.tsx
+++ b/apps/web/src/app/stats/team/[teamId]/winrates/page.tsx
@@ -4,17 +4,32 @@ import { AppRuntime } from "@/data/runtime";
import { TeamMatchupService } from "@/data/team";
import type { PagePropsWithLocale } from "@/types/next";
import { Effect } from "effect";
+import { Suspense } from "react";
+import { WinratesSkeleton } from "./loading-skeleton";
import { loadTeamStatsShell } from "../_lib/context";
export const maxDuration = 60;
-export default async function Page(
+export default function Page(
props: PagePropsWithLocale<"/stats/team/[teamId]/winrates"> & {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}
) {
- const params = await props.params;
- const searchParams = await props.searchParams;
+ return (
+ <Suspense fallback={<WinratesSkeleton />}>
+ <PageContent params={props.params} searchParams={props.searchParams} />
+ </Suspense>
+ );
+}
+
+async function PageContent({
+ params: paramsPromise,
+ searchParams: searchParamsPromise,
+}: PagePropsWithLocale<"/stats/team/[teamId]/winrates"> & {
+ searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+ const params = await paramsPromise;
+ const searchParams = await searchParamsPromise;
const shell = await loadTeamStatsShell(params.teamId, searchParams);
if (shell.gated) {
return <TeamStatsGate scrimCount={shell.totalScrimCount} />;
diff --git a/apps/web/src/app/stats/team/loading-skeleton.tsx b/apps/web/src/app/stats/team/loading-skeleton.tsx
new file mode 100644
index 000000000..0399bb376
--- /dev/null
+++ b/apps/web/src/app/stats/team/loading-skeleton.tsx
@@ -0,0 +1,72 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TeamSelectorSkeleton() {
+ return (
+ <div className="px-6 pt-8 pb-16 sm:px-10">
+ <header className="border-border border-b pb-6">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-3 h-8 w-44" />
+ <Skeleton className="mt-3 h-4 w-80" />
+ </header>
+
+ <div className="mt-2 divide-y divide-[var(--border)]">
+ <section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
+ <div>
+ <Skeleton className="h-2.5 w-28" />
+ <Skeleton className="mt-3 h-6 w-48" />
+ <Skeleton className="mt-3 h-3 w-32" />
+ <Skeleton className="mt-6 h-9 w-full max-w-md" />
+ </div>
+
+ <div className="space-y-6">
+ <dl className="border-border flex flex-wrap items-baseline gap-x-8 gap-y-2 border-b pb-4">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex flex-col gap-1.5">
+ <Skeleton className="h-2 w-16" />
+ <Skeleton className="h-5 w-20" />
+ </div>
+ ))}
+ </dl>
+
+ <div className="space-y-2">
+ <Skeleton className="h-2.5 w-32" />
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+
+ <div className="grid gap-6 sm:grid-cols-2">
+ {["a", "b"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-2.5 w-24" />
+ {["a", "b", "c"].map((j) => (
+ <Skeleton key={j} className="h-4 w-full" />
+ ))}
+ </div>
+ ))}
+ </div>
+ </div>
+ </section>
+
+ <section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
+ <div>
+ <Skeleton className="h-2.5 w-28" />
+ <Skeleton className="mt-3 h-6 w-48" />
+ <Skeleton className="mt-3 h-3 w-28" />
+ </div>
+
+ <dl className="divide-y divide-[var(--border)]">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="grid gap-x-6 gap-y-2 py-4 first:pt-0 last:pb-0 sm:grid-cols-[minmax(0,1fr)_minmax(0,2.5fr)]"
+ >
+ <Skeleton className="h-2.5 w-20" />
+ <Skeleton className="h-4 w-full" />
+ </div>
+ ))}
+ </dl>
+ </section>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/stats/team/page.tsx b/apps/web/src/app/stats/team/page.tsx
index b71100ec8..e4c536120 100644
--- a/apps/web/src/app/stats/team/page.tsx
+++ b/apps/web/src/app/stats/team/page.tsx
@@ -1,10 +1,12 @@
import { TeamSelector } from "@/components/stats/team/selector";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import prisma from "@/lib/prisma";
import { Effect } from "effect";
import { redirect } from "next/navigation";
+import { type ReactNode, Suspense } from "react";
const SURFACES: { label: string; summary: string }[] = [
{
@@ -39,22 +41,10 @@ const SURFACES: { label: string; summary: string }[] = [
},
];
-export default async function TeamStatsPage() {
- const session = await auth();
- const user = await AppRuntime.runPromise(
- UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user.email)))
- );
- if (!user) redirect("/sign-in");
-
- const teams = await prisma.team.findMany({
- where: {
- users: {
- some: { id: user.id },
- },
- },
- orderBy: { createdAt: "asc" },
- });
-
+// Static shell: everything on this page is static copy except the team list,
+// so only the selection section streams — its fallback renders the same
+// section with skeletons in the two data slots (selector, team count).
+export default function TeamStatsPage() {
return (
<div className="px-6 pt-8 pb-16 sm:px-10">
<header className="border-border border-b pb-6">
@@ -71,81 +61,16 @@ export default async function TeamStatsPage() {
</header>
<div className="mt-2 divide-y divide-[var(--border)]">
- <section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
- <div>
- <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
- Selection · Start here
- </p>
- <h2 className="mt-3 text-2xl font-semibold tracking-tight">
- Which team to read?
- </h2>
- <p className="text-muted-foreground mt-3 font-mono text-xs tracking-wider">
- Only teams you're a member of.
- </p>
-
- <div className="mt-6 max-w-md">
- <TeamSelector teams={teams} />
- </div>
- </div>
-
- <div className="space-y-6">
- <dl className="border-border flex flex-wrap items-baseline gap-x-8 gap-y-2 border-b pb-4 font-mono">
- <div className="flex flex-col">
- <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
- Your teams
- </dt>
- <dd className="text-lg font-medium tabular-nums">
- {teams.length}
- </dd>
- </div>
- <div className="flex flex-col">
- <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
- Surfaces
- </dt>
- <dd className="text-lg font-medium tabular-nums">6</dd>
- </div>
- <div className="flex flex-col">
- <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
- Refresh
- </dt>
- <dd className="text-lg font-medium">As scrims upload</dd>
- </div>
- </dl>
-
- <div>
- <p className="text-muted-foreground font-mono text-[11px] tracking-[0.14em] uppercase">
- What you're reading
- </p>
- <p className="text-foreground mt-2 text-sm leading-relaxed">
- Aggregations across every scrim a team has uploaded. Player
- performance rolls up into role splits, hero pools, win rate
- trends, and a fight-by-fight breakdown of how the team wins or
- loses team fights.
- </p>
- </div>
-
- <div className="grid gap-6 sm:grid-cols-2">
- <BulletGroup
- label="Reaches for"
- tone="foreground"
- items={[
- "Team-level patterns players miss",
- "Practice priorities by map and mode",
- "Composition signal across scrims",
- ]}
- />
- <BulletGroup
- label="Doesn't capture"
- tone="muted"
- items={[
- "Opponent strength",
- "Tournament-tier matchups",
- "Hero-specific peer comparison (see CSR)",
- ]}
- />
- </div>
- </div>
- </section>
+ <Suspense
+ fallback={
+ <SelectionSection
+ selector={<Skeleton className="h-9 w-full" />}
+ teamCount={<Skeleton className="h-5 w-8" />}
+ />
+ }
+ >
+ <SelectionSectionContent />
+ </Suspense>
<section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
<div>
@@ -181,6 +106,112 @@ export default async function TeamStatsPage() {
);
}
+async function SelectionSectionContent() {
+ const session = await auth();
+ const user = await AppRuntime.runPromise(
+ UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user.email)))
+ );
+ if (!user) redirect("/sign-in");
+
+ const teams = await prisma.team.findMany({
+ where: {
+ users: {
+ some: { id: user.id },
+ },
+ },
+ orderBy: { createdAt: "asc" },
+ });
+
+ return (
+ <SelectionSection
+ selector={<TeamSelector teams={teams} />}
+ teamCount={teams.length}
+ />
+ );
+}
+
+function SelectionSection({
+ selector,
+ teamCount,
+}: {
+ selector: ReactNode;
+ teamCount: ReactNode;
+}) {
+ return (
+ <section className="grid gap-x-10 gap-y-6 py-10 sm:py-12 lg:grid-cols-[minmax(0,5fr)_minmax(0,7fr)]">
+ <div>
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.16em] uppercase">
+ Selection · Start here
+ </p>
+ <h2 className="mt-3 text-2xl font-semibold tracking-tight">
+ Which team to read?
+ </h2>
+ <p className="text-muted-foreground mt-3 font-mono text-xs tracking-wider">
+ Only teams you're a member of.
+ </p>
+
+ <div className="mt-6 max-w-md">{selector}</div>
+ </div>
+
+ <div className="space-y-6">
+ <dl className="border-border flex flex-wrap items-baseline gap-x-8 gap-y-2 border-b pb-4 font-mono">
+ <div className="flex flex-col">
+ <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
+ Your teams
+ </dt>
+ <dd className="text-lg font-medium tabular-nums">{teamCount}</dd>
+ </div>
+ <div className="flex flex-col">
+ <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
+ Surfaces
+ </dt>
+ <dd className="text-lg font-medium tabular-nums">6</dd>
+ </div>
+ <div className="flex flex-col">
+ <dt className="text-muted-foreground text-[10px] tracking-[0.18em] uppercase">
+ Refresh
+ </dt>
+ <dd className="text-lg font-medium">As scrims upload</dd>
+ </div>
+ </dl>
+
+ <div>
+ <p className="text-muted-foreground font-mono text-[11px] tracking-[0.14em] uppercase">
+ What you're reading
+ </p>
+ <p className="text-foreground mt-2 text-sm leading-relaxed">
+ Aggregations across every scrim a team has uploaded. Player
+ performance rolls up into role splits, hero pools, win rate trends,
+ and a fight-by-fight breakdown of how the team wins or loses team
+ fights.
+ </p>
+ </div>
+
+ <div className="grid gap-6 sm:grid-cols-2">
+ <BulletGroup
+ label="Reaches for"
+ tone="foreground"
+ items={[
+ "Team-level patterns players miss",
+ "Practice priorities by map and mode",
+ "Composition signal across scrims",
+ ]}
+ />
+ <BulletGroup
+ label="Doesn't capture"
+ tone="muted"
+ items={[
+ "Opponent strength",
+ "Tournament-tier matchups",
+ "Hero-specific peer comparison (see CSR)",
+ ]}
+ />
+ </div>
+ </div>
+ </section>
+ );
+}
+
function BulletGroup({
label,
items,
diff --git a/apps/web/src/app/team/[teamId]/(app)/availability/loading-skeleton.tsx b/apps/web/src/app/team/[teamId]/(app)/availability/loading-skeleton.tsx
new file mode 100644
index 000000000..f6d79681b
--- /dev/null
+++ b/apps/web/src/app/team/[teamId]/(app)/availability/loading-skeleton.tsx
@@ -0,0 +1,38 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AvailabilityIndexSkeleton() {
+ return (
+ <div className="mx-auto max-w-4xl space-y-6 p-8">
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-8 w-64" />
+ <Skeleton className="h-9 w-24 rounded-md" />
+ </div>
+
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex flex-col space-y-1.5 p-6">
+ <Skeleton className="h-5 w-56" />
+ </div>
+ <div className="space-y-4 p-6 pt-0">
+ <Skeleton className="h-4 w-40" />
+ <Skeleton className="h-9 w-28 rounded-md" />
+ </div>
+ </div>
+
+ <div className="rounded-lg border shadow-sm">
+ <div className="flex flex-col space-y-1.5 p-6">
+ <Skeleton className="h-5 w-32" />
+ </div>
+ <div className="p-6 pt-0">
+ <ul className="divide-y">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <li key={k} className="flex items-center justify-between py-2">
+ <Skeleton className="h-4 w-64" />
+ <Skeleton className="h-4 w-10" />
+ </li>
+ ))}
+ </ul>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/[teamId]/(app)/availability/page.tsx b/apps/web/src/app/team/[teamId]/(app)/availability/page.tsx
index 0bd7726cc..201c79f12 100644
--- a/apps/web/src/app/team/[teamId]/(app)/availability/page.tsx
+++ b/apps/web/src/app/team/[teamId]/(app)/availability/page.tsx
@@ -2,21 +2,32 @@ import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { isTeamOwnerOrManager } from "@/lib/auth";
import { weekEndInTz, weekStartInTz } from "@/lib/availability/tz";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { revalidatePath } from "next/cache";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getFormatter, getTranslations } from "next-intl/server";
import type { Metadata } from "next";
+import { Suspense } from "react";
+import { AvailabilityIndexSkeleton } from "./loading-skeleton";
type PageProps = { params: Promise<{ teamId: string }> };
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("availability.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("availability.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function AvailabilityIndexPage({ params }: PageProps) {
+export default function AvailabilityIndexPage(props: PageProps) {
+ return (
+ <Suspense fallback={<AvailabilityIndexSkeleton />}>
+ <AvailabilityIndexPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function AvailabilityIndexPageContent({ params }: PageProps) {
const { teamId: raw } = await params;
const teamId = parseInt(raw);
if (!Number.isFinite(teamId)) notFound();
diff --git a/apps/web/src/app/team/[teamId]/(app)/availability/settings/loading-skeleton.tsx b/apps/web/src/app/team/[teamId]/(app)/availability/settings/loading-skeleton.tsx
new file mode 100644
index 000000000..82e3c4b06
--- /dev/null
+++ b/apps/web/src/app/team/[teamId]/(app)/availability/settings/loading-skeleton.tsx
@@ -0,0 +1,53 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AvailabilitySettingsSkeleton() {
+ return (
+ <div className="mx-auto max-w-3xl space-y-6 p-8">
+ <div className="space-y-1.5">
+ <Skeleton className="h-7 w-56" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+
+ <div className="space-y-6">
+ <div className="grid gap-4 sm:grid-cols-2">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-9 w-full" />
+ </div>
+ ))}
+ </div>
+
+ <div className="space-y-4 border-t pt-6">
+ <div className="flex items-center justify-between">
+ <div className="space-y-1">
+ <Skeleton className="h-4 w-36" />
+ <Skeleton className="h-3 w-64" />
+ </div>
+ <Skeleton className="h-6 w-11 rounded-full" />
+ </div>
+
+ <div className="grid gap-4 sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-9 w-full" />
+ </div>
+ ))}
+ </div>
+
+ <div className="grid gap-4 sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-9 w-full" />
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <Skeleton className="h-9 w-20" />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/[teamId]/(app)/availability/settings/page.tsx b/apps/web/src/app/team/[teamId]/(app)/availability/settings/page.tsx
index bde11d063..a576100fa 100644
--- a/apps/web/src/app/team/[teamId]/(app)/availability/settings/page.tsx
+++ b/apps/web/src/app/team/[teamId]/(app)/availability/settings/page.tsx
@@ -1,18 +1,29 @@
import { AvailabilitySettingsForm } from "@/components/availability/availability-settings-form";
import { isTeamOwnerOrManager } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { notFound, redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import type { Metadata } from "next";
+import { Suspense } from "react";
+import { AvailabilitySettingsSkeleton } from "./loading-skeleton";
type PageProps = { params: Promise<{ teamId: string }> };
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("availability.settingsPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("availability.settingsPage.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function AvailabilitySettingsPage({ params }: PageProps) {
+export default function AvailabilitySettingsPage(props: PageProps) {
+ return (
+ <Suspense fallback={<AvailabilitySettingsSkeleton />}>
+ <AvailabilitySettingsPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function AvailabilitySettingsPageContent({ params }: PageProps) {
const { teamId: raw } = await params;
const teamId = parseInt(raw);
if (!Number.isFinite(teamId)) notFound();
diff --git a/apps/web/src/app/team/[teamId]/(app)/layout.tsx b/apps/web/src/app/team/[teamId]/(app)/layout.tsx
index d5414604d..455c1d156 100644
--- a/apps/web/src/app/team/[teamId]/(app)/layout.tsx
+++ b/apps/web/src/app/team/[teamId]/(app)/layout.tsx
@@ -1,18 +1,24 @@
import { NoAuthCard } from "@/components/auth/no-auth";
import { DashboardLayout } from "@/components/dashboard-layout";
import { isAuthedToViewTeam } from "@/lib/auth";
+import type { ReactNode } from "react";
-export default async function TeamLayout(props: LayoutProps<"/team/[teamId]">) {
- const params = await props.params;
-
- const { children } = props;
-
- const id = parseInt(params.teamId);
- const isAuthed = await isAuthedToViewTeam(id);
-
- if (!isAuthed) {
- return NoAuthCard();
- }
+export default function TeamLayout(props: LayoutProps<"/team/[teamId]">) {
+ return (
+ <DashboardLayout>
+ <TeamAuthGate params={props.params}>{props.children}</TeamAuthGate>
+ </DashboardLayout>
+ );
+}
- return <DashboardLayout>{children}</DashboardLayout>;
+async function TeamAuthGate({
+ params,
+ children,
+}: {
+ params: LayoutProps<"/team/[teamId]">["params"];
+ children: ReactNode;
+}) {
+ const { teamId } = await params;
+ if (!(await isAuthedToViewTeam(parseInt(teamId)))) return <NoAuthCard />;
+ return children;
}
diff --git a/apps/web/src/app/team/[teamId]/(app)/loading-skeleton.tsx b/apps/web/src/app/team/[teamId]/(app)/loading-skeleton.tsx
new file mode 100644
index 000000000..c5edf9dc4
--- /dev/null
+++ b/apps/web/src/app/team/[teamId]/(app)/loading-skeleton.tsx
@@ -0,0 +1,69 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TeamDetailSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <div className="flex items-center justify-between">
+ <Skeleton className="h-9 w-48" />
+ </div>
+ <div className="space-y-4">
+ <div className="flex gap-1">
+ <Skeleton className="h-9 w-24 rounded-md" />
+ <Skeleton className="h-9 w-20 rounded-md" />
+ </div>
+ <div className="space-y-4">
+ <div className="rounded-xl border">
+ <div className="border-border flex flex-wrap items-start justify-between gap-4 border-b p-6">
+ <div className="space-y-2">
+ <Skeleton className="h-3 w-48" />
+ <Skeleton className="h-5 w-32" />
+ </div>
+ <div className="flex flex-col items-end gap-1">
+ <Skeleton className="h-9 w-24" />
+ <Skeleton className="h-3 w-36" />
+ </div>
+ </div>
+ <div className="space-y-3 p-6">
+ <Skeleton className="h-10 w-full" />
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-9 w-full" />
+ ))}
+ </div>
+ </div>
+ <Skeleton className="h-7 w-28" />
+ <div className="-m-2 flex flex-wrap">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="w-full p-2 md:w-1/2 xl:w-1/3">
+ <div className="overflow-hidden rounded-xl border pb-4">
+ <Skeleton className="aspect-[3/1] w-full rounded-none" />
+ <div className="relative px-6">
+ <Skeleton className="-mt-12 h-24 w-24 rounded-full" />
+ <div className="mt-4 space-y-2">
+ <Skeleton className="h-6 w-32" />
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-4 w-48 max-w-full" />
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ <div className="space-y-4 pt-12">
+ <Skeleton className="h-7 w-44" />
+ <div className="mt-6 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+ <div className="rounded-xl border p-4">
+ <div className="flex items-center gap-4">
+ <Skeleton className="h-20 w-20 shrink-0 rounded-full" />
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-24" />
+ <Skeleton className="h-4 w-16" />
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/[teamId]/(app)/page.tsx b/apps/web/src/app/team/[teamId]/(app)/page.tsx
index 871d61dce..28b26d892 100644
--- a/apps/web/src/app/team/[teamId]/(app)/page.tsx
+++ b/apps/web/src/app/team/[teamId]/(app)/page.tsx
@@ -15,8 +15,11 @@ import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { ScoutingService } from "@/data/scouting";
import { UserService } from "@/data/user";
+import { defaultLocale } from "@/i18n/config";
import { auth, isAuthedToViewTeam } from "@/lib/auth";
import { scoutingTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { computeTeamTsr } from "@/lib/tsr/team";
import type { PagePropsWithLocale } from "@/types/next";
@@ -24,12 +27,14 @@ import { $Enums } from "@/generated/prisma/browser";
import { Lock } from "lucide-react";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
+import { TeamDetailSkeleton } from "./loading-skeleton";
export async function generateMetadata(
props: PagePropsWithLocale<"/team/[teamId]">
): Promise<Metadata> {
const params = await props.params;
- const t = await getTranslations("teamPage.teamMetadata");
+ const t = getMetadataTranslations("teamPage.teamMetadata");
const teamId = Number(params.teamId);
const canViewTeam =
Number.isSafeInteger(teamId) &&
@@ -61,15 +66,25 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function Team(
- props: PagePropsWithLocale<"/team/[teamId]">
-) {
- const params = await props.params;
+export default function Team(props: PagePropsWithLocale<"/team/[teamId]">) {
+ return (
+ <Suspense fallback={<TeamDetailSkeleton />}>
+ <TeamContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function TeamContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/team/[teamId]">["params"];
+}) {
+ const params = await paramsPromise;
const t = await getTranslations("teamPage");
const session = await auth();
@@ -106,7 +121,7 @@ export default async function Team(
},
}),
prisma.teamManager.findMany({ where: { teamId } }),
- scoutingTool(),
+ getFlag(scoutingTool),
AppRuntime.runPromise(
ScoutingService.pipe(Effect.flatMap((svc) => svc.getScoutingTeams()))
),
diff --git a/apps/web/src/app/team/[teamId]/(app)/targets/loading-skeleton.tsx b/apps/web/src/app/team/[teamId]/(app)/targets/loading-skeleton.tsx
new file mode 100644
index 000000000..22d7b05b5
--- /dev/null
+++ b/apps/web/src/app/team/[teamId]/(app)/targets/loading-skeleton.tsx
@@ -0,0 +1,32 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TeamTargetsSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <Skeleton className="h-9 w-48" />
+ <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div
+ key={k}
+ className="border-border bg-card min-h-[120px] rounded-xl border p-4"
+ >
+ <div className="flex items-center gap-4">
+ <Skeleton className="h-12 w-12 shrink-0 rounded-full" />
+ <div className="min-w-0 flex-1 space-y-2">
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-4 w-28" />
+ <Skeleton className="h-5 w-16 rounded-full" />
+ </div>
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="h-5 w-14 rounded-full" />
+ <Skeleton className="h-2.5 w-2.5 rounded-full" />
+ </div>
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/[teamId]/(app)/targets/page.tsx b/apps/web/src/app/team/[teamId]/(app)/targets/page.tsx
index 741682a45..8a3c2213c 100644
--- a/apps/web/src/app/team/[teamId]/(app)/targets/page.tsx
+++ b/apps/web/src/app/team/[teamId]/(app)/targets/page.tsx
@@ -10,23 +10,34 @@ import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { RoleName } from "@/lib/target-stats";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
import { $Enums } from "@/generated/prisma/browser";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
+import { TeamTargetsSkeleton } from "./loading-skeleton";
type Props = {
params: Promise<{ teamId: string }>;
};
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("targets.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("targets.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function TeamTargetsPage(props: Props) {
+export default function TeamTargetsPage(props: Props) {
+ return (
+ <Suspense fallback={<TeamTargetsSkeleton />}>
+ <TeamTargetsPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function TeamTargetsPageContent(props: Props) {
const params = await props.params;
const teamId = parseInt(params.teamId);
const t = await getTranslations("targets");
diff --git a/apps/web/src/app/team/[teamId]/availability/[scheduleId]/loading-skeleton.tsx b/apps/web/src/app/team/[teamId]/availability/[scheduleId]/loading-skeleton.tsx
new file mode 100644
index 000000000..f53b9d920
--- /dev/null
+++ b/apps/web/src/app/team/[teamId]/availability/[scheduleId]/loading-skeleton.tsx
@@ -0,0 +1,55 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AvailabilityFillSkeleton() {
+ return (
+ <div className="mx-auto max-w-6xl space-y-6 p-6">
+ <header className="space-y-1">
+ <Skeleton className="h-7 w-64" />
+ <Skeleton className="h-4 w-48" />
+ </header>
+
+ <div className="grid items-end gap-3 sm:grid-cols-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="space-y-1.5">
+ <Skeleton className="h-4 w-20" />
+ <Skeleton className="h-9 w-full" />
+ </div>
+ ))}
+ </div>
+
+ <div className="grid gap-6 md:grid-cols-2">
+ <div className="space-y-4">
+ <Skeleton className="h-6 w-40" />
+ <Skeleton className="h-[26rem] w-full rounded-md" />
+ <div className="flex gap-2">
+ <Skeleton className="h-9 w-20" />
+ <Skeleton className="h-9 w-16" />
+ </div>
+ <Skeleton className="h-3 w-48" />
+ </div>
+
+ <div className="space-y-4">
+ <Skeleton className="h-6 w-52" />
+ <Skeleton className="h-[26rem] w-full rounded-md" />
+ <Skeleton className="h-8 w-full rounded-md" />
+ </div>
+ </div>
+
+ <div className="space-y-4 rounded-lg border p-6">
+ <div className="space-y-2">
+ <Skeleton className="h-6 w-56" />
+ <Skeleton className="h-4 w-80" />
+ </div>
+ <div className="grid gap-2 sm:grid-cols-2">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-4 w-full" />
+ ))}
+ </div>
+ <div className="flex gap-2">
+ <Skeleton className="h-9 w-24" />
+ <Skeleton className="h-9 w-28" />
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/[teamId]/availability/[scheduleId]/page.tsx b/apps/web/src/app/team/[teamId]/availability/[scheduleId]/page.tsx
index 36ac9f896..a2e97bce8 100644
--- a/apps/web/src/app/team/[teamId]/availability/[scheduleId]/page.tsx
+++ b/apps/web/src/app/team/[teamId]/availability/[scheduleId]/page.tsx
@@ -1,20 +1,30 @@
import { AvailabilityFillView } from "@/components/availability/availability-fill-view";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { AvailabilityFillSkeleton } from "./loading-skeleton";
type PageProps = {
params: Promise<{ teamId: string; scheduleId: string }>;
};
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("availability.fillView.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("availability.fillView.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function PublicFillPage({ params }: PageProps) {
+export default function PublicFillPage(props: PageProps) {
+ return (
+ <Suspense fallback={<AvailabilityFillSkeleton />}>
+ <PublicFillPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function PublicFillPageContent({ params }: PageProps) {
const { teamId: raw, scheduleId } = await params;
const teamId = parseInt(raw);
if (!Number.isFinite(teamId)) notFound();
diff --git a/apps/web/src/app/team/join/[token]/loading-skeleton.tsx b/apps/web/src/app/team/join/[token]/loading-skeleton.tsx
new file mode 100644
index 000000000..0b9e3a6ac
--- /dev/null
+++ b/apps/web/src/app/team/join/[token]/loading-skeleton.tsx
@@ -0,0 +1,15 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function JoinTokenSkeleton() {
+ return (
+ <div className="flex h-screen flex-col items-center justify-center">
+ <div className="h-48 w-full max-w-md space-y-4 rounded-lg border p-6">
+ <Skeleton className="h-6 w-48" />
+ <div className="space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/join/[token]/page.tsx b/apps/web/src/app/team/join/[token]/page.tsx
index fcb90d17f..7769f6fbd 100644
--- a/apps/web/src/app/team/join/[token]/page.tsx
+++ b/apps/web/src/app/team/join/[token]/page.tsx
@@ -3,11 +3,27 @@ import { Logger } from "@/lib/logger";
import prisma from "@/lib/prisma";
import type { PagePropsWithLocale } from "@/types/next";
import { redirect } from "next/navigation";
+import { Suspense, type ReactNode } from "react";
+import { JoinTokenSkeleton } from "./loading-skeleton";
-export default async function TokenPage(
+export default function TokenPage(
props: PagePropsWithLocale<"/team/join/[token]">
) {
- const params = await props.params;
+ return (
+ <Suspense fallback={<JoinTokenSkeleton />}>
+ <TokenPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function TokenPageContent({
+ params: paramsPromise,
+}: {
+ params: PagePropsWithLocale<"/team/join/[token]">["params"];
+}): Promise<ReactNode> {
+ // Every path ends in redirect() (typed `never`), so the function never
+ // actually returns a node — the annotation just lets it satisfy JSX typing.
+ const params = await paramsPromise;
const session = await auth();
const token = params.token;
diff --git a/apps/web/src/app/team/join/layout.tsx b/apps/web/src/app/team/join/layout.tsx
index a025b8e3c..5dfb125b4 100644
--- a/apps/web/src/app/team/join/layout.tsx
+++ b/apps/web/src/app/team/join/layout.tsx
@@ -1,9 +1,9 @@
import { DashboardLayout } from "@/components/dashboard-layout";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("teamPage.joinMetadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("teamPage.joinMetadata");
return { title: t("title"), description: t("description") };
}
diff --git a/apps/web/src/app/team/loading-skeleton.tsx b/apps/web/src/app/team/loading-skeleton.tsx
new file mode 100644
index 000000000..af2ee3fac
--- /dev/null
+++ b/apps/web/src/app/team/loading-skeleton.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function TeamPageSkeleton() {
+ return (
+ <div className="min-h-[90vh] flex-col md:flex">
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <div className="flex items-center justify-between space-y-2">
+ <Skeleton className="h-9 w-48" />
+ </div>
+ <div className="space-y-4">
+ <div className="inline-flex h-10 items-center gap-1 rounded-md p-1">
+ <Skeleton className="h-8 w-16 rounded-sm" />
+ <Skeleton className="h-8 w-14 rounded-sm" />
+ </div>
+ <div className="space-y-4">
+ <Skeleton className="h-10 w-full max-w-sm rounded-md" />
+ <div className="border-border grid grid-cols-1 gap-4 rounded-lg border p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="p-2">
+ <Skeleton className="h-36 w-full rounded-lg" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/team/page.tsx b/apps/web/src/app/team/page.tsx
index 0d2da155e..13c4dd353 100644
--- a/apps/web/src/app/team/page.tsx
+++ b/apps/web/src/app/team/page.tsx
@@ -2,23 +2,23 @@ import { TeamSearch } from "@/components/admin/team-search";
import { DashboardLayout } from "@/components/dashboard-layout";
import { EmptyTeamView } from "@/components/team/empty-team-view";
import { UserTeamsList } from "@/components/team/user-teams-list";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
+import { defaultLocale } from "@/i18n/config";
import { auth } from "@/lib/auth";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
-import type { PagePropsWithLocale } from "@/types/next";
import { $Enums } from "@/generated/prisma/browser";
import type { Metadata } from "next";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(
- props: PagePropsWithLocale<"/team">
-): Promise<Metadata> {
- const params = await props.params;
- const t = await getTranslations("teamPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("teamPage.metadata");
return {
title: t("title"),
description: t("description"),
@@ -35,12 +35,31 @@ export async function generateMetadata(
height: 630,
},
],
- locale: params.locale,
+ locale: defaultLocale,
},
};
}
-export default async function TeamPage() {
+// Static shell: DashboardLayout's chrome and the page frame prerender, and the
+// auth-derived teams content streams into ONE boundary whose fallback mirrors
+// the loaded heading/tabs/grid layout — so navigation shows a single stable
+// skeleton instead of a route loading.tsx plus in-page skeleton cascade. The
+// heading text depends on the user's role, so it lives in the content child.
+export default function TeamPage() {
+ return (
+ <DashboardLayout>
+ <div className="flex-col md:flex">
+ <div className="flex-1 space-y-4 p-8 pt-6">
+ <Suspense fallback={<TeamListSkeleton />}>
+ <TeamPageContent />
+ </Suspense>
+ </div>
+ </div>
+ </DashboardLayout>
+ );
+}
+
+async function TeamPageContent() {
const t = await getTranslations("teamPage");
const session = await auth();
@@ -60,36 +79,61 @@ export default async function TeamPage() {
userData?.role === $Enums.UserRole.ADMIN ||
userData?.role === $Enums.UserRole.MANAGER;
- const content = (
- <div className="flex-col md:flex">
- <div className="flex-1 space-y-4 p-8 pt-6">
- <div className="flex items-center justify-between space-y-2">
- <h2 className="text-3xl font-bold tracking-tight">
- {hasPerms ? t("manageTeams") : t("viewTeams")}
- </h2>
- </div>
- <Tabs defaultValue="teams" className="space-y-4">
- {hasPerms && (
- <TabsList>
- <TabsTrigger value="teams">{t("teams")}</TabsTrigger>
- <TabsTrigger value="admin">{t("admin")}</TabsTrigger>
- </TabsList>
+ return (
+ <>
+ <div className="flex items-center justify-between space-y-2">
+ <h2 className="text-3xl font-bold tracking-tight">
+ {hasPerms ? t("manageTeams") : t("viewTeams")}
+ </h2>
+ </div>
+ <Tabs defaultValue="teams" className="space-y-4">
+ {hasPerms && (
+ <TabsList>
+ <TabsTrigger value="teams">{t("teams")}</TabsTrigger>
+ <TabsTrigger value="admin">{t("admin")}</TabsTrigger>
+ </TabsList>
+ )}
+
+ <TabsContent value="teams" className="space-y-4">
+ {userTeams.length > 0 ? (
+ <UserTeamsList teams={userTeams} />
+ ) : (
+ <EmptyTeamView />
)}
+ </TabsContent>
+ <TabsContent value="admin" className="space-y-4">
+ <TeamSearch />
+ </TabsContent>
+ </Tabs>
+ </>
+ );
+}
- <TabsContent value="teams" className="space-y-4">
- {userTeams.length > 0 ? (
- <UserTeamsList teams={userTeams} />
- ) : (
- <EmptyTeamView />
- )}
- </TabsContent>
- <TabsContent value="admin" className="space-y-4">
- <TeamSearch />
- </TabsContent>
- </Tabs>
+// Mirrors the loaded content's pending layout (role-dependent heading row,
+// tab list, UserTeamsList's search input and card grid) so the streamed
+// content replaces this in place.
+function TeamListSkeleton() {
+ return (
+ <>
+ <div className="flex items-center justify-between space-y-2">
+ <Skeleton className="h-9 w-48" />
</div>
- </div>
+ <div className="space-y-4">
+ <div className="inline-flex h-10 items-center gap-1 rounded-md p-1">
+ <Skeleton className="h-8 w-16 rounded-sm" />
+ <Skeleton className="h-8 w-14 rounded-sm" />
+ </div>
+ <div className="space-y-4">
+ <Skeleton className="h-10 w-full max-w-sm rounded-md" />
+ <div className="border-border grid grid-cols-1 gap-4 rounded-lg border p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="p-2">
+ <Skeleton className="h-36 w-full rounded-lg" />
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ </>
);
-
- return <DashboardLayout>{content}</DashboardLayout>;
}
diff --git a/apps/web/src/app/terms-of-service/layout.tsx b/apps/web/src/app/terms-of-service/layout.tsx
index 2fa29cbd9..bd1c14463 100644
--- a/apps/web/src/app/terms-of-service/layout.tsx
+++ b/apps/web/src/app/terms-of-service/layout.tsx
@@ -1,14 +1,11 @@
import { Footer } from "@/components/footer";
import { Header } from "@/components/header";
+import { defaultLocale } from "@/i18n/config";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getLocale, getTranslations } from "next-intl/server";
-export async function generateMetadata(): Promise<Metadata> {
- const locale = await getLocale();
- const t = await getTranslations({
- locale,
- namespace: "termsPage.metadata",
- });
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("termsPage.metadata");
return {
title: t("title"),
@@ -27,7 +24,7 @@ export async function generateMetadata(): Promise<Metadata> {
height: 630,
},
],
- locale,
+ locale: defaultLocale,
},
};
}
diff --git a/apps/web/src/app/terms-of-service/page.tsx b/apps/web/src/app/terms-of-service/page.tsx
index e63ab9ada..1e94ace8d 100644
--- a/apps/web/src/app/terms-of-service/page.tsx
+++ b/apps/web/src/app/terms-of-service/page.tsx
@@ -1,116 +1,244 @@
import { Link } from "@/components/ui/link";
+import { Skeleton } from "@/components/ui/skeleton";
import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
-export default async function TermsPage() {
- const t = await getTranslations("termsPage");
-
+// Static shell: the page frame prerenders and the locale-dependent legal text
+// streams into ONE boundary whose fallback mirrors the document's section
+// layout. The title stays in the content child because it must render in the
+// request locale.
+export default function TermsPage() {
return (
<div className="bg-white px-6 py-32 lg:px-8 dark:bg-black">
<div className="mx-auto max-w-3xl text-base leading-7 text-gray-700 dark:text-gray-200">
- <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-200">
- {t("termsOfService.title")}
- </h1>
- <p className="mt-6 text-xl leading-8">
- {t("termsOfService.description")}
- </p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("acceptance.title")}
- </h2>
- <p className="mt-6">{t("acceptance.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("openSource.title")}
- </h2>
- <p className="mt-6">{t("openSource.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("openSource.list1")}</li>
- <li>{t("openSource.list2")}</li>
- <li>{t("openSource.list3")}</li>
- </ul>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("useOfService.title")}
- </h2>
- <p className="mt-6">{t("useOfService.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("useOfService.list1")}</li>
- <li>{t("useOfService.list2")}</li>
- <li>{t("useOfService.list3")}</li>
- <li>{t("useOfService.list4")}</li>
- </ul>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("userAccounts.title")}
- </h2>
- <p className="mt-6">{t("userAccounts.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("userAccounts.list1")}</li>
- <li>{t("userAccounts.list2")}</li>
- <li>{t("userAccounts.list3")}</li>
- </ul>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("prohibitedUses.title")}
- </h2>
- <p className="mt-6">{t("prohibitedUses.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("prohibitedUses.list1")}</li>
- <li>{t("prohibitedUses.list2")}</li>
- <li>{t("prohibitedUses.list3")}</li>
- <li>{t("prohibitedUses.list4")}</li>
- <li>{t("prohibitedUses.list5")}</li>
- <li>{t("prohibitedUses.list6")}</li>
- </ul>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("abuseAndMisuse.title")}
- </h2>
- <p className="mt-6">{t("abuseAndMisuse.description")}</p>
- <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
- <li>{t("abuseAndMisuse.list1")}</li>
- <li>{t("abuseAndMisuse.list2")}</li>
- <li>{t("abuseAndMisuse.list3")}</li>
- </ul>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("disclaimers.title")}
- </h2>
- <p className="mt-6">{t("disclaimers.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("limitationOfLiability.title")}
- </h2>
- <p className="mt-6">{t("limitationOfLiability.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("termination.title")}
- </h2>
- <p className="mt-6">{t("termination.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("governingLaw.title")}
- </h2>
- <p className="mt-6">{t("governingLaw.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("changesToTerms.title")}
- </h2>
- <p className="mt-6">{t("changesToTerms.description")}</p>
-
- <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
- {t("contactUs.title")}
- </h2>
- <p className="mt-6">
- {t.rich("contactUs.description", {
- link: (chunks) => (
- <Link href="mailto:legal@lux.dev" className="text-blue-500">
- {chunks}
- </Link>
- ),
- })}
- </p>
+ <Suspense fallback={<TermsSkeleton />}>
+ <TermsContent />
+ </Suspense>
</div>
</div>
);
}
+
+async function TermsContent() {
+ const t = await getTranslations("termsPage");
+
+ return (
+ <>
+ <h1 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-200">
+ {t("termsOfService.title")}
+ </h1>
+ <p className="mt-6 text-xl leading-8">
+ {t("termsOfService.description")}
+ </p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("acceptance.title")}
+ </h2>
+ <p className="mt-6">{t("acceptance.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("openSource.title")}
+ </h2>
+ <p className="mt-6">{t("openSource.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("openSource.list1")}</li>
+ <li>{t("openSource.list2")}</li>
+ <li>{t("openSource.list3")}</li>
+ </ul>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("useOfService.title")}
+ </h2>
+ <p className="mt-6">{t("useOfService.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("useOfService.list1")}</li>
+ <li>{t("useOfService.list2")}</li>
+ <li>{t("useOfService.list3")}</li>
+ <li>{t("useOfService.list4")}</li>
+ </ul>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("userAccounts.title")}
+ </h2>
+ <p className="mt-6">{t("userAccounts.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("userAccounts.list1")}</li>
+ <li>{t("userAccounts.list2")}</li>
+ <li>{t("userAccounts.list3")}</li>
+ </ul>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("prohibitedUses.title")}
+ </h2>
+ <p className="mt-6">{t("prohibitedUses.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("prohibitedUses.list1")}</li>
+ <li>{t("prohibitedUses.list2")}</li>
+ <li>{t("prohibitedUses.list3")}</li>
+ <li>{t("prohibitedUses.list4")}</li>
+ <li>{t("prohibitedUses.list5")}</li>
+ <li>{t("prohibitedUses.list6")}</li>
+ </ul>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("abuseAndMisuse.title")}
+ </h2>
+ <p className="mt-6">{t("abuseAndMisuse.description")}</p>
+ <ul className="mt-8 max-w-xl list-outside list-disc space-y-2 pl-8 text-gray-600 dark:text-gray-300">
+ <li>{t("abuseAndMisuse.list1")}</li>
+ <li>{t("abuseAndMisuse.list2")}</li>
+ <li>{t("abuseAndMisuse.list3")}</li>
+ </ul>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("disclaimers.title")}
+ </h2>
+ <p className="mt-6">{t("disclaimers.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("limitationOfLiability.title")}
+ </h2>
+ <p className="mt-6">{t("limitationOfLiability.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("termination.title")}
+ </h2>
+ <p className="mt-6">{t("termination.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("governingLaw.title")}
+ </h2>
+ <p className="mt-6">{t("governingLaw.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("changesToTerms.title")}
+ </h2>
+ <p className="mt-6">{t("changesToTerms.description")}</p>
+
+ <h2 className="mt-16 text-2xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
+ {t("contactUs.title")}
+ </h2>
+ <p className="mt-6">
+ {t.rich("contactUs.description", {
+ link: (chunks) => (
+ <Link href="mailto:legal@lux.dev" className="text-blue-500">
+ {chunks}
+ </Link>
+ ),
+ })}
+ </p>
+ </>
+ );
+}
+
+// Mirrors the document's section layout (title, intro, then one heading +
+// paragraph block per section with lists of 3/4/3/6/3 items) so the streamed
+// content replaces this in place with no jump.
+function TermsSkeleton() {
+ return (
+ <>
+ <Skeleton className="mt-2 h-10 w-72 sm:w-96" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-5 w-full" />
+ <Skeleton className="h-5 w-5/6" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-56" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-48" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+ <div className="mt-8 space-y-2 pl-8">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-4 w-3/4" />
+ ))}
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-52" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+ <div className="mt-8 space-y-2 pl-8">
+ {["a", "b", "c", "d"].map((k) => (
+ <Skeleton key={k} className="h-4 w-3/4" />
+ ))}
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-44" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/5" />
+ </div>
+ <div className="mt-8 space-y-2 pl-8">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-4 w-3/4" />
+ ))}
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-56" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+ <div className="mt-8 space-y-2 pl-8">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <Skeleton key={k} className="h-4 w-3/4" />
+ ))}
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-52" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/5" />
+ </div>
+ <div className="mt-8 space-y-2 pl-8">
+ {["a", "b", "c"].map((k) => (
+ <Skeleton key={k} className="h-4 w-3/4" />
+ ))}
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-40" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-64" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-36" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/4" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-44" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-3/5" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-52" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-4/5" />
+ </div>
+
+ <Skeleton className="mt-16 h-7 w-36" />
+ <div className="mt-6 space-y-2">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-2/3" />
+ </div>
+ </>
+ );
+}
diff --git a/apps/web/src/app/tournaments/[id]/match/[matchId]/page.tsx b/apps/web/src/app/tournaments/[id]/match/[matchId]/page.tsx
index 351084fd8..421e5a41e 100644
--- a/apps/web/src/app/tournaments/[id]/match/[matchId]/page.tsx
+++ b/apps/web/src/app/tournaments/[id]/match/[matchId]/page.tsx
@@ -3,16 +3,19 @@ import { MatchMapsPanel } from "@/components/tournament/match/match-maps-panel";
import { TeamPanel } from "@/components/tournament/match/team-panel";
import { TournamentAddMapCard } from "@/components/tournament/match/tournament-add-map-card";
import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { TournamentService } from "@/data/tournament";
import { auth, canViewTournament, getCurrentUser } from "@/lib/auth";
import { tournament } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { ArrowLeft } from "lucide-react";
import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(props: {
params: Promise<{ id: string; matchId: string }>;
@@ -40,13 +43,32 @@ export async function generateMetadata(props: {
};
}
-export default async function TournamentMatchPage(props: {
+// Static shell: the dashboard chrome and page container prerender, and the
+// match content (flag, params, DB reads, auth) streams into ONE boundary
+// whose fallback mirrors the loaded header + panel grid.
+export default function TournamentMatchPage(props: {
params: Promise<{ id: string; matchId: string }>;
}) {
- const tournamentEnabled = await tournament();
+ return (
+ <DashboardLayout>
+ <div className="flex-1 space-y-6 p-4 pt-6 md:p-8">
+ <Suspense fallback={<MatchSkeleton />}>
+ <TournamentMatchPageContent params={props.params} />
+ </Suspense>
+ </div>
+ </DashboardLayout>
+ );
+}
+
+async function TournamentMatchPageContent({
+ params: paramsPromise,
+}: {
+ params: Promise<{ id: string; matchId: string }>;
+}) {
+ const tournamentEnabled = await getFlag(tournament);
if (!tournamentEnabled) notFound();
- const params = await props.params;
+ const params = await paramsPromise;
const tournamentId = Number(params.id);
const matchId = Number(params.matchId);
if (Number.isNaN(tournamentId) || Number.isNaN(matchId)) notFound();
@@ -82,79 +104,133 @@ export default async function TournamentMatchPage(props: {
const bestOf = match.round.bestOf ?? match.tournament.bestOf;
return (
- <DashboardLayout>
- <div className="flex-1 space-y-6 p-4 pt-6 md:p-8">
- <div className="flex items-center gap-4">
- <Link
- href={`/tournaments/${tournamentId}` as Route}
- className="text-muted-foreground hover:text-foreground transition-colors"
- >
- <ArrowLeft className="size-5" />
- </Link>
- <div>
- <div className="flex items-center gap-2">
- <h2 className="text-xl font-bold">
- {match.tournament.name} — {match.round.roundName}
- </h2>
- <Badge
- variant={
- match.status === "COMPLETED"
- ? "secondary"
- : match.status === "ONGOING"
- ? "default"
- : "outline"
- }
- >
- {match.status}
- </Badge>
- </div>
- <p className="text-muted-foreground text-sm">Best of {bestOf}</p>
+ <>
+ <div className="flex items-center gap-4">
+ <Link
+ href={`/tournaments/${tournamentId}` as Route}
+ className="text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <ArrowLeft className="size-5" />
+ </Link>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-xl font-bold">
+ {match.tournament.name} — {match.round.roundName}
+ </h2>
+ <Badge
+ variant={
+ match.status === "COMPLETED"
+ ? "secondary"
+ : match.status === "ONGOING"
+ ? "default"
+ : "outline"
+ }
+ >
+ {match.status}
+ </Badge>
</div>
+ <p className="text-muted-foreground text-sm">Best of {bestOf}</p>
</div>
+ </div>
- <div className="grid gap-6 md:grid-cols-[1fr_2fr_1fr]">
- <div className="flex items-center justify-center rounded-lg border p-4">
- <TeamPanel
- name={team1Name}
- image={team1Image}
- score={match.team1Score}
- isWinner={team1IsWinner}
- isLoser={team2IsWinner}
- />
- </div>
+ <div className="grid gap-6 md:grid-cols-[1fr_2fr_1fr]">
+ <div className="flex items-center justify-center rounded-lg border p-4">
+ <TeamPanel
+ name={team1Name}
+ image={team1Image}
+ score={match.team1Score}
+ isWinner={team1IsWinner}
+ isLoser={team2IsWinner}
+ />
+ </div>
- <div className="space-y-4">
- <MatchMapsPanel
- tournamentId={tournamentId}
+ <div className="space-y-4">
+ <MatchMapsPanel
+ tournamentId={tournamentId}
+ matchId={matchId}
+ maps={match.maps}
+ team1Name={team1Name}
+ team2Name={team2Name}
+ scrimId={match.scrimId}
+ canDelete={canUpload}
+ />
+ {canUpload && !isCompleted && (
+ <TournamentAddMapCard
matchId={matchId}
- maps={match.maps}
+ bestOf={bestOf}
+ currentMapCount={match.maps.length}
team1Name={team1Name}
team2Name={team2Name}
- scrimId={match.scrimId}
- canDelete={canUpload}
/>
- {canUpload && !isCompleted && (
- <TournamentAddMapCard
- matchId={matchId}
- bestOf={bestOf}
- currentMapCount={match.maps.length}
- team1Name={team1Name}
- team2Name={team2Name}
- />
- )}
+ )}
+ </div>
+
+ <div className="flex items-center justify-center rounded-lg border p-4">
+ <TeamPanel
+ name={team2Name}
+ image={team2Image}
+ score={match.team2Score}
+ isWinner={team2IsWinner}
+ isLoser={team1IsWinner}
+ />
+ </div>
+ </div>
+ </>
+ );
+}
+
+// Mirrors the loaded match layout (back-arrow header row, then the
+// team / maps / team panel grid) so the streamed content replaces this in
+// place with no jump.
+function MatchSkeleton() {
+ return (
+ <>
+ <div className="flex items-center gap-4">
+ <Skeleton className="size-5 rounded" />
+ <div className="space-y-1.5">
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-7 w-64" />
+ <Skeleton className="h-5 w-16 rounded-full" />
</div>
+ <Skeleton className="h-4 w-24" />
+ </div>
+ </div>
- <div className="flex items-center justify-center rounded-lg border p-4">
- <TeamPanel
- name={team2Name}
- image={team2Image}
- score={match.team2Score}
- isWinner={team2IsWinner}
- isLoser={team1IsWinner}
- />
+ <div className="grid gap-6 md:grid-cols-[1fr_2fr_1fr]">
+ <div className="flex items-center justify-center rounded-lg border p-4">
+ <div className="flex flex-col items-center gap-2 py-4">
+ <Skeleton className="size-12 rounded-full" />
+ <Skeleton className="h-6 w-28" />
+ <Skeleton className="h-12 w-10" />
+ </div>
+ </div>
+
+ <div className="space-y-4">
+ <Skeleton className="mx-auto h-3.5 w-10" />
+ <div className="space-y-3">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="rounded-lg border px-4 py-3">
+ <div className="flex items-center gap-4">
+ <Skeleton className="h-5 w-14 shrink-0 rounded-full" />
+ <Skeleton className="h-4 flex-1" />
+ <div className="flex items-center gap-3">
+ <Skeleton className="h-4 w-4" />
+ <Skeleton className="h-4 w-4" />
+ </div>
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+
+ <div className="flex items-center justify-center rounded-lg border p-4">
+ <div className="flex flex-col items-center gap-2 py-4">
+ <Skeleton className="size-12 rounded-full" />
+ <Skeleton className="h-6 w-28" />
+ <Skeleton className="h-12 w-10" />
</div>
</div>
</div>
- </DashboardLayout>
+ </>
);
}
diff --git a/apps/web/src/app/tournaments/[id]/page.tsx b/apps/web/src/app/tournaments/[id]/page.tsx
index b1e8211d3..0a4156f65 100644
--- a/apps/web/src/app/tournaments/[id]/page.tsx
+++ b/apps/web/src/app/tournaments/[id]/page.tsx
@@ -5,10 +5,12 @@ import { DoubleBracketView } from "@/components/tournament/bracket/double-bracke
import { RoundRobinSEView } from "@/components/tournament/round-robin/round-robin-se-view";
import { TournamentActions } from "@/components/tournament/tournament-actions";
import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { TournamentService } from "@/data/tournament";
import { auth, canViewTournament, getCurrentUser } from "@/lib/auth";
import { tournament } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import prisma from "@/lib/prisma";
import { Effect } from "effect";
import { ArrowLeft } from "lucide-react";
@@ -16,6 +18,7 @@ import type { Metadata, Route } from "next";
import { getTranslations } from "next-intl/server";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(props: {
params: Promise<{ id: string }>;
@@ -39,13 +42,67 @@ export async function generateMetadata(props: {
};
}
-export default async function TournamentDetailPage(props: {
+// Static shell: DashboardLayout and the page frame prerender, and all
+// request-time work (flag, params, auth, bracket data) streams into ONE
+// boundary whose fallback mirrors the loaded header row and bracket area.
+export default function TournamentDetailPage(props: {
params: Promise<{ id: string }>;
}) {
- const tournamentEnabled = await tournament();
+ return (
+ <DashboardLayout>
+ <div className="flex min-h-[calc(100vh-4rem)] flex-col space-y-4 p-4 pt-6 md:p-8">
+ <Suspense fallback={<TournamentDetailSkeleton />}>
+ <TournamentDetailPageContent params={props.params} />
+ </Suspense>
+ </div>
+ </DashboardLayout>
+ );
+}
+
+function TournamentDetailSkeleton() {
+ return (
+ <>
+ <div className="flex items-center justify-between">
+ <div className="flex items-center gap-4">
+ <Skeleton className="size-5" />
+ <div className="space-y-1.5">
+ <div className="flex items-center gap-2">
+ <Skeleton className="h-9 w-48" />
+ <Skeleton className="h-5 w-16 rounded-full" />
+ </div>
+ <Skeleton className="h-4 w-64" />
+ </div>
+ </div>
+ <Skeleton className="h-9 w-24" />
+ </div>
+
+ <div className="flex-1 rounded-lg border p-6">
+ <div className="flex min-h-[30vh] items-stretch gap-8">
+ {["a", "b", "c"].map((k) => (
+ <div key={k} className="flex min-w-56 flex-1 flex-col">
+ <Skeleton className="mx-auto mb-3 h-3 w-20" />
+ <div className="flex flex-1 flex-col justify-around gap-2">
+ {["x", "y"].map((m) => (
+ <Skeleton key={m} className="h-20 w-full" />
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+ </div>
+ </>
+ );
+}
+
+async function TournamentDetailPageContent({
+ params: paramsPromise,
+}: {
+ params: Promise<{ id: string }>;
+}) {
+ const tournamentEnabled = await getFlag(tournament);
if (!tournamentEnabled) notFound();
- const params = await props.params;
+ const params = await paramsPromise;
const id = Number(params.id);
if (Number.isNaN(id)) notFound();
@@ -188,59 +245,50 @@ export default async function TournamentDetailPage(props: {
};
return (
- <DashboardLayout>
- <div className="flex min-h-[calc(100vh-4rem)] flex-col space-y-4 p-4 pt-6 md:p-8">
- <div className="flex items-center justify-between">
- <div className="flex items-center gap-4">
- <Link
- href={"/tournaments" as Route}
- className="text-muted-foreground hover:text-foreground transition-colors"
- >
- <ArrowLeft className="size-5" />
- </Link>
- <div>
- <div className="flex items-center gap-2">
- <h2 className="text-3xl font-bold tracking-tight">
- {data.name}
- </h2>
- <Badge variant={statusVariants[data.status]}>
- {data.status}
- </Badge>
- </div>
- <p className="text-muted-foreground text-sm">
- {data.format.replace(/_/g, " ")} ·{" "}
- {data.playoffBestOf && data.playoffBestOf !== data.bestOf
- ? `Bo${data.bestOf} / Bo${data.playoffBestOf}`
- : `Bo${data.bestOf}`}{" "}
- · {data.teams.length} teams
- </p>
+ <>
+ <div className="flex items-center justify-between">
+ <div className="flex items-center gap-4">
+ <Link
+ href={"/tournaments" as Route}
+ className="text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <ArrowLeft className="size-5" />
+ </Link>
+ <div>
+ <div className="flex items-center gap-2">
+ <h2 className="text-3xl font-bold tracking-tight">{data.name}</h2>
+ <Badge variant={statusVariants[data.status]}>{data.status}</Badge>
</div>
+ <p className="text-muted-foreground text-sm">
+ {data.format.replace(/_/g, " ")} ·{" "}
+ {data.playoffBestOf && data.playoffBestOf !== data.bestOf
+ ? `Bo${data.bestOf} / Bo${data.playoffBestOf}`
+ : `Bo${data.bestOf}`}{" "}
+ · {data.teams.length} teams
+ </p>
</div>
- <TournamentActions
- tournamentId={data.id}
- currentStatus={data.status}
- />
</div>
+ <TournamentActions tournamentId={data.id} currentStatus={data.status} />
+ </div>
- <div className="flex-1 rounded-lg border p-6">
- {data.format === "ROUND_ROBIN_SE" ? (
- <RoundRobinSEView
- tournamentId={data.id}
- standings={serializedStandings}
- advancingCount={advancingCount}
- rrRounds={rrRounds}
- playoffRounds={playoffRounds}
- allRRComplete={allRRComplete}
- playoffsSeeded={playoffsSeeded}
- canManage={canManage}
- />
- ) : data.format === "DOUBLE_ELIMINATION" ? (
- <DoubleBracketView rounds={rounds} />
- ) : (
- <BracketView rounds={rounds} />
- )}
- </div>
+ <div className="flex-1 rounded-lg border p-6">
+ {data.format === "ROUND_ROBIN_SE" ? (
+ <RoundRobinSEView
+ tournamentId={data.id}
+ standings={serializedStandings}
+ advancingCount={advancingCount}
+ rrRounds={rrRounds}
+ playoffRounds={playoffRounds}
+ allRRComplete={allRRComplete}
+ playoffsSeeded={playoffsSeeded}
+ canManage={canManage}
+ />
+ ) : data.format === "DOUBLE_ELIMINATION" ? (
+ <DoubleBracketView rounds={rounds} />
+ ) : (
+ <BracketView rounds={rounds} />
+ )}
</div>
- </DashboardLayout>
+ </>
);
}
diff --git a/apps/web/src/app/tournaments/[id]/stats/[teamId]/page.tsx b/apps/web/src/app/tournaments/[id]/stats/[teamId]/page.tsx
index c83662a90..e050b1de2 100644
--- a/apps/web/src/app/tournaments/[id]/stats/[teamId]/page.tsx
+++ b/apps/web/src/app/tournaments/[id]/stats/[teamId]/page.tsx
@@ -30,6 +30,7 @@ import { UltimateEconomyCard } from "@/components/stats/team/ultimate-economy-ca
import { WinLossStreaksCard } from "@/components/stats/team/win-loss-streaks-card";
import { WinProbabilityInsights } from "@/components/stats/team/win-probability-insights";
import { WinrateOverTimeChart } from "@/components/stats/team/winrate-over-time-chart";
+import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
TournamentTeamStatsService,
@@ -39,6 +40,7 @@ import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { auth, canViewTournament, getCurrentUser } from "@/lib/auth";
import { tournament, simulationTool, ultimateImpactTool } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import prisma from "@/lib/prisma";
import { getTempoBaselines } from "@/lib/tempo/read";
import { getMapNames } from "@/lib/utils";
@@ -48,6 +50,7 @@ import { getTranslations } from "next-intl/server";
import Image from "next/image";
import Link from "next/link";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
export async function generateMetadata(props: {
params: Promise<{ id: string; teamId: string }>;
@@ -71,16 +74,28 @@ export async function generateMetadata(props: {
};
}
-export default async function TournamentTeamStatsPage(props: {
+export default function TournamentTeamStatsPage(props: {
params: Promise<{ id: string; teamId: string }>;
}) {
- const tournamentEnabled = await tournament();
+ return (
+ <Suspense fallback={<TeamStatsPageSkeleton />}>
+ <TournamentTeamStatsPageContent params={props.params} />
+ </Suspense>
+ );
+}
+
+async function TournamentTeamStatsPageContent({
+ params: paramsPromise,
+}: {
+ params: Promise<{ id: string; teamId: string }>;
+}) {
+ const tournamentEnabled = await getFlag(tournament);
if (!tournamentEnabled) notFound();
const session = await auth();
if (!session?.user) notFound();
- const params = await props.params;
+ const params = await paramsPromise;
const tournamentId = Number(params.id);
const tournamentTeamId = Number(params.teamId);
if (Number.isNaN(tournamentId) || Number.isNaN(tournamentTeamId)) notFound();
@@ -280,8 +295,8 @@ export default async function TournamentTeamStatsPage(props: {
},
}),
getMapNames(),
- simulationTool(),
- ultimateImpactTool(),
+ getFlag(simulationTool),
+ getFlag(ultimateImpactTool),
]);
const baselines = await getTempoBaselines();
@@ -462,3 +477,99 @@ export default async function TournamentTeamStatsPage(props: {
</div>
);
}
+
+// Mirrors the loaded page frame: team header, tab list, then the overview
+// tab's quick stats, roster/activity, and map sections.
+function TeamStatsPageSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+ <div className="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+ <div className="flex items-center gap-4">
+ <Skeleton className="size-5 rounded-sm" />
+ <Skeleton className="size-[100px] rounded-full" />
+ <div className="flex flex-col space-y-2">
+ <Skeleton className="h-8 w-48" />
+ <Skeleton className="h-4 w-32" />
+ <Skeleton className="h-4 w-56" />
+ </div>
+ </div>
+ </div>
+
+ <div className="flex flex-wrap gap-1">
+ {["a", "b", "c", "d", "e", "f", "g", "h", "i"].map((k) => (
+ <Skeleton key={k} className="h-9 w-22 rounded-sm" />
+ ))}
+ </div>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-36" />
+ </div>
+ <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+ {["a", "b", "c", "d"].map((k) => (
+ <div key={k} className="space-y-2">
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="h-9 w-28" />
+ <Skeleton className="h-3 w-16" />
+ </div>
+ ))}
+ </div>
+ </section>
+
+ <div className="grid gap-4 md:grid-cols-2">
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-2 h-6 w-32" />
+ </div>
+ <div className="space-y-2">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </section>
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-40" />
+ </div>
+ <Skeleton className="h-48 w-full rounded-sm" />
+ </section>
+ </div>
+
+ <div className="grid gap-4 md:grid-cols-2">
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-20" />
+ <Skeleton className="mt-2 h-6 w-28" />
+ </div>
+ <div className="space-y-4">
+ {["a", "b", "c", "d", "e"].map((k) => (
+ <Skeleton key={k} className="h-10 w-full" />
+ ))}
+ </div>
+ </section>
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-28" />
+ <Skeleton className="mt-2 h-6 w-48" />
+ </div>
+ <div className="space-y-3">
+ {["a", "b"].map((k) => (
+ <Skeleton key={k} className="h-16 w-full" />
+ ))}
+ </div>
+ </section>
+ </div>
+
+ <section className="space-y-4">
+ <div>
+ <Skeleton className="h-3 w-24" />
+ <Skeleton className="mt-2 h-6 w-40" />
+ </div>
+ <Skeleton className="h-72 w-full rounded-sm" />
+ </section>
+ </div>
+ );
+}
diff --git a/apps/web/src/app/tournaments/create/page.tsx b/apps/web/src/app/tournaments/create/page.tsx
index 3c364d986..3b1112208 100644
--- a/apps/web/src/app/tournaments/create/page.tsx
+++ b/apps/web/src/app/tournaments/create/page.tsx
@@ -1,28 +1,53 @@
import { DashboardLayout } from "@/components/dashboard-layout";
import { CreateTournamentButton } from "@/components/tournament/create-tournament-button";
+import { Skeleton } from "@/components/ui/skeleton";
import { tournament } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
import { notFound } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("tournamentsPage.create.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("tournamentsPage.create.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function CreateTournamentPage() {
- const tournamentEnabled = await tournament();
- if (!tournamentEnabled) notFound();
-
+// Static shell: the dashboard chrome prerenders and the flag-gated content
+// streams into ONE boundary whose fallback mirrors the loaded layout. The
+// heading stays inside the content because the flag can notFound() the page.
+export default function CreateTournamentPage() {
return (
<DashboardLayout>
- <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
- <h2 className="text-3xl font-bold tracking-tight">Create Tournament</h2>
- <p className="text-muted-foreground">
- Use the button below to create a new tournament.
- </p>
- <CreateTournamentButton />
- </div>
+ <Suspense fallback={<CreateTournamentSkeleton />}>
+ <CreateTournamentPageContent />
+ </Suspense>
</DashboardLayout>
);
}
+
+async function CreateTournamentPageContent() {
+ const tournamentEnabled = await getFlag(tournament);
+ if (!tournamentEnabled) notFound();
+
+ return (
+ <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+ <h2 className="text-3xl font-bold tracking-tight">Create Tournament</h2>
+ <p className="text-muted-foreground">
+ Use the button below to create a new tournament.
+ </p>
+ <CreateTournamentButton />
+ </div>
+ );
+}
+
+// Mirrors the loaded layout: heading, description line, and the create button.
+function CreateTournamentSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+ <Skeleton className="h-9 w-72" />
+ <Skeleton className="h-5 w-80 max-w-full" />
+ <Skeleton className="h-9 w-44" />
+ </div>
+ );
+}
diff --git a/apps/web/src/app/tournaments/page.tsx b/apps/web/src/app/tournaments/page.tsx
index 9b79fe66d..f3413a3a9 100644
--- a/apps/web/src/app/tournaments/page.tsx
+++ b/apps/web/src/app/tournaments/page.tsx
@@ -1,22 +1,44 @@
import { DashboardLayout } from "@/components/dashboard-layout";
import { CreateTournamentButton } from "@/components/tournament/create-tournament-button";
import { TournamentCard } from "@/components/tournament/tournament-card";
+import { Skeleton } from "@/components/ui/skeleton";
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { TournamentService } from "@/data/tournament";
import { auth } from "@/lib/auth";
import { tournament } from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
+import { getMetadataTranslations } from "@/lib/metadata-i18n";
import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
import { notFound, redirect } from "next/navigation";
+import { Suspense } from "react";
-export async function generateMetadata(): Promise<Metadata> {
- const t = await getTranslations("tournamentsPage.metadata");
+export function generateMetadata(): Metadata {
+ const t = getMetadataTranslations("tournamentsPage.metadata");
return { title: t("title"), description: t("description") };
}
-export default async function TournamentsPage() {
- const tournamentEnabled = await tournament();
+// Static shell: the layout chrome, heading, and create button prerender, and
+// the flag/auth-gated tournament list streams into ONE boundary whose
+// fallback mirrors the loaded card grid.
+export default function TournamentsPage() {
+ return (
+ <DashboardLayout>
+ <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
+ <div className="flex items-center justify-between">
+ <h2 className="text-3xl font-bold tracking-tight">Tournaments</h2>
+ <CreateTournamentButton />
+ </div>
+ <Suspense fallback={<TournamentListSkeleton />}>
+ <TournamentsContent />
+ </Suspense>
+ </div>
+ </DashboardLayout>
+ );
+}
+
+async function TournamentsContent() {
+ const tournamentEnabled = await getFlag(tournament);
if (!tournamentEnabled) notFound();
const session = await auth();
@@ -28,41 +50,59 @@ export default async function TournamentsPage() {
)
);
+ if (tournaments.length === 0) {
+ return (
+ <div className="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
+ <p className="text-lg font-medium">No tournaments yet</p>
+ <p className="text-sm">Create your first tournament to get started.</p>
+ </div>
+ );
+ }
+
return (
- <DashboardLayout>
- <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
- <div className="flex items-center justify-between">
- <h2 className="text-3xl font-bold tracking-tight">Tournaments</h2>
- <CreateTournamentButton />
- </div>
+ <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+ {tournaments.map((t) => (
+ <TournamentCard
+ key={t.id}
+ id={t.id}
+ name={t.name}
+ format={t.format}
+ status={t.status}
+ teamSlots={t.teamSlots}
+ bestOf={t.bestOf}
+ playoffBestOf={t.playoffBestOf}
+ teamNames={t.teams.map((team) => team.name)}
+ matchCount={t._count.matches}
+ createdAt={t.createdAt}
+ />
+ ))}
+ </div>
+ );
+}
- {tournaments.length === 0 ? (
- <div className="text-muted-foreground flex flex-col items-center justify-center py-16 text-center">
- <p className="text-lg font-medium">No tournaments yet</p>
- <p className="text-sm">
- Create your first tournament to get started.
- </p>
+// Mirrors the loaded TournamentCard grid (card header with name + status
+// badge, description line, team/match meta) so the streamed list replaces
+// this in place.
+function TournamentListSkeleton() {
+ return (
+ <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+ {["a", "b", "c", "d", "e", "f"].map((k) => (
+ <div key={k} className="border-border rounded-xl border">
+ <div className="flex flex-col space-y-1.5 p-6 pb-2">
+ <div className="flex items-start justify-between gap-2">
+ <Skeleton className="h-5 w-36" />
+ <Skeleton className="h-5 w-16 shrink-0" />
+ </div>
+ <Skeleton className="h-4 w-48" />
</div>
- ) : (
- <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
- {tournaments.map((t) => (
- <TournamentCard
- key={t.id}
- id={t.id}
- name={t.name}
- format={t.format}
- status={t.status}
- teamSlots={t.teamSlots}
- bestOf={t.bestOf}
- playoffBestOf={t.playoffBestOf}
- teamNames={t.teams.map((team) => team.name)}
- matchCount={t._count.matches}
- createdAt={t.createdAt}
- />
- ))}
+ <div className="p-6 pt-0">
+ <div className="space-y-1">
+ <Skeleton className="h-4 w-full" />
+ <Skeleton className="h-4 w-28" />
+ </div>
</div>
- )}
- </div>
- </DashboardLayout>
+ </div>
+ ))}
+ </div>
);
}
diff --git a/apps/web/src/components/app-header.tsx b/apps/web/src/components/app-header.tsx
index f8e2c97e4..e8d72c402 100644
--- a/apps/web/src/components/app-header.tsx
+++ b/apps/web/src/components/app-header.tsx
@@ -16,6 +16,7 @@ import {
scoutingTool,
tournament,
} from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import type { Session } from "@/lib/auth";
/**
@@ -48,13 +49,13 @@ export async function AppHeader({
coachingCanvasEnabled,
queryBuilderEnabled,
] = await Promise.all([
- scoutingTool(),
- faceitScouting(),
- aiChat(),
- dataLabeling(),
- tournament(),
- coachingCanvas(),
- queryBuilder(),
+ getFlag(scoutingTool),
+ getFlag(faceitScouting),
+ getFlag(aiChat),
+ getFlag(dataLabeling),
+ getFlag(tournament),
+ getFlag(coachingCanvas),
+ getFlag(queryBuilder),
]);
// Right-side utilities shared by both bars. The desktop bar additionally
diff --git a/apps/web/src/components/brand-theme-provider.tsx b/apps/web/src/components/brand-theme-provider.tsx
index 7463c42d7..b7459dd34 100644
--- a/apps/web/src/components/brand-theme-provider.tsx
+++ b/apps/web/src/components/brand-theme-provider.tsx
@@ -1,6 +1,6 @@
"use client";
-import { createContext, use } from "react";
+import { createContext, use, useEffect, useState } from "react";
type BrandThemeContextValue = {
/** Whether the current user may select the Disguised brand theme. */
@@ -10,21 +10,48 @@ type BrandThemeContextValue = {
const BrandThemeContext = createContext<BrandThemeContextValue>({
canUseDisguised: false,
});
+const BrandThemeSetterContext = createContext<(value: boolean) => void>(
+ () => undefined
+);
+/**
+ * Stateful so the provider can sit in the static shell: children render
+ * immediately with `canUseDisguised: false` and `BrandThemeHydrator`
+ * (streamed from the root layout's request-time island) flips it for DSG
+ * members. The only consumer is the Disguised item in the theme dropdown,
+ * which appears once the value resolves.
+ */
export function BrandThemeProvider({
children,
- canUseDisguised,
}: {
children: React.ReactNode;
- canUseDisguised: boolean;
}) {
+ const [canUseDisguised, setCanUseDisguised] = useState(false);
+
return (
- <BrandThemeContext value={{ canUseDisguised }}>
- {children}
- </BrandThemeContext>
+ <BrandThemeSetterContext value={setCanUseDisguised}>
+ <BrandThemeContext value={{ canUseDisguised }}>
+ {children}
+ </BrandThemeContext>
+ </BrandThemeSetterContext>
);
}
+/** Rendered by the request-time island; enables the theme for DSG members. */
+export function BrandThemeHydrator({
+ canUseDisguised,
+}: {
+ canUseDisguised: boolean;
+}) {
+ const setCanUseDisguised = use(BrandThemeSetterContext);
+
+ useEffect(() => {
+ setCanUseDisguised(canUseDisguised);
+ }, [canUseDisguised, setCanUseDisguised]);
+
+ return null;
+}
+
export function useCanUseDisguised(): boolean {
return use(BrandThemeContext).canUseDisguised;
}
diff --git a/apps/web/src/components/charts/map/map-charts.tsx b/apps/web/src/components/charts/map/map-charts.tsx
index e43ab4559..816547e39 100644
--- a/apps/web/src/components/charts/map/map-charts.tsx
+++ b/apps/web/src/components/charts/map/map-charts.tsx
@@ -11,14 +11,17 @@ import {
TooltipTrigger,
} from "@/components/ui/tooltip";
import { getMapUltAdvantage } from "@/data/map/ult-advantage";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import { resolveMapDataId } from "@/lib/map-data-resolver";
import prisma from "@/lib/prisma";
import type { Kill } from "@/generated/prisma/client";
import { InfoCircledIcon } from "@radix-ui/react-icons";
-import { getTranslations } from "next-intl/server";
+import { cacheLife, cacheTag } from "next/cache";
-async function ChartTooltip() {
- const t = await getTranslations("mapPage.charts");
+async function ChartTooltip({ locale }: { locale: Locale }) {
+ const t = await getLocaleTranslations(locale, "mapPage.charts");
return (
<Tooltip>
<TooltipTrigger asChild>
@@ -73,6 +76,7 @@ async function groupKillsByInterval(id: number, maxInterval: number) {
type ChartSectionProps = {
id: string;
+ locale: Locale;
eyebrow: string;
title: string;
description: string;
@@ -81,6 +85,7 @@ type ChartSectionProps = {
function ChartSection({
id,
+ locale,
eyebrow,
title,
description,
@@ -99,7 +104,7 @@ function ChartSection({
>
{title}
</h3>
- <ChartTooltip />
+ <ChartTooltip locale={locale} />
</div>
</div>
<div className="-ml-2">{children}</div>
@@ -112,16 +117,22 @@ function ChartSection({
export async function MapCharts({
id,
+ locale,
team1Color,
team2Color,
tempoChartEnabled,
}: {
id: number;
+ locale: Locale;
team1Color: string;
team2Color: string;
tempoChartEnabled: boolean;
}) {
- const t = await getTranslations("mapPage.charts");
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(id));
+
+ const t = await getLocaleTranslations(locale, "mapPage.charts");
const mapDataId = await resolveMapDataId(id);
const teams = await prisma.matchStart.findFirst({
where: {
@@ -183,12 +194,14 @@ export async function MapCharts({
<>
<ChartSection
id="tempo"
+ locale={locale}
eyebrow={t("tempo.eyebrow")}
title={t("tempo.title")}
description={t("tempo.description")}
>
<TempoChartServer
id={id}
+ locale={locale}
team1Color={team1Color}
team2Color={team2Color}
/>
@@ -200,6 +213,7 @@ export async function MapCharts({
<ChartSection
id="kills-by-fight"
+ locale={locale}
eyebrow={t("killsByFight.eyebrow")}
title={t("killsByFight.title")}
description={t("killsByFight.description")}
@@ -213,6 +227,7 @@ export async function MapCharts({
<ChartSection
id="ult-advantage"
+ locale={locale}
eyebrow={t("ultAdvantage.eyebrow")}
title={t("ultAdvantage.title")}
description={t("ultAdvantage.description", { team: team1Name })}
@@ -234,6 +249,7 @@ export async function MapCharts({
<div className="grid gap-6 lg:grid-cols-2 lg:gap-8">
<ChartSection
id="final-blows-by-role"
+ locale={locale}
eyebrow={t("finalBlowsByRole.eyebrow")}
title={t("finalBlowsByRole.title")}
description={t("finalBlowsByRole.description")}
@@ -247,6 +263,7 @@ export async function MapCharts({
<ChartSection
id="damage-by-round"
+ locale={locale}
eyebrow={t("dmgByRound.eyebrow")}
title={t("dmgByRound.title")}
description={t("dmgByRound.description")}
diff --git a/apps/web/src/components/dashboard-layout.tsx b/apps/web/src/components/dashboard-layout.tsx
index b352e01a9..6b45ff138 100644
--- a/apps/web/src/components/dashboard-layout.tsx
+++ b/apps/web/src/components/dashboard-layout.tsx
@@ -1,24 +1,34 @@
import { AppHeader } from "@/components/app-header";
import { TeamSwitcher } from "@/components/dashboard/team-switcher";
import { Footer } from "@/components/footer";
+import { HeaderSkeleton } from "@/components/header-skeleton";
import { TeamSwitcherProvider } from "@/components/team-switcher-provider";
+import { Skeleton } from "@/components/ui/skeleton";
import { AppRuntime } from "@/data/runtime";
import { UserService } from "@/data/user";
import { auth } from "@/lib/auth";
import { Effect } from "effect";
+import { connection } from "next/server";
+import { Suspense, type ReactNode } from "react";
-export async function DashboardLayout({
+export function DashboardLayout({
children,
guestMode,
+ guestModeSource,
}: {
- children: React.ReactNode;
+ children: ReactNode;
guestMode?: boolean;
+ /**
+ * Late-resolved guest-mode read for routes whose guest state depends on
+ * route params (e.g. guest-shared scrims). It runs inside the streamed
+ * header — after `connection()` — so the caller's shell stays static; a
+ * plain `guestMode` boolean takes precedence when provided.
+ */
+ guestModeSource?: () => Promise<boolean>;
}) {
- const session = await auth();
- const user = await AppRuntime.runPromise(
- UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user?.email)))
- );
-
+ // The page chrome (skip link, layout structure, Footer) is static so any
+ // route using this layout paints instantly; the auth-derived header and the
+ // page content each stream in behind their own boundary.
return (
<TeamSwitcherProvider>
<a
@@ -28,15 +38,60 @@ export async function DashboardLayout({
Skip to content
</a>
<div className="min-h-[90vh] flex-col md:flex">
- <AppHeader
- switcher={session && <TeamSwitcher session={session} />}
- session={session}
- user={user}
- guestMode={guestMode}
- />
- <main id="main-content">{children}</main>
+ <Suspense fallback={<HeaderSkeleton />}>
+ <AuthedAppHeader
+ guestMode={guestMode}
+ guestModeSource={guestModeSource}
+ />
+ </Suspense>
+ <main id="main-content">
+ <Suspense fallback={<DashboardContentSkeleton />}>
+ {children}
+ </Suspense>
+ </main>
</div>
<Footer />
</TeamSwitcherProvider>
);
}
+
+// Shown while a page's own content streams in, so the content area under the
+// (already-painted) header never drops to a blank.
+function DashboardContentSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 px-6 pt-6 pb-12 md:px-8">
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="h-8 w-56" />
+ <Skeleton className="h-72 w-full rounded-xl" />
+ </div>
+ );
+}
+
+async function AuthedAppHeader({
+ guestMode,
+ guestModeSource,
+}: {
+ guestMode?: boolean;
+ guestModeSource?: () => Promise<boolean>;
+}) {
+ // This header is per-user (auth-derived) and always streams behind its
+ // Suspense boundary, so mark it request-time up front. Without this, PPR
+ // attempts to prerender it and trips on `Date.now()` inside the Effect
+ // runtime before the auth read defers it.
+ await connection();
+ const resolvedGuestMode =
+ guestMode ?? (guestModeSource ? await guestModeSource() : undefined);
+ const session = await auth();
+ const user = await AppRuntime.runPromise(
+ UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user?.email)))
+ );
+
+ return (
+ <AppHeader
+ switcher={session && <TeamSwitcher session={session} />}
+ session={session}
+ user={user}
+ guestMode={resolvedGuestMode}
+ />
+ );
+}
diff --git a/apps/web/src/components/dashboard-tour.tsx b/apps/web/src/components/dashboard-tour.tsx
new file mode 100644
index 000000000..9775d5a03
--- /dev/null
+++ b/apps/web/src/components/dashboard-tour.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { CardStep } from "@/components/nextsteps/card-step";
+import { useTranslations } from "next-intl";
+import { NextStep, NextStepProvider } from "nextstepjs";
+import type { Tour } from "nextstepjs";
+import type { ReactNode } from "react";
+
+// The onboarding tour reads translations to build its steps. Kept in a client
+// component so `useTranslations` resolves from the NextIntlClientProvider
+// context rather than the request locale — reading the locale in the server
+// dashboard layout would block the route's prerender / instant navigation.
+export function DashboardTour({ children }: { children: ReactNode }) {
+ const t = useTranslations("dashboard.tour");
+ const steps: Tour[] = [
+ {
+ tour: `${t("title")}`,
+ steps: [
+ {
+ icon: <>👋</>,
+ title: `${t("step1.title")}`,
+ content: <>{t("step1.description")}</>,
+ selector: "#docs-demo-step1",
+ side: "top",
+ showControls: true,
+ showSkip: true,
+ pointerPadding: 10,
+ pointerRadius: 10,
+ },
+ {
+ icon: <>🚀</>,
+ title: `${t("step2.title")}`,
+ content: <>{t("step2.description")}</>,
+ selector: "#docs-demo-step2",
+ side: "top",
+ showControls: true,
+ showSkip: true,
+ pointerPadding: 10,
+ pointerRadius: 10,
+ },
+ {
+ icon: <>📝</>,
+ title: `${t("step3.title")}`,
+ content: (
+ <>
+ {t("step3.description")} <br />
+ </>
+ ),
+ selector: "#docs-demo-step3",
+ side: "bottom",
+ showSkip: true,
+ showControls: true,
+ },
+ {
+ icon: <>👥</>,
+ title: `${t("step4.title")}`,
+ content: (
+ <>
+ {t("step4.description")} <br />
+ </>
+ ),
+ selector: "#docs-demo-step4", // Target the Team Select dropdown
+ side: "bottom",
+ showSkip: true,
+ showControls: true,
+ },
+ {
+ icon: <>📅</>,
+ title: `${t("step5.title")}`,
+ content: <>{t("step5.description")}</>,
+ selector: "#docs-demo-step5",
+ showSkip: true,
+ side: "bottom",
+ showControls: true,
+ },
+ {
+ icon: <>📊</>,
+ title: `${t("step6.title")}`,
+ content: <>{t("step6.description")}</>,
+ selector: "#docs-demo-step6",
+ side: "top",
+ showControls: true,
+ showSkip: true,
+ },
+ {
+ icon: <>🚫</>,
+ title: `${t("step7.title")}`,
+ content: (
+ <>
+ {t("step7.description")} <br />
+ </>
+ ),
+ selector: "#docs-demo-step7",
+ side: "top",
+ showControls: true,
+ showSkip: true,
+ },
+ {
+ icon: <>🚀</>,
+ title: `${t("step8.title")}`,
+ content: (
+ <>
+ {t("step8.description")} <br />
+ </>
+ ),
+ selector: "#docs-demo-step8",
+ side: "top",
+ showSkip: true,
+ showControls: true,
+ },
+ ],
+ },
+ ];
+
+ return (
+ <NextStepProvider>
+ <NextStep steps={steps} cardComponent={CardStep}>
+ {children}
+ </NextStep>
+ </NextStepProvider>
+ );
+}
diff --git a/apps/web/src/components/devtools/client-vercel-toolbar.tsx b/apps/web/src/components/devtools/client-vercel-toolbar.tsx
new file mode 100644
index 000000000..73b717cee
--- /dev/null
+++ b/apps/web/src/components/devtools/client-vercel-toolbar.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { VercelToolbar } from "@vercel/toolbar/next";
+import { useEffect, useState } from "react";
+
+/**
+ * The Vercel Toolbar calls `Math.random()` while rendering, which is disallowed
+ * during the Cache Components prerender pass. Mount it on the client only so it
+ * never participates in server prerendering.
+ */
+export function ClientVercelToolbar() {
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ setMounted(true);
+ }, []);
+
+ return mounted ? <VercelToolbar /> : null;
+}
diff --git a/apps/web/src/components/devtools/index.tsx b/apps/web/src/components/devtools/index.tsx
index bde73f74c..c943f426d 100644
--- a/apps/web/src/components/devtools/index.tsx
+++ b/apps/web/src/components/devtools/index.tsx
@@ -1,7 +1,7 @@
+import { ClientVercelToolbar } from "@/components/devtools/client-vercel-toolbar";
import { ReactScan } from "@/components/devtools/react-scan";
import { TailwindIndicator } from "@/components/devtools/tailwind-indicator";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { VercelToolbar } from "@vercel/toolbar/next";
export function DevTools() {
const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === "production";
@@ -12,7 +12,7 @@ export function DevTools() {
<ReactScan />
<TailwindIndicator />
<ReactQueryDevtools />
- <VercelToolbar />
+ <ClientVercelToolbar />
</>
);
}
diff --git a/apps/web/src/components/stats/team/dot-matrix-loader.tsx b/apps/web/src/components/dot-matrix-loader.tsx
similarity index 100%
rename from apps/web/src/components/stats/team/dot-matrix-loader.tsx
rename to apps/web/src/components/dot-matrix-loader.tsx
diff --git a/apps/web/src/components/feature-flags-provider.tsx b/apps/web/src/components/feature-flags-provider.tsx
index 394acc6e9..753827695 100644
--- a/apps/web/src/components/feature-flags-provider.tsx
+++ b/apps/web/src/components/feature-flags-provider.tsx
@@ -1,7 +1,7 @@
"use client";
import type { FeatureFlags } from "@/lib/flags-helpers";
-import { createContext, use, useMemo } from "react";
+import { createContext, use, useEffect, useState } from "react";
const defaultFlags: FeatureFlags = {
scoutingEnabled: false,
@@ -11,7 +11,6 @@ const defaultFlags: FeatureFlags = {
dataLabelingEnabled: false,
simulationToolEnabled: false,
ultimateImpactToolEnabled: false,
- newLandingPageEnabled: false,
tempoChartEnabled: false,
aiChatEnabled: false,
positionalDataEnabled: false,
@@ -21,17 +20,40 @@ const defaultFlags: FeatureFlags = {
};
const FeatureFlagsContext = createContext<FeatureFlags>(defaultFlags);
+const FeatureFlagsSetterContext = createContext<(flags: FeatureFlags) => void>(
+ () => undefined
+);
+/**
+ * Stateful so the provider can sit in the static shell: children render
+ * immediately with all-false defaults and `FeatureFlagsHydrator` (streamed
+ * from the root layout's request-time island) fills in the real values.
+ * Flag-gated client UI may appear a beat after first paint; anything that
+ * must not pop in should be gated server-side instead.
+ */
export function FeatureFlagsProvider({
children,
- flags,
}: {
children: React.ReactNode;
- flags: FeatureFlags | null;
}) {
- const value = useMemo(() => ({ ...(flags ?? defaultFlags) }), [flags]);
+ const [flags, setFlags] = useState<FeatureFlags>(defaultFlags);
- return <FeatureFlagsContext value={value}>{children}</FeatureFlagsContext>;
+ return (
+ <FeatureFlagsSetterContext value={setFlags}>
+ <FeatureFlagsContext value={flags}>{children}</FeatureFlagsContext>
+ </FeatureFlagsSetterContext>
+ );
+}
+
+/** Rendered by the request-time island; pushes real flag values into state. */
+export function FeatureFlagsHydrator({ flags }: { flags: FeatureFlags }) {
+ const setFlags = use(FeatureFlagsSetterContext);
+
+ useEffect(() => {
+ setFlags(flags);
+ }, [flags, setFlags]);
+
+ return null;
}
export function useFeatureFlags() {
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index b1e21dff2..b6b43c9f3 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -13,10 +13,13 @@ import {
scoutingTool,
tournament,
} from "@/lib/flags";
+import { getFlag } from "@/lib/flags-helpers";
import { get } from "@vercel/edge-config";
import type { Route } from "next";
+import { connection } from "next/server";
import { getTranslations } from "next-intl/server";
import Image from "next/image";
+import { Suspense } from "react";
type FooterLink = {
labelKey: string;
@@ -177,8 +180,32 @@ function FooterColumn({
);
}
-export async function Footer() {
+// The footer reads the locale cookie (getTranslations) and the current year,
+// both request-time. Wrapping its own content in Suspense lets it sit in any
+// route's static shell without blocking the prerender — it streams itself in.
+export function Footer() {
+ return (
+ <Suspense fallback={null}>
+ <FooterContent />
+ </Suspense>
+ );
+}
+
+async function FooterContent() {
+ // Force request-time rendering before any read below. This component reaches
+ // `use cache` functions — `@vercel/edge-config`'s `get()` and the feature
+ // flags (via `vercelAdapter`) both compile to cached Edge Config reads under
+ // Cache Components — and `getTranslations` (next-intl) reads the locale from a
+ // `cache()`d value, so it does NOT reliably push the render to request-time on
+ // its own. Without `connection()` those cache reads get prerendered into the
+ // route shell and, when the surrounding dynamic render aborts, turn into a
+ // "dynamic use cache" whose hanging promise rejects on prerender completion
+ // (HANGING_PROMISE_REJECTION, observed on `/profile/[playerName]` and
+ // `/dashboard`). It also makes the inline `new Date()` below safe. Same
+ // request-time guard as `AuthedAppHeader` in dashboard-layout.tsx.
+ await connection();
const t = await getTranslations("footer");
+ const copyrightYear = new Date().getFullYear();
const [
version,
@@ -191,11 +218,11 @@ export async function Footer() {
] = await Promise.all([
get<string>("version"),
get<Route>("changelog"),
- scoutingTool(),
- aiChat(),
- dataLabeling(),
- coachingCanvas(),
- tournament(),
+ getFlag(scoutingTool),
+ getFlag(aiChat),
+ getFlag(dataLabeling),
+ getFlag(coachingCanvas),
+ getFlag(tournament),
]);
const columns: FooterColumn[] = [
@@ -255,7 +282,7 @@ export async function Footer() {
<WorkshopCodePill code="Z0ASA" />
<p className="text-muted-foreground font-mono text-xs">
- © 2024–{new Date().getFullYear()} lux.dev
+ © 2024–{copyrightYear} lux.dev
</p>
</div>
diff --git a/apps/web/src/components/header-skeleton.tsx b/apps/web/src/components/header-skeleton.tsx
new file mode 100644
index 000000000..f623ec611
--- /dev/null
+++ b/apps/web/src/components/header-skeleton.tsx
@@ -0,0 +1,23 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Fallback for the auth-derived app header while it streams: mirrors the real
+// header's dimensions (logo, nav links, right-side utilities) so the chrome
+// doesn't jump from an empty bar to a populated one.
+export function HeaderSkeleton() {
+ return (
+ <header className="border-border flex h-14 items-center gap-3 border-b px-4 sm:px-6">
+ <Skeleton className="h-7 w-7 rounded-md" />
+ <Skeleton className="hidden h-4 w-28 sm:block" />
+ <nav className="ml-6 hidden items-center gap-5 md:flex">
+ <Skeleton className="h-4 w-14" />
+ <Skeleton className="h-4 w-16" />
+ <Skeleton className="h-4 w-14" />
+ <Skeleton className="h-4 w-16" />
+ </nav>
+ <div className="ml-auto flex items-center gap-3">
+ <Skeleton className="h-7 w-16 rounded-md" />
+ <Skeleton className="h-8 w-8 rounded-full" />
+ </div>
+ </header>
+ );
+}
diff --git a/apps/web/src/components/home/landing-page.tsx b/apps/web/src/components/home/landing-page.tsx
deleted file mode 100644
index 8923d17bc..000000000
--- a/apps/web/src/components/home/landing-page.tsx
+++ /dev/null
@@ -1,680 +0,0 @@
-import { TrackedCtaButton } from "@/components/home/tracked-cta-button";
-import prisma from "@/lib/prisma";
-import {
- CalendarDaysIcon,
- ChartBarIcon,
- ChevronRightIcon,
- CloudIcon,
- FingerPrintIcon,
- IdentificationIcon,
- StarIcon,
- WrenchScrewdriverIcon,
-} from "@heroicons/react/20/solid";
-import {
- AcademicCapIcon,
- ArrowUpOnSquareIcon,
- PresentationChartBarIcon,
-} from "@heroicons/react/24/outline";
-import { get } from "@vercel/edge-config";
-import type { Route } from "next";
-import { getTranslations } from "next-intl/server";
-import { unstable_cache } from "next/cache";
-import Image from "next/image";
-import Link from "next/link";
-import type { SVGProps } from "react";
-
-type IconProps = Omit<SVGProps<SVGSVGElement>, "fill" | "viewbox">;
-
-/**
- * Rounds a count down to a "nice" number for display.
- * e.g. 142,350 -> "140,000+", 2,743 -> "2,500+", 218,000 -> "200,000+"
- */
-function formatRoundedCount(count: number): string {
- if (count >= 100_000) {
- const rounded = Math.floor(count / 10_000) * 10_000;
- return `${rounded.toLocaleString("en-US")}+`;
- }
- if (count >= 10_000) {
- const rounded = Math.floor(count / 5_000) * 5_000;
- return `${rounded.toLocaleString("en-US")}+`;
- }
- if (count >= 1_000) {
- const rounded = Math.floor(count / 500) * 500;
- return `${rounded.toLocaleString("en-US")}+`;
- }
- return `${count.toLocaleString("en-US")}+`;
-}
-
-const getLandingPageStats = unstable_cache(
- async () => {
- const [playerStatCount, calculatedStatCount, killCount, mapCount] =
- await Promise.all([
- prisma.playerStat.count(),
- prisma.calculatedStat.count(),
- prisma.kill.count(),
- prisma.map.count(),
- ]);
- return {
- statsCount: playerStatCount + calculatedStatCount,
- killCount,
- mapCount,
- };
- },
- ["landing-page-stats"],
- { revalidate: 3600 }
-);
-
-type FooterNavigation = {
- social: {
- name: string;
- href: Route;
- icon: (props: IconProps) => React.ReactNode;
- }[];
-};
-
-const footerNavigation: FooterNavigation = {
- social: [
- {
- name: "X",
- href: "https://twitter.com/luxdotdev",
- icon: (props: IconProps) => (
- <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
- <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
- </svg>
- ),
- },
- {
- name: "Bluesky",
- href: "https://bsky.app/profile/lux.dev",
- icon: (props: IconProps) => (
- <svg fill="currentColor" viewBox="-50 -50 430 390" {...props}>
- <path d="M180 141.964C163.699 110.262 119.308 51.1817 78.0347 22.044C38.4971 -5.86834 23.414 -1.03207 13.526 3.43594C2.08093 8.60755 0 26.1785 0 36.5164C0 46.8542 5.66748 121.272 9.36416 133.694C21.5786 174.738 65.0603 188.607 105.104 184.156C107.151 183.852 109.227 183.572 111.329 183.312C109.267 183.642 107.19 183.924 105.104 184.156C46.4204 192.847 -5.69621 214.233 62.6582 290.33C137.848 368.18 165.705 273.637 180 225.702C194.295 273.637 210.76 364.771 295.995 290.33C360 225.702 313.58 192.85 254.896 184.158C252.81 183.926 250.733 183.645 248.671 183.315C250.773 183.574 252.849 183.855 254.896 184.158C294.94 188.61 338.421 174.74 350.636 133.697C354.333 121.275 360 46.8568 360 36.519C360 26.1811 357.919 8.61012 346.474 3.43851C336.586 -1.02949 321.503 -5.86576 281.965 22.0466C240.692 51.1843 196.301 110.262 180 141.964Z" />
- </svg>
- ),
- },
- {
- name: "GitHub",
- href: "https://github.com/lucasdoell",
- icon: (props: IconProps) => (
- <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
- <path
- fillRule="evenodd"
- d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
- clipRule="evenodd"
- />
- </svg>
- ),
- },
- ],
-};
-
-export async function LandingPage() {
- const [{ statsCount, killCount, mapCount }, latestUpdates, t] =
- await Promise.all([
- getLandingPageStats(),
- get<{ title: string; url: Route }>("latestUpdates"),
- getTranslations("landingPage"),
- ]);
-
- const stats = [
- {
- id: "stats",
- name: t("stats.statsTracked"),
- value: formatRoundedCount(statsCount),
- },
- {
- id: "kills",
- name: t("stats.kills"),
- value: formatRoundedCount(killCount),
- },
- { id: "maps", name: t("stats.maps"), value: formatRoundedCount(mapCount) },
- { id: "uptime", name: t("stats.uptime"), value: "99.99%" },
- ];
-
- type PrimaryFeature = {
- name: string;
- description: string;
- href: Route;
- icon: React.ElementType;
- };
-
- const primaryFeatures: PrimaryFeature[] = [
- {
- name: t("primaryFeatures.builtByCoaches.name"),
- description: t("primaryFeatures.builtByCoaches.description"),
- href: "/about",
- icon: AcademicCapIcon,
- },
- {
- name: t("primaryFeatures.shareWithTeam.name"),
- description: t("primaryFeatures.shareWithTeam.description"),
- href: "/about",
- icon: ArrowUpOnSquareIcon,
- },
- {
- name: t("primaryFeatures.advancedStatistics.name"),
- description: t("primaryFeatures.advancedStatistics.description"),
- href: "/about",
- icon: PresentationChartBarIcon,
- },
- ];
-
- const secondaryFeatures = [
- {
- name: t("secondaryFeatures.dataCharts.name"),
- description: t("secondaryFeatures.dataCharts.description"),
- icon: ChartBarIcon,
- },
- {
- name: t("secondaryFeatures.filterStats.name"),
- description: t("secondaryFeatures.filterStats.description"),
- icon: CalendarDaysIcon,
- },
- {
- name: t("secondaryFeatures.userProfiles.name"),
- description: t("secondaryFeatures.userProfiles.description"),
- icon: IdentificationIcon,
- },
- {
- name: t("secondaryFeatures.advancedSecurity.name"),
- description: t("secondaryFeatures.advancedSecurity.description"),
- icon: FingerPrintIcon,
- },
- {
- name: t("secondaryFeatures.fastReliable.name"),
- description: t("secondaryFeatures.fastReliable.description"),
- icon: CloudIcon,
- },
- {
- name: t("secondaryFeatures.fullyCustomizable.name"),
- description: t("secondaryFeatures.fullyCustomizable.description"),
- icon: WrenchScrewdriverIcon,
- },
- ];
-
- return (
- <div className="bg-white dark:bg-black">
- <main>
- {/* Hero section */}
- <div className="relative isolate overflow-hidden bg-white dark:bg-black">
- <svg
- className="absolute inset-0 -z-10 h-full w-full [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200 dark:stroke-white/10"
- aria-hidden="true"
- >
- <defs>
- <pattern
- id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
- width={200}
- height={200}
- x="50%"
- y={-1}
- patternUnits="userSpaceOnUse"
- className="hidden dark:flex"
- >
- <path d="M.5 200V.5H200" fill="none" />
- </pattern>
- <pattern
- id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
- width={200}
- height={200}
- x="50%"
- y={-1}
- patternUnits="userSpaceOnUse"
- className="flex dark:hidden"
- >
- <path d="M.5 200V.5H200" fill="none" />
- </pattern>
- </defs>
- <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">
- <path
- d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
- strokeWidth={0}
- className="hidden dark:flex"
- />
- <path
- d="M.5 200V.5H200"
- fill="none"
- className="flex dark:hidden"
- />
- </svg>
- <rect
- width="100%"
- height="100%"
- strokeWidth={0}
- fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
- className="hidden dark:flex"
- />
- <rect
- width="100%"
- height="100%"
- strokeWidth={0}
- fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
- className="flex dark:hidden"
- />
- </svg>
- <div
- className="absolute top-10 left-[calc(50%-4rem)] -z-10 hidden transform-gpu blur-3xl sm:left-[calc(50%-18rem)] lg:top-[calc(50%-30rem)] lg:left-48 xl:left-[calc(50%-24rem)] dark:flex"
- aria-hidden="true"
- >
- <div
- className="aspect-[1108/632] w-[69.25rem] bg-gradient-to-r from-[oklch(0.92_0.10_88)] to-[oklch(0.65_0.17_72)] opacity-20"
- style={{
- clipPath:
- "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
- }}
- />
- </div>
- <div className="mx-auto max-w-7xl px-6 pt-10 pb-24 sm:pb-40 lg:flex lg:px-8 lg:pt-40">
- <div className="mx-auto max-w-2xl flex-shrink-0 lg:mx-0 lg:max-w-xl lg:pt-8">
- <Image
- className="h-12 dark:invert"
- height={48}
- width={48}
- src="/parsertime.png"
- alt="Parsertime Logo"
- />
- <div className="mt-24 sm:mt-32 lg:mt-16">
- <Link
- href={latestUpdates!.url}
- target="_blank"
- className="inline-flex space-x-6"
- >
- <span className="bg-primary/10 text-primary ring-primary/20 dark:bg-primary/10 dark:text-primary dark:ring-primary/20 rounded-full px-3 py-1 text-sm leading-6 font-semibold ring-1 ring-inset">
- {t("hero.latestUpdates")}
- </span>
- <span className="inline-flex items-center space-x-2 text-sm leading-6 font-medium text-gray-600 dark:text-gray-300">
- <span>{latestUpdates!.title}</span>
- <ChevronRightIcon
- className="h-5 w-5 text-gray-400 dark:text-gray-500"
- aria-hidden="true"
- />
- </span>
- </Link>
- </div>
- <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl dark:text-white">
- {t("hero.title")}
- </h1>
- <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
- {t("hero.description")}
- </p>
- <div className="mt-10 flex items-center gap-x-6">
- <TrackedCtaButton
- href="/sign-up"
- location="hero"
- variant="original"
- >
- {t("hero.getStarted")}
- </TrackedCtaButton>
- <Link
- href="/demo"
- className="text-sm leading-6 font-semibold text-gray-900 dark:text-white"
- >
- {t("hero.liveDemo")} <span aria-hidden="true">→</span>
- </Link>
- </div>
- <div className="text-muted-foreground mt-4 flex items-center gap-x-2">
- <p className="text-xs">
- {t("hero.accountDescription")}{" "}
- <Link
- href="/sign-in"
- className="leading-6 font-semibold text-gray-900 dark:text-white"
- >
- {t("hero.signIn")} <span aria-hidden="true">→</span>
- </Link>
- </p>
- </div>
- </div>
- <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:mt-0 lg:mr-0 lg:ml-10 lg:max-w-none lg:flex-none xl:ml-32">
- <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
- <Image
- src="/player_page.png"
- alt="App screenshot"
- width={2432}
- height={1442}
- className="hidden w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 dark:flex"
- priority
- />
- <Image
- src="/player_page_light.png"
- alt="App screenshot"
- width={2432}
- height={1442}
- className="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10 dark:hidden"
- priority
- />
- </div>
- </div>
- </div>
- </div>
-
- {/* Logo cloud */}
- <div className="mx-auto mt-8 max-w-7xl px-6 sm:mt-16 lg:px-8">
- <h2 className="text-center text-lg leading-8 font-semibold text-gray-900 dark:text-white">
- {t("logoCloud.title")}
- </h2>
- <div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
- <Image
- className="col-span-2 max-h-12 w-full object-contain invert lg:col-span-1 dark:invert-0"
- src="/teams/stclair.svg"
- alt="St. Clair College"
- width={158}
- height={48}
- />
- <Image
- className="col-span-2 max-h-12 w-full object-contain invert lg:col-span-1 dark:invert-0"
- src="/teams/cornell.svg"
- alt="Cornell University"
- width={158}
- height={48}
- />
- <Image
- className="col-span-2 max-h-12 w-full object-contain invert lg:col-span-1 dark:invert-0"
- src="/teams/fiu.svg"
- alt="Florida International University"
- width={158}
- height={48}
- />
- <Image
- className="col-span-2 max-h-12 w-full object-contain invert lg:col-span-1 dark:invert-0"
- src="/teams/gsu.svg"
- alt="Georgia State University"
- width={158}
- height={48}
- />
- <Image
- className="col-span-2 max-h-12 w-full object-contain invert lg:col-span-1 dark:invert-0"
- src="/teams/vlln.png"
- alt="VLLN"
- width={158}
- height={48}
- />
- </div>
- </div>
-
- {/* Feature section */}
- <div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8">
- <div className="mx-auto max-w-2xl text-center">
- <h2 className="text-primary text-base leading-7 font-semibold">
- {t("feature1.subtitle")}
- </h2>
- <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
- {t("feature1.title")}
- </p>
- <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
- {t("feature1.description")}
- </p>
- </div>
- <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
- <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
- {primaryFeatures.map((feature) => (
- <div key={feature.name} className="flex flex-col">
- <dt className="text-base leading-7 font-semibold text-gray-900 dark:text-white">
- <div className="text-primary dark:bg-primary mb-6 flex h-10 w-10 items-center justify-center rounded-lg">
- <feature.icon
- className="h-6 w-6 dark:text-white"
- aria-hidden="true"
- />
- </div>
- {feature.name}
- </dt>
- <dd className="mt-1 flex flex-auto flex-col text-base leading-7 text-gray-600 dark:text-gray-300">
- <p className="flex-auto">{feature.description}</p>
- <p className="mt-6">
- <Link
- href={feature.href}
- className="text-primary text-sm leading-6 font-semibold"
- >
- {t("primaryFeatures.href")}{" "}
- <span aria-hidden="true">→</span>
- </Link>
- </p>
- </dd>
- </div>
- ))}
- </dl>
- </div>
- </div>
-
- {/* Feature section */}
- <div className="mt-32 sm:mt-56">
- <div className="mx-auto max-w-7xl px-6 lg:px-8">
- <div className="mx-auto max-w-2xl sm:text-center">
- <h2 className="text-primary text-base leading-7 font-semibold">
- {t("feature2.subtitle")}
- </h2>
- <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
- {t("feature2.title")}
- </p>
- <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
- {t("feature2.description")}
- </p>
- </div>
- </div>
- <div className="relative overflow-hidden pt-16">
- <div className="mx-auto max-w-7xl px-6 lg:px-8">
- <Image
- src="/team_charts.png"
- alt="App screenshot"
- className="hidden rounded-xl shadow-2xl ring-1 ring-white/10 dark:flex"
- width={2432}
- height={1442}
- />
- <Image
- src="/team_charts_light.png"
- alt="App screenshot"
- className="flex rounded-xl shadow-2xl ring-1 ring-gray-900/10 dark:hidden"
- width={2432}
- height={1442}
- />
- <div className="relative" aria-hidden="true">
- <div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%] dark:from-black" />
- </div>
- </div>
- </div>
- <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
- <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16 dark:text-gray-300">
- {secondaryFeatures.map((feature) => (
- <div key={feature.name} className="relative pl-9">
- <dt className="inline font-semibold text-gray-900 dark:text-white">
- <feature.icon
- className="text-primary dark:text-primary absolute top-1 left-1 h-5 w-5"
- aria-hidden="true"
- />
- {feature.name}
- </dt>{" "}
- <dd className="inline">{feature.description}</dd>
- </div>
- ))}
- </dl>
- </div>
- </div>
-
- {/* Stats */}
- <div className="mx-auto mt-32 max-w-7xl px-6 sm:mt-56 lg:px-8">
- <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
- <h2 className="text-primary text-base leading-8 font-semibold">
- {t("stats.subtitle")}
- </h2>
- <p className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
- {t("stats.title")}
- </p>
- <p className="mt-6 text-lg leading-8 text-gray-600 dark:text-gray-300">
- {t("stats.description")}
- </p>
- </div>
- <dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-gray-900 sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4 dark:text-white">
- {stats.map((stat) => (
- <div
- key={stat.id}
- className="flex flex-col gap-y-3 border-l border-gray-900/10 pl-6 dark:border-white/10"
- >
- <dt className="text-sm leading-6">{stat.name}</dt>
- <dd className="order-first text-3xl font-semibold tracking-tight">
- {stat.value}
- </dd>
- </div>
- ))}
- </dl>
- </div>
-
- {/* Testimonials */}
- <section className="bg-white px-6 pt-24 sm:pt-32 lg:px-8 dark:bg-black">
- <figure className="mx-auto max-w-2xl">
- <p className="sr-only">{t("testimonial.starRating")}</p>
- <div className="text-primary dark:text-primary flex gap-x-1">
- <StarIcon className="h-5 w-5 flex-none" aria-hidden="true" />
- <StarIcon className="h-5 w-5 flex-none" aria-hidden="true" />
- <StarIcon className="h-5 w-5 flex-none" aria-hidden="true" />
- <StarIcon className="h-5 w-5 flex-none" aria-hidden="true" />
- <StarIcon className="h-5 w-5 flex-none" aria-hidden="true" />
- </div>
- <blockquote className="mt-10 text-xl leading-8 font-semibold tracking-tight text-gray-900 sm:text-2xl sm:leading-9 dark:text-white">
- <p>{t("testimonial.quote")}</p>
- </blockquote>
- <figcaption className="mt-10 flex items-center gap-x-6">
- <Image
- className="h-12 w-12 rounded-full bg-gray-50 dark:bg-zinc-900"
- src="/marketing/coy.png"
- alt=""
- width={48}
- height={48}
- />
- <div className="text-sm leading-6">
- <div className="font-semibold text-gray-900 dark:text-white">
- {t("testimonial.author")}
- </div>
- <div className="mt-0.5 text-gray-600 dark:text-gray-300">
- {t("testimonial.role")}
- </div>
- </div>
- </figcaption>
- </figure>
- </section>
-
- {/* CTA section */}
- <div className="relative isolate mt-24 px-6 py-32 sm:mt-56 sm:py-40 lg:px-8">
- <svg
- className="absolute inset-0 -z-10 h-full w-full [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] stroke-gray-200 dark:stroke-white/10"
- aria-hidden="true"
- >
- <defs>
- <pattern
- id="983e3e4c-de6d-4c3f-8d64-b9761d1534cc"
- width={200}
- height={200}
- x="50%"
- y={-1}
- patternUnits="userSpaceOnUse"
- className="hidden dark:flex"
- >
- <path d="M.5 200V.5H200" fill="none" />
- </pattern>
- <pattern
- id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
- width={200}
- height={200}
- x="50%"
- y={-1}
- patternUnits="userSpaceOnUse"
- className="flex dark:hidden"
- >
- <path d="M.5 200V.5H200" fill="none" />
- </pattern>
- </defs>
- <svg x="50%" y={-1} className="overflow-visible fill-gray-800/20">
- <path
- d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
- strokeWidth={0}
- className="hidden dark:flex"
- />
- <path
- d="M.5 200V.5H200"
- fill="none"
- className="flex dark:hidden"
- />
- </svg>
- <rect
- width="100%"
- height="100%"
- strokeWidth={0}
- fill="url(#983e3e4c-de6d-4c3f-8d64-b9761d1534cc)"
- className="hidden dark:flex"
- />
- <rect
- width="100%"
- height="100%"
- strokeWidth={0}
- fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
- className="flex dark:hidden"
- />
- </svg>
- <div
- className="absolute inset-x-0 top-10 -z-10 hidden transform-gpu justify-center overflow-hidden blur-3xl dark:flex"
- aria-hidden="true"
- >
- <div
- className="aspect-[1108/632] w-[69.25rem] flex-none bg-gradient-to-r from-[oklch(0.92_0.10_88)] to-[oklch(0.65_0.17_72)] opacity-20"
- style={{
- clipPath:
- "polygon(73.6% 51.7%, 91.7% 11.8%, 100% 46.4%, 97.4% 82.2%, 92.5% 84.9%, 75.7% 64%, 55.3% 47.5%, 46.5% 49.4%, 45% 62.9%, 50.3% 87.2%, 21.3% 64.1%, 0.1% 100%, 5.4% 51.1%, 21.4% 63.9%, 58.9% 0.2%, 73.6% 51.7%)",
- }}
- />
- </div>
- <div className="mx-auto max-w-2xl text-center">
- <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-white">
- {t("cta.subtitle")}
- <br />
- {t("cta.title")}
- </h2>
- <p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-600 dark:text-gray-300">
- {t("cta.description")}
- </p>
- <div className="mt-10 flex items-center justify-center gap-x-6">
- <TrackedCtaButton
- href="/sign-up"
- location="footer-cta"
- variant="original"
- >
- {t("cta.getStarted")}
- </TrackedCtaButton>
- <Link
- href="/about"
- className="text-sm leading-6 font-semibold text-gray-900 dark:text-white"
- >
- {t("cta.learnMore")} <span aria-hidden="true">→</span>
- </Link>
- </div>
- </div>
- </div>
- </main>
-
- {/* Footer */}
- <footer aria-labelledby="footer-heading" className="relative">
- <h2 id="footer-heading" className="sr-only">
- {t("footer.screenReader")}
- </h2>
- <div className="mx-auto max-w-7xl px-6 pt-4 pb-8 lg:px-8">
- <div className="border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between dark:border-white/10">
- <div className="flex space-x-6 md:order-2">
- {footerNavigation.social.map((item) => (
- <Link
- key={item.name}
- href={item.href}
- target="_blank"
- className="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400"
- >
- <span className="sr-only">{item.name}</span>
- <item.icon className="h-6 w-6" aria-hidden="true" />
- </Link>
- ))}
- </div>
- <p className="mt-8 text-xs leading-5 text-gray-400 md:order-1 md:mt-0">
- © 2024–{new Date().getFullYear()}{" "}
- {t("footer.copyright")}
- </p>
- </div>
- </div>
- </footer>
- </div>
- );
-}
diff --git a/apps/web/src/components/home/landing-stats.ts b/apps/web/src/components/home/landing-stats.ts
index 7eb76eb6f..012a2d1c6 100644
--- a/apps/web/src/components/home/landing-stats.ts
+++ b/apps/web/src/components/home/landing-stats.ts
@@ -1,6 +1,6 @@
import { getApproximateCounts } from "@/lib/approximate-count";
import prisma from "@/lib/prisma";
-import { unstable_cache } from "next/cache";
+import { cacheLife } from "next/cache";
/**
* Rounds a count down to a "nice" number for display.
@@ -21,30 +21,29 @@ export function roundCount(count: number): { value: number; suffix: string } {
return { value: count, suffix: "+" };
}
-export const getLandingPageStats = unstable_cache(
- async () => {
- // Large tables use approximate counts (pg_class.reltuples) to avoid a full
- // sequential scan per cache refresh; Team is small, so an exact count is fine.
- const [approx, teamResult] = await Promise.allSettled([
- getApproximateCounts(["PlayerStat", "CalculatedStat", "Kill", "Map"]),
- prisma.team.count(),
- ]);
+export async function getLandingPageStats() {
+ "use cache";
+ cacheLife("hours");
- const counts =
- approx.status === "fulfilled"
- ? approx.value
- : { PlayerStat: 0, CalculatedStat: 0, Kill: 0, Map: 0 };
- const teamCount = teamResult.status === "fulfilled" ? teamResult.value : 0;
+ // Large tables use approximate counts (pg_class.reltuples) to avoid a full
+ // sequential scan per cache refresh; Team is small, so an exact count is fine.
+ const [approx, teamResult] = await Promise.allSettled([
+ getApproximateCounts(["PlayerStat", "CalculatedStat", "Kill", "Map"]),
+ prisma.team.count(),
+ ]);
- // Use known floor values if a query fails, so the landing page
- // never shows "0+" for a stat that clearly isn't zero.
- return {
- statsCount: Math.max(counts.PlayerStat + counts.CalculatedStat, 800_000),
- killCount: Math.max(counts.Kill, 450_000),
- mapCount: Math.max(counts.Map, 6_000),
- teamCount: Math.max(teamCount, 10),
- };
- },
- ["landing-page-stats"],
- { revalidate: 3600 }
-);
+ const counts =
+ approx.status === "fulfilled"
+ ? approx.value
+ : { PlayerStat: 0, CalculatedStat: 0, Kill: 0, Map: 0 };
+ const teamCount = teamResult.status === "fulfilled" ? teamResult.value : 0;
+
+ // Use known floor values if a query fails, so the landing page
+ // never shows "0+" for a stat that clearly isn't zero.
+ return {
+ statsCount: Math.max(counts.PlayerStat + counts.CalculatedStat, 800_000),
+ killCount: Math.max(counts.Kill, 450_000),
+ mapCount: Math.max(counts.Map, 6_000),
+ teamCount: Math.max(teamCount, 10),
+ };
+}
diff --git a/apps/web/src/components/home/v3/cta-section.tsx b/apps/web/src/components/home/v3/cta-section.tsx
index f341d96d6..f864c9db3 100644
--- a/apps/web/src/components/home/v3/cta-section.tsx
+++ b/apps/web/src/components/home/v3/cta-section.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
import { track } from "@vercel/analytics";
import type { Route } from "next";
import Link from "next/link";
+import { useIsLoggedIn } from "./logged-in-context";
type CtaSectionProps = {
subtitle: string;
@@ -11,7 +12,6 @@ type CtaSectionProps = {
description: string;
getStarted: string;
learnMore: string;
- isLoggedIn: boolean;
learnMoreHref?: string;
};
@@ -21,9 +21,9 @@ export function CtaSection({
description,
getStarted,
learnMore,
- isLoggedIn,
learnMoreHref = "/about",
}: CtaSectionProps) {
+ const isLoggedIn = useIsLoggedIn();
return (
<section
className="relative overflow-hidden py-28 sm:py-36"
diff --git a/apps/web/src/components/home/v3/hero.tsx b/apps/web/src/components/home/v3/hero.tsx
index 8609c25c3..de0fbb718 100644
--- a/apps/web/src/components/home/v3/hero.tsx
+++ b/apps/web/src/components/home/v3/hero.tsx
@@ -8,6 +8,7 @@ import { motion, useReducedMotion } from "framer-motion";
import type { Route } from "next";
import Image from "next/image";
import Link from "next/link";
+import { useIsLoggedIn } from "./logged-in-context";
type HeroStat = {
id: string;
@@ -28,7 +29,6 @@ type HeroProps = {
latestUpdatesTitle?: string;
latestUpdatesUrl?: string;
stats: HeroStat[];
- isLoggedIn: boolean;
};
const navLinks = [
@@ -119,8 +119,8 @@ export function Hero({
latestUpdatesTitle,
latestUpdatesUrl,
stats,
- isLoggedIn,
}: HeroProps) {
+ const isLoggedIn = useIsLoggedIn();
const isFirstVisit = useFirstVisit();
const prefersReducedMotion = useReducedMotion();
diff --git a/apps/web/src/components/home/v3/landing-page.tsx b/apps/web/src/components/home/v3/landing-page.tsx
index b457bd553..d336dd84e 100644
--- a/apps/web/src/components/home/v3/landing-page.tsx
+++ b/apps/web/src/components/home/v3/landing-page.tsx
@@ -6,11 +6,13 @@ import { StructuredData } from "@/components/home/new-landing/structured-data";
import { TrackedLink } from "@/components/home/new-landing/tracked-link";
import { TrackedSection } from "@/components/home/new-landing/tracked-section";
import { auth } from "@/lib/auth";
+import { getStaticTranslations } from "@/lib/metadata-i18n";
import { get } from "@vercel/edge-config";
+import { cacheLife } from "next/cache";
import type { Route } from "next";
-import { getTranslations } from "next-intl/server";
-import type { SVGProps } from "react";
+import { Suspense, type SVGProps } from "react";
import { CtaSection } from "./cta-section";
+import { LoggedInHydrator, LoggedInProvider } from "./logged-in-context";
import { DataPipeline } from "./data-pipeline";
import { Features } from "./features";
import { Hero } from "./hero";
@@ -66,20 +68,22 @@ const footerNavigation: FooterNavigation = {
],
};
+/**
+ * The whole page prerenders into the static shell: stats and latest-updates
+ * reads are cached, copy resolves from the default-locale catalog (a
+ * `getTranslations` call would read the LOCALE cookie and force the page
+ * dynamic), and the only per-visitor bit — whether the CTAs say "Dashboard" —
+ * streams in through `LoggedInIsland` after first paint.
+ */
export async function V3LandingPage() {
- const [
- { statsCount, killCount, mapCount, teamCount },
- latestUpdates,
- t,
- session,
- ] = await Promise.all([
- getLandingPageStats(),
- get<{ title: string; url: Route }>("latestUpdates"),
- getTranslations("landingPage"),
- auth(),
- ]);
+ const t = getStaticTranslations("landingPage");
+ const [{ statsCount, killCount, mapCount, teamCount }, latestUpdates, year] =
+ await Promise.all([
+ getLandingPageStats(),
+ getLatestUpdates(),
+ getCopyrightYear(),
+ ]);
- const isLoggedIn = !!session?.user;
const hasLatestUpdates =
typeof latestUpdates?.title === "string" &&
latestUpdates.title.trim().length > 0 &&
@@ -111,255 +115,283 @@ export async function V3LandingPage() {
];
return (
- <div className="bg-background text-foreground">
- <StructuredData teamCount={teamCount} />
- <a
- href="#main-content"
- className="focus-visible:bg-background focus-visible:text-foreground sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-4 focus-visible:left-4 focus-visible:z-50 focus-visible:rounded-md focus-visible:px-4 focus-visible:py-2 focus-visible:text-sm focus-visible:font-semibold focus-visible:shadow-lg"
- >
- Skip to content
- </a>
- <main id="main-content">
- <TrackedSection name="hero">
- <Hero
- eyebrow={t("hero.eyebrow")}
- title={t("hero.title")}
- description={t("hero.description")}
- getStarted={t("hero.getStarted")}
- liveDemo={t("hero.liveDemo")}
- trustedBy={t("hero.trustedBy", { count: teamCount })}
- liveData={t("hero.liveData")}
- latestUpdatesLabel={t("hero.latestUpdates")}
- latestUpdatesTitle={
- hasLatestUpdates ? latestUpdates.title : undefined
- }
- latestUpdatesUrl={hasLatestUpdates ? latestUpdates.url : undefined}
- stats={statsData}
- isLoggedIn={isLoggedIn}
- />
- </TrackedSection>
+ <LoggedInProvider>
+ <div className="bg-background text-foreground">
+ <Suspense fallback={null}>
+ <LoggedInIsland />
+ </Suspense>
+ <StructuredData teamCount={teamCount} />
+ <a
+ href="#main-content"
+ className="focus-visible:bg-background focus-visible:text-foreground sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-4 focus-visible:left-4 focus-visible:z-50 focus-visible:rounded-md focus-visible:px-4 focus-visible:py-2 focus-visible:text-sm focus-visible:font-semibold focus-visible:shadow-lg"
+ >
+ Skip to content
+ </a>
+ <main id="main-content">
+ <TrackedSection name="hero">
+ <Hero
+ eyebrow={t("hero.eyebrow")}
+ title={t("hero.title")}
+ description={t("hero.description")}
+ getStarted={t("hero.getStarted")}
+ liveDemo={t("hero.liveDemo")}
+ trustedBy={t("hero.trustedBy", { count: teamCount })}
+ liveData={t("hero.liveData")}
+ latestUpdatesLabel={t("hero.latestUpdates")}
+ latestUpdatesTitle={
+ hasLatestUpdates ? latestUpdates.title : undefined
+ }
+ latestUpdatesUrl={
+ hasLatestUpdates ? latestUpdates.url : undefined
+ }
+ stats={statsData}
+ />
+ </TrackedSection>
- <TrackedSection name="logo-cloud">
- <LogoCloud title={t("logoCloud.title")} />
- </TrackedSection>
+ <TrackedSection name="logo-cloud">
+ <LogoCloud title={t("logoCloud.title")} />
+ </TrackedSection>
- <TrackedSection name="positional-showcase">
- <PositionalShowcase
- badge={t("positional.badge")}
- title={t("positional.title")}
- description={t("positional.description")}
- subFeatures={[
- {
- name: t("positional.replayName"),
- description: t("positional.replayDescription"),
- },
- {
- name: t("positional.heatmapsName"),
- description: t("positional.heatmapsDescription"),
- },
- {
- name: t("positional.averagesName"),
- description: t("positional.averagesDescription"),
- },
- ]}
- />
- </TrackedSection>
+ <TrackedSection name="positional-showcase">
+ <PositionalShowcase
+ badge={t("positional.badge")}
+ title={t("positional.title")}
+ description={t("positional.description")}
+ subFeatures={[
+ {
+ name: t("positional.replayName"),
+ description: t("positional.replayDescription"),
+ },
+ {
+ name: t("positional.heatmapsName"),
+ description: t("positional.heatmapsDescription"),
+ },
+ {
+ name: t("positional.averagesName"),
+ description: t("positional.averagesDescription"),
+ },
+ ]}
+ />
+ </TrackedSection>
- <TrackedSection name="features">
- <Features
- subtitle={t("feature1.subtitle")}
- title={t("feature1.title")}
- description={t("feature1.description")}
- bentoHeadings={{
- dataDecisions: t("featureBento.dataDecisions"),
- everyMetric: t("featureBento.everyMetric"),
- noSpreadsheets: t("featureBento.noSpreadsheets"),
- spotChanges: t("featureBento.spotChanges"),
- yourData: t("featureBento.yourData"),
- }}
- features={{
- builtByCoaches: {
- name: t("primaryFeatures.builtByCoaches.name"),
- description: t("primaryFeatures.builtByCoaches.description"),
- },
- shareWithTeam: {
- name: t("primaryFeatures.shareWithTeam.name"),
- description: t("primaryFeatures.shareWithTeam.description"),
- },
- dataCharts: {
- name: t("secondaryFeatures.dataCharts.name"),
- description: t("secondaryFeatures.dataCharts.description"),
- },
- filterStats: {
- name: t("secondaryFeatures.filterStats.name"),
- description: t("secondaryFeatures.filterStats.description"),
- },
- advancedSecurity: {
- name: t("secondaryFeatures.advancedSecurity.name"),
- description: t(
- "secondaryFeatures.advancedSecurity.description"
- ),
- },
- fullyCustomizable: {
- name: t("secondaryFeatures.fullyCustomizable.name"),
- description: t(
- "secondaryFeatures.fullyCustomizable.description"
- ),
- },
- }}
- />
- </TrackedSection>
+ <TrackedSection name="features">
+ <Features
+ subtitle={t("feature1.subtitle")}
+ title={t("feature1.title")}
+ description={t("feature1.description")}
+ bentoHeadings={{
+ dataDecisions: t("featureBento.dataDecisions"),
+ everyMetric: t("featureBento.everyMetric"),
+ noSpreadsheets: t("featureBento.noSpreadsheets"),
+ spotChanges: t("featureBento.spotChanges"),
+ yourData: t("featureBento.yourData"),
+ }}
+ features={{
+ builtByCoaches: {
+ name: t("primaryFeatures.builtByCoaches.name"),
+ description: t("primaryFeatures.builtByCoaches.description"),
+ },
+ shareWithTeam: {
+ name: t("primaryFeatures.shareWithTeam.name"),
+ description: t("primaryFeatures.shareWithTeam.description"),
+ },
+ dataCharts: {
+ name: t("secondaryFeatures.dataCharts.name"),
+ description: t("secondaryFeatures.dataCharts.description"),
+ },
+ filterStats: {
+ name: t("secondaryFeatures.filterStats.name"),
+ description: t("secondaryFeatures.filterStats.description"),
+ },
+ advancedSecurity: {
+ name: t("secondaryFeatures.advancedSecurity.name"),
+ description: t(
+ "secondaryFeatures.advancedSecurity.description"
+ ),
+ },
+ fullyCustomizable: {
+ name: t("secondaryFeatures.fullyCustomizable.name"),
+ description: t(
+ "secondaryFeatures.fullyCustomizable.description"
+ ),
+ },
+ }}
+ />
+ </TrackedSection>
- <TrackedSection name="data-pipeline">
- <DataPipeline
- eyebrow={t("pipeline.eyebrow")}
- title={t("pipeline.title")}
- description={t("pipeline.description")}
- sourcesLabel={t("pipeline.sourcesLabel")}
- processingLabel={t("pipeline.processingLabel")}
- outputsLabel={t("pipeline.outputsLabel")}
- outputs={{
- dashboards: t("pipeline.outputDashboards"),
- ratings: t("pipeline.outputRatings"),
- replays: t("pipeline.outputReplays"),
- trends: t("pipeline.outputTrends"),
- }}
- />
- </TrackedSection>
+ <TrackedSection name="data-pipeline">
+ <DataPipeline
+ eyebrow={t("pipeline.eyebrow")}
+ title={t("pipeline.title")}
+ description={t("pipeline.description")}
+ sourcesLabel={t("pipeline.sourcesLabel")}
+ processingLabel={t("pipeline.processingLabel")}
+ outputsLabel={t("pipeline.outputsLabel")}
+ outputs={{
+ dashboards: t("pipeline.outputDashboards"),
+ ratings: t("pipeline.outputRatings"),
+ replays: t("pipeline.outputReplays"),
+ trends: t("pipeline.outputTrends"),
+ }}
+ />
+ </TrackedSection>
- <TrackedSection name="how-it-works">
- <HowItWorks
- title={`${t("howItWorks.title")} ${t("howItWorks.titleAccent")}`}
- steps={[
- {
- id: 1,
- title: t("howItWorks.step1Title"),
- description: t("howItWorks.step1Description"),
- imageSrcDark: "/dashboard.png",
- imageSrcLight: "/dashboard-light.png",
- imageAlt: "Create a team",
- },
- {
- id: 2,
- title: t("howItWorks.step2Title"),
- description: t("howItWorks.step2Description"),
- imageSrcDark: "/create-scrim.png",
- imageSrcLight: "/create-scrim-light.png",
- imageAlt: "Upload scrims",
- },
- {
- id: 3,
- title: t("howItWorks.step3Title"),
- description: t("howItWorks.step3Description"),
- imageSrcDark: "/player-page.png",
- imageSrcLight: "/player-page-light.png",
- imageAlt: "See instant results",
- },
- ]}
- />
- </TrackedSection>
+ <TrackedSection name="how-it-works">
+ <HowItWorks
+ title={`${t("howItWorks.title")} ${t("howItWorks.titleAccent")}`}
+ steps={[
+ {
+ id: 1,
+ title: t("howItWorks.step1Title"),
+ description: t("howItWorks.step1Description"),
+ imageSrcDark: "/dashboard.png",
+ imageSrcLight: "/dashboard-light.png",
+ imageAlt: "Create a team",
+ },
+ {
+ id: 2,
+ title: t("howItWorks.step2Title"),
+ description: t("howItWorks.step2Description"),
+ imageSrcDark: "/create-scrim.png",
+ imageSrcLight: "/create-scrim-light.png",
+ imageAlt: "Upload scrims",
+ },
+ {
+ id: 3,
+ title: t("howItWorks.step3Title"),
+ description: t("howItWorks.step3Description"),
+ imageSrcDark: "/player-page.png",
+ imageSrcLight: "/player-page-light.png",
+ imageAlt: "See instant results",
+ },
+ ]}
+ />
+ </TrackedSection>
- <TrackedSection name="csr-spotlight">
- <Spotlight
- subtitle={t("csrSpotlight.subtitle")}
- title={t("csrSpotlight.title")}
- description={t("csrSpotlight.description")}
- highlights={[
- {
- label: t("csrSpotlight.highlight1Label"),
- description: t("csrSpotlight.highlight1Description"),
- },
- {
- label: t("csrSpotlight.highlight2Label"),
- description: t("csrSpotlight.highlight2Description"),
- },
- {
- label: t("csrSpotlight.highlight3Label"),
- description: t("csrSpotlight.highlight3Description"),
- },
- ]}
- imageSrcDark="/hero-sr.png"
- imageSrcLight="/hero-sr-light.png"
- imageAlt="Custom Hero Skill Rating screenshot"
- imagePosition="right"
- />
- </TrackedSection>
+ <TrackedSection name="csr-spotlight">
+ <Spotlight
+ subtitle={t("csrSpotlight.subtitle")}
+ title={t("csrSpotlight.title")}
+ description={t("csrSpotlight.description")}
+ highlights={[
+ {
+ label: t("csrSpotlight.highlight1Label"),
+ description: t("csrSpotlight.highlight1Description"),
+ },
+ {
+ label: t("csrSpotlight.highlight2Label"),
+ description: t("csrSpotlight.highlight2Description"),
+ },
+ {
+ label: t("csrSpotlight.highlight3Label"),
+ description: t("csrSpotlight.highlight3Description"),
+ },
+ ]}
+ imageSrcDark="/hero-sr.png"
+ imageSrcLight="/hero-sr-light.png"
+ imageAlt="Custom Hero Skill Rating screenshot"
+ imagePosition="right"
+ />
+ </TrackedSection>
- <TrackedSection name="team-spotlight">
- <Spotlight
- subtitle={t("teamStatsSpotlight.subtitle")}
- title={t("teamStatsSpotlight.title")}
- description={t("teamStatsSpotlight.description")}
- highlights={[
- {
- label: t("teamStatsSpotlight.highlight1Label"),
- description: t("teamStatsSpotlight.highlight1Description"),
- },
- {
- label: t("teamStatsSpotlight.highlight2Label"),
- description: t("teamStatsSpotlight.highlight2Description"),
- },
- {
- label: t("teamStatsSpotlight.highlight3Label"),
- description: t("teamStatsSpotlight.highlight3Description"),
- },
- ]}
- imageSrcDark="/team-swaps.png"
- imageSrcLight="/team-swaps-light.png"
- imageAlt="Team Analytics Dashboard screenshot"
- imagePosition="left"
- />
- </TrackedSection>
+ <TrackedSection name="team-spotlight">
+ <Spotlight
+ subtitle={t("teamStatsSpotlight.subtitle")}
+ title={t("teamStatsSpotlight.title")}
+ description={t("teamStatsSpotlight.description")}
+ highlights={[
+ {
+ label: t("teamStatsSpotlight.highlight1Label"),
+ description: t("teamStatsSpotlight.highlight1Description"),
+ },
+ {
+ label: t("teamStatsSpotlight.highlight2Label"),
+ description: t("teamStatsSpotlight.highlight2Description"),
+ },
+ {
+ label: t("teamStatsSpotlight.highlight3Label"),
+ description: t("teamStatsSpotlight.highlight3Description"),
+ },
+ ]}
+ imageSrcDark="/team-swaps.png"
+ imageSrcLight="/team-swaps-light.png"
+ imageAlt="Team Analytics Dashboard screenshot"
+ imagePosition="left"
+ />
+ </TrackedSection>
- <TrackedSection name="testimonial">
- <Testimonial
- starRating={t("testimonial.starRating")}
- quote={t("testimonial.quote")}
- author={t("testimonial.author")}
- role={t("testimonial.role")}
- />
- </TrackedSection>
+ <TrackedSection name="testimonial">
+ <Testimonial
+ starRating={t("testimonial.starRating")}
+ quote={t("testimonial.quote")}
+ author={t("testimonial.author")}
+ role={t("testimonial.role")}
+ />
+ </TrackedSection>
- <TrackedSection name="cta">
- <CtaSection
- subtitle={t("cta.subtitle")}
- title={t("cta.title")}
- description={t("cta.description")}
- getStarted={t("cta.getStarted")}
- learnMore={t("cta.learnMore")}
- isLoggedIn={isLoggedIn}
- />
- </TrackedSection>
- </main>
+ <TrackedSection name="cta">
+ <CtaSection
+ subtitle={t("cta.subtitle")}
+ title={t("cta.title")}
+ description={t("cta.description")}
+ getStarted={t("cta.getStarted")}
+ learnMore={t("cta.learnMore")}
+ />
+ </TrackedSection>
+ </main>
- <footer aria-labelledby="footer-heading" className="relative">
- <h2 id="footer-heading" className="sr-only">
- {t("footer.screenReader")}
- </h2>
- <div className="mx-auto max-w-7xl px-6 pt-4 pb-8 lg:px-8">
- <div className="border-border border-t pt-8 md:flex md:items-center md:justify-between">
- <div className="flex space-x-6 md:order-2">
- {footerNavigation.social.map((item) => (
- <TrackedLink
- key={item.name}
- href={item.href}
- target="_blank"
- event="social-click"
- properties={{ platform: item.name }}
- className="text-muted-foreground hover:text-foreground transition-colors"
- >
- <span className="sr-only">{item.name}</span>
- <item.icon className="h-6 w-6" aria-hidden="true" />
- </TrackedLink>
- ))}
+ <footer aria-labelledby="footer-heading" className="relative">
+ <h2 id="footer-heading" className="sr-only">
+ {t("footer.screenReader")}
+ </h2>
+ <div className="mx-auto max-w-7xl px-6 pt-4 pb-8 lg:px-8">
+ <div className="border-border border-t pt-8 md:flex md:items-center md:justify-between">
+ <div className="flex space-x-6 md:order-2">
+ {footerNavigation.social.map((item) => (
+ <TrackedLink
+ key={item.name}
+ href={item.href}
+ target="_blank"
+ event="social-click"
+ properties={{ platform: item.name }}
+ className="text-muted-foreground hover:text-foreground transition-colors"
+ >
+ <span className="sr-only">{item.name}</span>
+ <item.icon className="h-6 w-6" aria-hidden="true" />
+ </TrackedLink>
+ ))}
+ </div>
+ <p className="text-muted-foreground mt-8 text-xs leading-5 md:order-1 md:mt-0">
+ © 2024–{year} {t("footer.copyright")}
+ </p>
</div>
- <p className="text-muted-foreground mt-8 text-xs leading-5 md:order-1 md:mt-0">
- © 2024–{new Date().getFullYear()}{" "}
- {t("footer.copyright")}
- </p>
</div>
- </div>
- </footer>
- </div>
+ </footer>
+ </div>
+ </LoggedInProvider>
);
}
+
+async function getLatestUpdates() {
+ "use cache";
+ cacheLife("hours");
+ return get<{ title: string; url: Route }>("latestUpdates");
+}
+
+/**
+ * `new Date()` is disallowed in prerendered shells (nondeterministic across
+ * PPR passes); inside `use cache` it executes once when the cache entry is
+ * filled, which is exactly the behavior a copyright year wants.
+ */
+// oxlint-disable-next-line typescript/require-await -- "use cache" must be async
+async function getCopyrightYear() {
+ "use cache";
+ cacheLife("days");
+ return new Date().getFullYear();
+}
+
+/** The only per-visitor read on the landing page, streamed after the shell. */
+async function LoggedInIsland() {
+ const session = await auth();
+ return <LoggedInHydrator isLoggedIn={!!session?.user} />;
+}
diff --git a/apps/web/src/components/home/v3/logged-in-context.tsx b/apps/web/src/components/home/v3/logged-in-context.tsx
new file mode 100644
index 000000000..c2efea5ae
--- /dev/null
+++ b/apps/web/src/components/home/v3/logged-in-context.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, use, useEffect, useState } from "react";
+
+const LoggedInContext = createContext(false);
+const LoggedInSetterContext = createContext<(value: boolean) => void>(
+ () => undefined
+);
+
+/**
+ * Login state for the landing page CTAs. Defaults to logged-out so the whole
+ * marketing page prerenders into the static shell (an `auth()` read would
+ * force it dynamic); `LoggedInHydrator` streams the real value in and flips
+ * the CTAs to "Dashboard" for signed-in visitors after first paint.
+ */
+export function LoggedInProvider({ children }: { children: React.ReactNode }) {
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+ return (
+ <LoggedInSetterContext value={setIsLoggedIn}>
+ <LoggedInContext value={isLoggedIn}>{children}</LoggedInContext>
+ </LoggedInSetterContext>
+ );
+}
+
+/** Rendered by the landing page's request-time island. */
+export function LoggedInHydrator({ isLoggedIn }: { isLoggedIn: boolean }) {
+ const setIsLoggedIn = use(LoggedInSetterContext);
+
+ useEffect(() => {
+ setIsLoggedIn(isLoggedIn);
+ }, [isLoggedIn, setIsLoggedIn]);
+
+ return null;
+}
+
+export function useIsLoggedIn(): boolean {
+ return use(LoggedInContext);
+}
diff --git a/apps/web/src/components/intl-provider.tsx b/apps/web/src/components/intl-provider.tsx
new file mode 100644
index 000000000..a5e52eb5e
--- /dev/null
+++ b/apps/web/src/components/intl-provider.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { defaultLocale, type Locale } from "@/i18n/config";
+import type { AbstractIntlMessages } from "next-intl";
+import { NextIntlClientProvider } from "next-intl";
+import { createContext, use, useEffect, useState } from "react";
+
+type IntlOverride = { locale: Locale; messages: AbstractIntlMessages };
+
+const IntlOverrideContext = createContext<(override: IntlOverride) => void>(
+ () => undefined
+);
+
+/**
+ * Stateful shell around `NextIntlClientProvider` so the root layout can stay
+ * in the static shell: it renders immediately with the bundled default-locale
+ * messages, and `IntlHydrator` (streamed from a request-time island) swaps in
+ * the cookie-selected locale once known. Users on the default locale never
+ * see a swap; other locales briefly render client strings in the default
+ * locale on hard loads. Server components are unaffected — they resolve
+ * `getTranslations` per request as before.
+ */
+export function IntlProvider({
+ children,
+ defaultMessages,
+}: {
+ children: React.ReactNode;
+ defaultMessages: AbstractIntlMessages;
+}) {
+ const [override, setOverride] = useState<IntlOverride | null>(null);
+
+ return (
+ <IntlOverrideContext value={setOverride}>
+ <NextIntlClientProvider
+ locale={override?.locale ?? defaultLocale}
+ messages={override?.messages ?? defaultMessages}
+ // Explicit so next-intl never "environment-falls-back" to the server
+ // request config during prerender — that path reads the LOCALE cookie
+ // and would force every route with client translations to be dynamic.
+ // UTC matches what the fallback resolved to on Vercel before.
+ timeZone="UTC"
+ >
+ {children}
+ </NextIntlClientProvider>
+ </IntlOverrideContext>
+ );
+}
+
+/** Rendered by the request-time island; pushes the real locale into state. */
+export function IntlHydrator({
+ locale,
+ messages,
+}: {
+ locale: Locale;
+ messages: AbstractIntlMessages;
+}) {
+ const setOverride = use(IntlOverrideContext);
+
+ useEffect(() => {
+ setOverride({ locale, messages });
+ }, [locale, messages, setOverride]);
+
+ return null;
+}
diff --git a/apps/web/src/components/leaderboard/tsr-leaderboard.tsx b/apps/web/src/components/leaderboard/tsr-leaderboard.tsx
index 160899bae..3e9bfcccb 100644
--- a/apps/web/src/components/leaderboard/tsr-leaderboard.tsx
+++ b/apps/web/src/components/leaderboard/tsr-leaderboard.tsx
@@ -61,9 +61,13 @@ const COLS =
const PAGE_SIZE = 50;
-function formatRelativeDate(d: Date | null, t: TsrMessages): string {
- if (!d) return "—";
- const days = Math.floor((Date.now() - d.getTime()) / 86_400_000);
+function formatRelativeDate(
+ d: Date | null,
+ t: TsrMessages,
+ now: number | null
+): string {
+ if (!d || now === null) return "—";
+ const days = Math.floor((now - d.getTime()) / 86_400_000);
if (days < 1) return t("relative.today");
if (days < 7) return t("relative.days", { count: days });
if (days < 30) return t("relative.weeks", { count: Math.floor(days / 7) });
@@ -71,9 +75,13 @@ function formatRelativeDate(d: Date | null, t: TsrMessages): string {
return t("relative.years", { count: Math.floor(days / 365) });
}
-function formatComputedAt(d: Date | null, t: TsrMessages): string | null {
- if (!d) return null;
- const minutes = Math.floor((Date.now() - d.getTime()) / 60_000);
+function formatComputedAt(
+ d: Date | null,
+ t: TsrMessages,
+ now: number | null
+): string | null {
+ if (!d || now === null) return null;
+ const minutes = Math.floor((now - d.getTime()) / 60_000);
if (minutes < 1) return t("relative.justNow");
if (minutes < 60) return t("relative.minutesAgo", { count: minutes });
const hours = Math.floor(minutes / 60);
@@ -180,6 +188,10 @@ async function fetchSnapshot(
export function TsrLeaderboard({ initialSnapshot }: Props) {
const t = useTranslations("leaderboardPage.tsr");
const formatter = useFormatter();
+ // Resolved after mount so relative-time labels don't read the clock during
+ // the Cache Components prerender pass.
+ const [now, setNow] = useState<number | null>(null);
+ useEffect(() => setNow(Date.now()), []);
const [region, setRegion] = useState<RegionFilter>("All");
const [tier, setTier] = useState<TierFilter>("All");
const [sortKey, setSortKey] = useState<TsrSortKey>("rating");
@@ -237,7 +249,7 @@ export function TsrLeaderboard({ initialSnapshot }: Props) {
}
}, [result.data, offset]);
- const computedAt = formatComputedAt(snapshot.meta.computedAt, t);
+ const computedAt = formatComputedAt(snapshot.meta.computedAt, t, now);
const showInactive = debouncedQuery.trim() !== "";
const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -395,6 +407,7 @@ export function TsrLeaderboard({ initialSnapshot }: Props) {
showInactive={showInactive}
t={t}
formatter={formatter}
+ now={now}
/>
))}
</ul>
@@ -496,6 +509,7 @@ function PlayerRow({
showInactive,
t,
formatter,
+ now,
}: {
row: TsrLeaderboardRow;
selected: boolean;
@@ -503,6 +517,7 @@ function PlayerRow({
showInactive: boolean;
t: TsrMessages;
formatter: ReturnType<typeof useFormatter>;
+ now: number | null;
}) {
const isTop = row.rank === 1;
const rank = String(row.rank).padStart(2, "0");
@@ -595,7 +610,7 @@ function PlayerRow({
</div>
<div className="text-muted-foreground hidden text-right font-mono text-sm tabular-nums sm:block">
- {formatRelativeDate(row.lastMatchAt, t)}
+ {formatRelativeDate(row.lastMatchAt, t, now)}
</div>
</li>
);
diff --git a/apps/web/src/components/map/active-map-tab.tsx b/apps/web/src/components/map/active-map-tab.tsx
index a9a288975..7a7853bca 100644
--- a/apps/web/src/components/map/active-map-tab.tsx
+++ b/apps/web/src/components/map/active-map-tab.tsx
@@ -10,11 +10,11 @@ import { ReplayTab } from "@/components/map/replay/replay-tab";
import { RoutesTab } from "@/components/map/routes/routes-tab";
import { TipTap } from "@/components/tiptap/tiptap";
import { VodOverview } from "@/components/vods/vod-overview";
+import { getCachedFightInitiation } from "@/data/cached/map-cache";
import type { MatchStoryResult } from "@/data/map/match-story-service";
-import {
- getFightInitiationForMapData,
- type MapInitiationResult,
-} from "@/lib/fight-initiation";
+import type { Locale } from "@/i18n/config";
+import type { MapInitiationResult } from "@/lib/fight-initiation";
+import prisma from "@/lib/prisma";
type ActiveMapTabProps = {
/** The tab currently selected via the `?tab=` search param. */
@@ -22,12 +22,17 @@ type ActiveMapTabProps = {
id: number;
mapDataId: number;
scrimId: number;
+ /**
+ * Viewer locale, threaded in because the tab components are cached
+ * ("use cache") and can't read the LOCALE cookie themselves.
+ */
+ locale: Locale;
team1Color: string;
team2Color: string;
tempoChartEnabled: boolean;
positionalDataEnabled: boolean;
+ coachingCanvasEnabled: boolean;
matchStory: MatchStoryResult | null;
- noteContent: string;
vod: string;
};
@@ -36,29 +41,43 @@ type ActiveMapTabProps = {
* server component is rendered (and only it fetches its data), so the map page
* no longer pays for every tab's queries on each load. Switching tabs is a
* shallow:false navigation that re-renders this with a new `activeTab`.
+ *
+ * The tab components are cached server components — flags and locale come in
+ * as props (request APIs are forbidden inside "use cache"), which also lets
+ * runtime prefetches resolve a tab's content before the user clicks it. The
+ * notes tab is the exception: its content is user-editable, so it reads fresh.
*/
export async function ActiveMapTab({
activeTab,
id,
mapDataId,
scrimId,
+ locale,
team1Color,
team2Color,
tempoChartEnabled,
positionalDataEnabled,
+ coachingCanvasEnabled,
matchStory,
- noteContent,
vod,
}: ActiveMapTabProps) {
switch (activeTab) {
case "killfeed":
return (
- <Killfeed id={id} team1Color={team1Color} team2Color={team2Color} />
+ <Killfeed
+ id={id}
+ locale={locale}
+ team1Color={team1Color}
+ team2Color={team2Color}
+ positionalDataEnabled={positionalDataEnabled}
+ coachingCanvasEnabled={coachingCanvasEnabled}
+ />
);
case "charts":
return (
<MapCharts
id={id}
+ locale={locale}
team1Color={team1Color}
team2Color={team2Color}
tempoChartEnabled={tempoChartEnabled}
@@ -74,15 +93,16 @@ export async function ActiveMapTab({
/>
) : null;
case "heatmap":
- return <HeatmapTab id={mapDataId} />;
+ return <HeatmapTab id={mapDataId} mapId={id} locale={locale} />;
case "replay":
- return <ReplayTab id={mapDataId} />;
+ return <ReplayTab id={mapDataId} mapId={id} locale={locale} />;
case "routes":
- return <RoutesTab id={mapDataId} />;
+ return <RoutesTab id={mapDataId} mapId={id} locale={locale} />;
case "events":
return (
<MapEvents
id={id}
+ locale={locale}
team1Color={team1Color}
team2Color={team2Color}
includePositional={positionalDataEnabled}
@@ -91,7 +111,8 @@ export async function ActiveMapTab({
case "initiation": {
// Only computed when the initiation tab is open — it is one of the
// heavier reads and is rarely the landing tab.
- const fightInitiation = await getFightInitiationForMapData(
+ const fightInitiation = await getCachedFightInitiation(
+ id,
mapDataId
).catch(
() =>
@@ -105,15 +126,22 @@ export async function ActiveMapTab({
return <FightInitiationInspector result={fightInitiation} />;
}
case "compare":
- return <ComparePlayers id={id} />;
- case "notes":
+ return <ComparePlayers id={id} locale={locale} />;
+ case "notes": {
+ // Notes are user-editable, so this stays an uncached request-time read;
+ // the notes tab streams in rather than resolving in a runtime prefetch.
+ const note = await prisma.note.findFirst({
+ where: { scrimId, MapDataId: mapDataId },
+ select: { content: true },
+ });
return (
<TipTap
- noteContent={noteContent}
+ noteContent={note?.content ?? ""}
mapDataId={mapDataId}
scrimId={scrimId}
/>
);
+ }
case "vods":
return <VodOverview vod={vod} mapId={id} />;
case "overview":
@@ -121,8 +149,10 @@ export async function ActiveMapTab({
return (
<DefaultOverview
id={id}
+ locale={locale}
team1Color={team1Color}
team2Color={team2Color}
+ positionalDataOverride={positionalDataEnabled}
/>
);
}
diff --git a/apps/web/src/components/map/bulk-upload/sequential-upload.ts b/apps/web/src/components/map/bulk-upload/sequential-upload.ts
index 54436801b..252723950 100644
--- a/apps/web/src/components/map/bulk-upload/sequential-upload.ts
+++ b/apps/web/src/components/map/bulk-upload/sequential-upload.ts
@@ -1,3 +1,4 @@
+import { Logger } from "@/lib/logger";
import type { PendingMap } from "./types";
/**
@@ -83,64 +84,111 @@ export async function uploadMapStream(
body: unknown,
reportProgress: (fraction: number) => void
): Promise<StreamResult> {
- const res = await fetch(url, {
- method: "POST",
- body: JSON.stringify(body),
- });
-
- if (!res.ok || !res.body) {
- const text = (await res.text()).trim();
- throw new Error(
- text.length > 0 ? `${text} (${res.status})` : `Error ${res.status}`
- );
- }
+ const startedAt = performance.now();
+ const serializedBody = JSON.stringify(body);
+ // One wide event per stream attempt. A stuck upload (the original "stuck
+ // loading" report) never emits a terminal "done"/"error", so the telling
+ // signature in the logs is a `started` event with no matching completion —
+ // or a completion whose terminal_event is "closed_without_terminal".
+ const wideEvent: Record<string, unknown> = {
+ operation: "client_upload_map_stream",
+ url,
+ request_bytes: serializedBody.length,
+ timestamp: new Date().toISOString(),
+ };
+ Logger.info({ ...wideEvent, phase: "started" });
+
+ let progressEvents = 0;
+ let streamedBytes = 0;
+ let terminalEvent:
+ | "done"
+ | "error"
+ | "closed_without_terminal"
+ | "http_error" = "closed_without_terminal";
+
+ try {
+ const res = await fetch(url, {
+ method: "POST",
+ body: serializedBody,
+ });
+ wideEvent.http_status = res.status;
+
+ if (!res.ok || !res.body) {
+ terminalEvent = "http_error";
+ const text = (await res.text()).trim();
+ throw new Error(
+ text.length > 0 ? `${text} (${res.status})` : `Error ${res.status}`
+ );
+ }
- const reader = res.body.getReader();
- const decoder = new TextDecoder();
- let buffer = "";
- let result: StreamResult = {};
- let failure: string | null = null;
- let finished = false;
-
- while (!finished) {
- const { value, done } = await reader.read();
- if (done) break;
- buffer += decoder.decode(value, { stream: true });
-
- let newline: number;
- while ((newline = buffer.indexOf("\n")) >= 0) {
- const line = buffer.slice(0, newline).trim();
- buffer = buffer.slice(newline + 1);
- if (!line) continue;
-
- const evt = JSON.parse(line) as {
- type: "progress" | "done" | "error";
- completed?: number;
- total?: number;
- scrimId?: number;
- mapId?: number;
- message?: string;
- };
-
- if (evt.type === "progress") {
- if (evt.total && evt.total > 0) {
- reportProgress((evt.completed ?? 0) / evt.total);
+ const reader = res.body.getReader();
+ const decoder = new TextDecoder();
+ let buffer = "";
+ let result: StreamResult = {};
+ let failure: string | null = null;
+ let finished = false;
+
+ while (!finished) {
+ const { value, done } = await reader.read();
+ if (done) break;
+ streamedBytes += value?.byteLength ?? 0;
+ buffer += decoder.decode(value, { stream: true });
+
+ let newline: number;
+ while ((newline = buffer.indexOf("\n")) >= 0) {
+ const line = buffer.slice(0, newline).trim();
+ buffer = buffer.slice(newline + 1);
+ if (!line) continue;
+
+ const evt = JSON.parse(line) as {
+ type: "progress" | "done" | "error";
+ completed?: number;
+ total?: number;
+ scrimId?: number;
+ mapId?: number;
+ message?: string;
+ };
+
+ if (evt.type === "progress") {
+ progressEvents += 1;
+ if (evt.total && evt.total > 0) {
+ reportProgress((evt.completed ?? 0) / evt.total);
+ }
+ } else if (evt.type === "done") {
+ terminalEvent = "done";
+ result = { scrimId: evt.scrimId, mapId: evt.mapId };
+ reportProgress(1);
+ finished = true;
+ break;
+ } else if (evt.type === "error") {
+ terminalEvent = "error";
+ failure = evt.message ?? "Upload failed";
+ finished = true;
+ break;
}
- } else if (evt.type === "done") {
- result = { scrimId: evt.scrimId, mapId: evt.mapId };
- reportProgress(1);
- finished = true;
- break;
- } else if (evt.type === "error") {
- failure = evt.message ?? "Upload failed";
- finished = true;
- break;
}
}
- }
-
- await reader.cancel().catch(() => undefined);
- if (failure) throw new Error(failure);
- return result;
+ await reader.cancel().catch(() => undefined);
+
+ if (failure) throw new Error(failure);
+
+ wideEvent.outcome = "success";
+ wideEvent.scrim_id = result.scrimId;
+ wideEvent.map_id = result.mapId;
+ return result;
+ } catch (e) {
+ wideEvent.outcome = "error";
+ wideEvent.error = {
+ message: e instanceof Error ? e.message : String(e),
+ type: e instanceof Error ? e.name : "UnknownError",
+ };
+ throw e;
+ } finally {
+ wideEvent.terminal_event = terminalEvent;
+ wideEvent.progress_events = progressEvents;
+ wideEvent.streamed_bytes = streamedBytes;
+ wideEvent.duration_ms = Math.round(performance.now() - startedAt);
+ Logger.info(wideEvent);
+ }
}
diff --git a/apps/web/src/components/map/bulk-upload/use-bulk-map-upload.ts b/apps/web/src/components/map/bulk-upload/use-bulk-map-upload.ts
index 291e39111..0e7ab2f37 100644
--- a/apps/web/src/components/map/bulk-upload/use-bulk-map-upload.ts
+++ b/apps/web/src/components/map/bulk-upload/use-bulk-map-upload.ts
@@ -1,9 +1,10 @@
"use client";
-import { parseData } from "@/lib/parser/client";
+import { parseLogText } from "@/lib/parser/client";
import { computePushWinner } from "@/lib/push-winner";
import { pushInputFromParserData } from "@/lib/push-winner-adapters";
-import { detectFileCorruption } from "@/lib/utils";
+import { detectCorruptedData } from "@/lib/utils";
+import { Logger } from "@/lib/logger";
import { arrayMove } from "@dnd-kit/sortable";
import { useTranslations } from "next-intl";
import { useCallback, useRef, useState } from "react";
@@ -94,20 +95,70 @@ export function useBulkMapUpload(maxMaps: number = MAX_MAPS_PER_UPLOAD) {
});
// Parse each accepted file; resolve its row in place as it finishes.
+ // Each file emits exactly one structured "wide event" (file metadata,
+ // bytes actually read, parsed event/row counts, and outcome) so that an
+ // upload which silently produces an unidentifiable map — the reported
+ // failure mode — leaves a diagnosable trail instead of a blank row.
await Promise.all(
accepted.map(async (file) => {
+ const startedAt = performance.now();
+ const wideEvent: Record<string, unknown> = {
+ operation: "client_parse_map",
+ file_name: file.name,
+ file_size: file.size,
+ file_type: file.type,
+ timestamp: new Date().toISOString(),
+ };
+
try {
- const [parsed, corruption] = await Promise.all([
- parseData(file),
- detectFileCorruption(file),
- ]);
+ // Read the file ONCE. A second File.text() (the old path read it
+ // again for corruption detection) doubles the exposure to a
+ // cloud-synced/placeholder file returning empty or truncated bytes,
+ // which is the prime suspect for a log that "parses" to a blank map.
+ const text = await file.text();
+ wideEvent.bytes_read = text.length;
+ wideEvent.read_empty = text.length === 0;
+
+ const parsed = parseLogText(text);
+ const corruption = detectCorruptedData(text);
+
+ const mapName = parsed.match_start?.[0]?.[2];
+ const rowCount = countParsedRows(parsed);
+ const hasMapName =
+ typeof mapName === "string" && mapName.length > 0;
+
+ wideEvent.event_type_count = Object.keys(parsed).length;
+ wideEvent.match_start_count = parsed.match_start?.length ?? 0;
+ wideEvent.row_count = rowCount;
+ wideEvent.has_map_name = hasMapName;
+ wideEvent.map_name = hasMapName ? mapName : null;
+ wideEvent.has_corruption = corruption.isCorrupted;
+ wideEvent.has_invalid_mercy_rez = corruption.hasInvalidMercyRez;
+ wideEvent.has_asterisks = corruption.hasAsterisks;
+
+ // Guard: with no match_start the map has no name, image, or teams.
+ // It would render as a blank "ready" row and then throw server-side
+ // on `data.map.match_start[0]`. Surface it as a parse failure (with
+ // a logged reason) instead of a silent, unsubmittable row — this is
+ // exactly the state seen in the reported stuck uploads.
+ if (!hasMapName) {
+ wideEvent.outcome = "no_match_start";
+ setPendingMaps((prev) =>
+ prev.map((m) =>
+ m.file === file
+ ? { ...m, status: "failed", parseFailed: true }
+ : m
+ )
+ );
+ return;
+ }
// For Push maps, pre-fill the winner with the coordinate
// algorithm's suggestion so the user only confirms it.
- const mapName = parsed.match_start?.[0]?.[2];
let winner: string | undefined;
let winnerSource: "auto_coords" | undefined;
let suggestedWinner: string | undefined;
+ wideEvent.is_push_map = isPushMap(mapName);
if (isPushMap(mapName)) {
const input = pushInputFromParserData(parsed);
const suggestion = input ? computePushWinner(input) : null;
@@ -116,6 +167,7 @@ export function useBulkMapUpload(maxMaps: number = MAX_MAPS_PER_UPLOAD) {
winnerSource = "auto_coords";
suggestedWinner = suggestion.winner;
}
+ wideEvent.push_winner_resolved = suggestedWinner != null;
}
setPendingMaps((prev) =>
@@ -125,7 +177,7 @@ export function useBulkMapUpload(maxMaps: number = MAX_MAPS_PER_UPLOAD) {
...m,
status: "ready",
parsedData: parsed,
- rowCount: countParsedRows(parsed),
+ rowCount,
mapName,
team1: parsed.match_start?.[0]?.[4],
team2: parsed.match_start?.[0]?.[5],
@@ -137,7 +189,13 @@ export function useBulkMapUpload(maxMaps: number = MAX_MAPS_PER_UPLOAD) {
: m
)
);
- } catch {
+ wideEvent.outcome = "success";
+ } catch (e) {
+ wideEvent.outcome = "error";
+ wideEvent.error = {
+ message: e instanceof Error ? e.message : String(e),
+ type: e instanceof Error ? e.name : "UnknownError",
+ };
setPendingMaps((prev) =>
prev.map((m) =>
m.file === file
@@ -145,6 +203,9 @@ export function useBulkMapUpload(maxMaps: number = MAX_MAPS_PER_UPLOAD) {
: m
)
);
+ } finally {
+ wideEvent.duration_ms = Math.round(performance.now() - startedAt);
+ Logger.info(wideEvent);
}
})
);
diff --git a/apps/web/src/components/map/compare-players.tsx b/apps/web/src/components/map/compare-players.tsx
index fcbd2cf45..82d301b51 100644
--- a/apps/web/src/components/map/compare-players.tsx
+++ b/apps/web/src/components/map/compare-players.tsx
@@ -1,9 +1,12 @@
import { PlayerCard } from "@/components/map/player-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
import { resolveMapDataId } from "@/lib/map-data-resolver";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
-import { getTranslations } from "next-intl/server";
+import { cacheLife, cacheTag } from "next/cache";
type PlayerToSort = {
player_name: string;
@@ -37,10 +40,12 @@ function uniquePlayers(players: PlayerToSort[]) {
function TeamColumn({
id,
+ locale,
teamLabel,
players,
}: {
id: number;
+ locale: Locale;
teamLabel: string;
players: string[];
}) {
@@ -61,7 +66,7 @@ function TeamColumn({
</TabsList>
{players.map((player, index) => (
<TabsContent key={player} value={index.toString()}>
- <PlayerCard id={id} playerName={player} />
+ <PlayerCard id={id} playerName={player} locale={locale} />
</TabsContent>
))}
</Tabs>
@@ -69,8 +74,18 @@ function TeamColumn({
);
}
-export async function ComparePlayers({ id }: { id: number }) {
- const t = await getTranslations("mapPage.compare");
+export async function ComparePlayers({
+ id,
+ locale,
+}: {
+ id: number;
+ locale: Locale;
+}) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(id));
+
+ const t = await getLocaleTranslations(locale, "mapPage.compare");
const mapDataId = await resolveMapDataId(id);
const teamNames = await prisma.matchStart.findFirst({
@@ -104,11 +119,13 @@ export async function ComparePlayers({ id }: { id: number }) {
<div className="grid gap-8 lg:grid-cols-2">
<TeamColumn
id={id}
+ locale={locale}
teamLabel={teamNames?.team_1_name ?? t("team1")}
players={team1PlayersUnique}
/>
<TeamColumn
id={id}
+ locale={locale}
teamLabel={teamNames?.team_2_name ?? t("team2")}
players={team2PlayersUnique}
/>
diff --git a/apps/web/src/components/map/default-overview.tsx b/apps/web/src/components/map/default-overview.tsx
index 9d23b8ed5..af7337c12 100644
--- a/apps/web/src/components/map/default-overview.tsx
+++ b/apps/web/src/components/map/default-overview.tsx
@@ -14,7 +14,6 @@ import {
buildPlayerUltComparisons,
} from "@/data/scrim/ult-helpers";
import type { PlayerUltSummary, UltEfficiency } from "@/data/scrim/types";
-import { positionalData } from "@/lib/flags";
import { Separator } from "@/components/ui/separator";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { filterUtilityRoundStartSwaps } from "@/data/team/hero-swap-service";
@@ -43,19 +42,28 @@ import {
type SubroleName,
} from "@/types/heroes";
import { $Enums, type Kill } from "@/generated/prisma/browser";
-import { getTranslations } from "next-intl/server";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
+import { cacheLife, cacheTag } from "next/cache";
export async function DefaultOverview({
id,
+ locale,
team1Color: team1,
team2Color: team2,
positionalDataOverride,
}: {
id: number;
+ locale: Locale;
team1Color: string;
team2Color: string;
- positionalDataOverride?: boolean;
+ positionalDataOverride: boolean;
}) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(id));
+
const mapDataId = await resolveMapDataId(id);
const [finalRound, matchDetails, finalRoundStats, playerStats, fights] =
await Promise.all([
@@ -139,7 +147,7 @@ export async function DefaultOverview({
}),
]);
- const t = await getTranslations("mapPage.overview");
+ const t = await getLocaleTranslations(locale, "mapPage.overview");
const mapType = matchDetails ? matchDetails.map_type : $Enums.MapType.Control;
const payloadMapScore = calculatePayloadMapScore({
@@ -254,7 +262,7 @@ export async function DefaultOverview({
const team1Name = matchDetails?.team_1_name ?? t("team1");
const team2Name = matchDetails?.team_2_name ?? t("team2");
- const positionalEnabled = positionalDataOverride ?? (await positionalData());
+ const positionalEnabled = positionalDataOverride;
const [abilityTimingAnalysis, rotationDeathAnalysis, killfeedCalibration] =
await Promise.all([
diff --git a/apps/web/src/components/map/heatmap/heatmap-tab.tsx b/apps/web/src/components/map/heatmap/heatmap-tab.tsx
index 84ce1c1b8..e46df1649 100644
--- a/apps/web/src/components/map/heatmap/heatmap-tab.tsx
+++ b/apps/web/src/components/map/heatmap/heatmap-tab.tsx
@@ -1,16 +1,36 @@
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { HeatmapService } from "@/data/map";
-import { getTranslations } from "next-intl/server";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
+import { cacheLife, cacheTag } from "next/cache";
import { HeatmapCanvas } from "./heatmap-canvas";
import { HeatmapControlTabs } from "./heatmap-control-tabs";
-export async function HeatmapTab({ id }: { id: number }) {
+export async function HeatmapTab({
+ id,
+ mapId,
+ locale,
+}: {
+ /** The MapData id used to load heatmap data. */
+ id: number;
+ /** The Map id, used only for cache tagging/invalidation. */
+ mapId: number;
+ locale: Locale;
+}) {
+ "use cache";
+ // The rendered output embeds a presigned image URL that expires in 3600s
+ // (loadCalibration) — cap the entry's absolute age well under that so a
+ // cached render can never serve a dead URL.
+ cacheLife({ stale: 300, revalidate: 900, expire: 1800 });
+ cacheTag(mapTag(mapId));
+
const [data, t] = await Promise.all([
AppRuntime.runPromise(
HeatmapService.pipe(Effect.flatMap((svc) => svc.getHeatmapData(id)))
),
- getTranslations("mapPage.heatmap"),
+ getLocaleTranslations(locale, "mapPage.heatmap"),
]);
const labels = {
diff --git a/apps/web/src/components/map/killfeed.tsx b/apps/web/src/components/map/killfeed.tsx
index e2e30fb47..28e18f468 100644
--- a/apps/web/src/components/map/killfeed.tsx
+++ b/apps/web/src/components/map/killfeed.tsx
@@ -8,35 +8,36 @@ import {
KillfeedCalibrationService,
serializeCalibrationData,
} from "@/data/map";
-import { coachingCanvas, positionalData } from "@/lib/flags";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import { resolveMapDataId } from "@/lib/map-data-resolver";
import prisma from "@/lib/prisma";
import { removeDuplicateRows, toTimestamp } from "@/lib/utils";
import { groupKillsIntoFights } from "@/lib/server-utils";
-import { getTranslations } from "next-intl/server";
+import { cacheLife, cacheTag } from "next/cache";
export async function Killfeed({
id,
+ locale,
team1Color,
team2Color,
- positionalDataOverride,
- coachingCanvasOverride,
+ positionalDataEnabled,
+ coachingCanvasEnabled,
}: {
id: number;
+ locale: Locale;
team1Color: string;
team2Color: string;
- positionalDataOverride?: boolean;
- coachingCanvasOverride?: boolean;
+ positionalDataEnabled: boolean;
+ coachingCanvasEnabled: boolean;
}) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(id));
+
const mapDataId = await resolveMapDataId(id);
- const [
- roundEndRows,
- playerTeams,
- fights,
- ultimateData,
- positionalEnabled,
- canvasEnabled,
- ] = await Promise.all([
+ const [roundEndRows, playerTeams, fights, ultimateData] = await Promise.all([
prisma.roundEnd.findMany({
where: { MapDataId: mapDataId },
orderBy: { match_time: "asc" },
@@ -46,15 +47,9 @@ export async function Killfeed({
AppRuntime.runPromise(
KillfeedService.pipe(Effect.flatMap((svc) => svc.getUltimateSpans(id)))
),
- positionalDataOverride != null
- ? Promise.resolve(positionalDataOverride)
- : positionalData(),
- coachingCanvasOverride != null
- ? Promise.resolve(coachingCanvasOverride)
- : coachingCanvas(),
]);
- const calibrationData = positionalEnabled
+ const calibrationData = positionalDataEnabled
? serializeCalibrationData(
await AppRuntime.runPromise(
KillfeedCalibrationService.pipe(
@@ -67,7 +62,7 @@ export async function Killfeed({
const roundEnds = removeDuplicateRows(roundEndRows);
const finalRound = roundEnds.at(-1) ?? null;
- const t = await getTranslations("mapPage.killfeed");
+ const t = await getLocaleTranslations(locale, "mapPage.killfeed");
const team1Name = playerTeams?.team_1_name ?? t("team1");
const team2Name = playerTeams?.team_2_name ?? t("team2");
@@ -162,7 +157,7 @@ export async function Killfeed({
team1Color={team1Color}
team2Color={team2Color}
calibrationData={calibrationData}
- canvasImportEnabled={canvasEnabled && positionalEnabled}
+ canvasImportEnabled={coachingCanvasEnabled && positionalDataEnabled}
mapDataId={mapDataId}
/>
</div>
diff --git a/apps/web/src/components/map/map-events.tsx b/apps/web/src/components/map/map-events.tsx
index bf928fe6d..c0cd91207 100644
--- a/apps/web/src/components/map/map-events.tsx
+++ b/apps/web/src/components/map/map-events.tsx
@@ -1,20 +1,29 @@
import { EventsTimeline } from "@/components/map/events/events-timeline";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
import { getMapEventsData } from "@/lib/get-map-events";
-import { getTranslations } from "next-intl/server";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
+import { cacheLife, cacheTag } from "next/cache";
export async function MapEvents({
id,
+ locale,
team1Color,
team2Color,
includePositional = false,
}: {
id: number;
+ locale: Locale;
team1Color: string;
team2Color: string;
includePositional?: boolean;
}) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(id));
+
const data = await getMapEventsData(id, includePositional);
- const t = await getTranslations("mapPage.events");
+ const t = await getLocaleTranslations(locale, "mapPage.events");
if (!data) {
return (
diff --git a/apps/web/src/components/map/map-page-skeleton.tsx b/apps/web/src/components/map/map-page-skeleton.tsx
new file mode 100644
index 000000000..78734aceb
--- /dev/null
+++ b/apps/web/src/components/map/map-page-skeleton.tsx
@@ -0,0 +1,38 @@
+import { MapTabsSkeleton } from "@/components/map/map-tabs-skeleton";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// The map page's content skeleton (header bar, breadcrumb, title, tabs). Shared
+// between the route's loading.tsx and the map layout's auth-gate fallback so the
+// content region shows this skeleton — never a blank — while auth and the page's
+// request data resolve.
+export function MapPageSkeleton() {
+ return (
+ <div className="flex-col md:flex">
+ <header
+ className="shadow-xs"
+ style={{ viewTransitionName: "site-header" }}
+ >
+ <div className="flex h-16 items-center px-4">
+ <Skeleton className="h-6 w-24" />
+ <div className="ml-auto flex items-center space-x-4">
+ <Skeleton className="hidden h-6 w-24 md:flex" />
+ <Skeleton className="h-6 w-6" />
+ <Skeleton className="h-6 w-6 md:hidden" />
+ <Skeleton className="hidden h-6 w-24 md:flex" />
+ </div>
+ </div>
+ </header>
+ <div className="flex-1 space-y-4 px-6 pt-6 pb-12 md:px-8">
+ <nav className="text-muted-foreground text-sm">
+ <Skeleton className="h-5 w-48" />
+ </nav>
+ <div className="flex items-center justify-between space-y-2">
+ <h1 className="text-2xl font-bold tracking-tight">
+ <Skeleton className="h-8 w-40" />
+ </h1>
+ </div>
+ <MapTabsSkeleton />
+ </div>
+ </div>
+ );
+}
diff --git a/apps/web/src/components/map/map-tabs-skeleton.tsx b/apps/web/src/components/map/map-tabs-skeleton.tsx
index 2eaed3849..428ce20c8 100644
--- a/apps/web/src/components/map/map-tabs-skeleton.tsx
+++ b/apps/web/src/components/map/map-tabs-skeleton.tsx
@@ -1,6 +1,5 @@
import { Separator } from "@/components/ui/separator";
import { Skeleton } from "@/components/ui/skeleton";
-import { getTranslations } from "next-intl/server";
function MapStatCellSkeleton() {
return (
@@ -12,13 +11,15 @@ function MapStatCellSkeleton() {
);
}
-export async function MapTabsSkeleton() {
- const t = await getTranslations("mapPage.overview");
-
+// Kept synchronous (no getTranslations) so it is a valid static Suspense
+// fallback — a fallback that reads request data can't be prerendered and
+// re-triggers the blocking-prerender warning. The placeholder region is
+// decorative, so it is hidden from assistive tech rather than labelled.
+export function MapTabsSkeleton() {
return (
<div className="space-y-5">
<Skeleton className="h-9 w-96" />
- <section aria-label={t("title")} className="space-y-5">
+ <section aria-hidden className="space-y-5">
<div className="grid grid-cols-2 gap-x-6 gap-y-5 lg:grid-cols-4">
<MapStatCellSkeleton />
<MapStatCellSkeleton />
diff --git a/apps/web/src/components/map/map-tabs.tsx b/apps/web/src/components/map/map-tabs.tsx
index 069c7075e..29c376930 100644
--- a/apps/web/src/components/map/map-tabs.tsx
+++ b/apps/web/src/components/map/map-tabs.tsx
@@ -1,9 +1,26 @@
"use client";
+import { DotMatrixLoader } from "@/components/dot-matrix-loader";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+ prefetchRoute,
+ usePredictivePrefetch,
+} from "@/hooks/use-predictive-prefetch";
+import { cn } from "@/lib/utils";
+import type { Route } from "next";
import { useTranslations } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
import { parseAsFloat, parseAsString, useQueryState } from "nuqs";
-import { useCallback, type ReactNode } from "react";
+import {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useOptimistic,
+ useRef,
+ useTransition,
+ type ReactNode,
+} from "react";
type TabDef = {
value: string;
@@ -21,45 +38,133 @@ type MapTabsProps = {
children: ReactNode;
};
+// Lets content rendered inside the tabs (killfeed, timelines) switch tabs
+// through the same transition-wrapped setter as a tab-strip click, so the
+// optimistic indicator, cached-content display, and server re-render are
+// wired up identically.
+const MapTabsSwitchContext = createContext<((tab: string) => void) | null>(
+ null
+);
+
export function MapTabs({ tabs, activeTab, children }: MapTabsProps) {
const t = useTranslations("mapPage");
- // shallow:false so switching tabs re-runs the server page and renders the
- // newly-selected tab's content, instead of shipping every tab up front.
+ // Drive the shallow:false navigation through a transition so React keeps the
+ // current page chrome visible while the new tab streams in, instead of
+ // reverting the outer Suspense boundary to its skeleton. shallow:false still
+ // re-runs the server page so only the selected tab's content is rendered.
+ const [isPending, startTransition] = useTransition();
const [, setTab] = useQueryState(
"tab",
- parseAsString.withDefault("overview").withOptions({ shallow: false })
+ parseAsString
+ .withDefault("overview")
+ .withOptions({ shallow: false, startTransition })
);
+ // The indicator is optimistic local state, not the nuqs value: it must move
+ // the moment a tab is clicked, and it settles back to the server-resolved
+ // tab when the transition commits.
+ const [optimisticTab, setOptimisticTab] = useOptimistic(activeTab);
+
+ // Client-side cache of every visited tab's server-rendered content. Map and
+ // scrim data is static, so switching back to a visited tab renders the
+ // cached tree instantly (no loader) while the refresh streams in behind it.
+ const visitedTabs = useRef(new Map<string, ReactNode>());
+ useEffect(() => {
+ visitedTabs.current.set(activeTab, children);
+ }, [activeTab, children]);
+
+ const switchTab = useCallback(
+ (value: string) => {
+ startTransition(() => {
+ setOptimisticTab(value);
+ void setTab(value);
+ });
+ },
+ [setTab, setOptimisticTab]
+ );
+
+ // Prefetch tabs before the click. The map page sets
+ // `prefetch = 'allow-runtime'`, so a kind:"full" prefetch lets the server
+ // prerender the target tab's (cached) content ahead of the navigation.
+ // Hover/focus warms the hovered trigger; the trajectory hook below warms
+ // triggers the cursor is heading toward.
+ const pathname = usePathname();
+ const router = useRouter();
+ const listRef = useRef<HTMLDivElement>(null);
+ usePredictivePrefetch(listRef, { prefetchKind: "full" });
+ const tabHref = useCallback(
+ (value: string) => `${pathname}?tab=${value}` as Route,
+ [pathname]
+ );
+ const prefetchedTabs = useRef(new Set<string>());
+ const prefetchTab = useCallback(
+ (value: string) => {
+ // Visited tabs render instantly from the client-side cache; skip them.
+ if (value === activeTab || visitedTabs.current.has(value)) return;
+ if (prefetchedTabs.current.has(value)) return;
+ prefetchedTabs.current.add(value);
+ prefetchRoute(router, tabHref(value), "full");
+ },
+ [activeTab, router, tabHref]
+ );
+
+ // While a switch is in flight, `children` still holds the PREVIOUS tab's
+ // content. Show the cached tree for the target tab when we have one;
+ // otherwise keep the stale content dimmed under the loader until the new
+ // tab streams in.
+ const isSettled = optimisticTab === activeTab;
+ const cachedContent = isSettled
+ ? undefined
+ : visitedTabs.current.get(optimisticTab);
+ const showStaleOverlay = isPending && !isSettled && cachedContent == null;
return (
- <Tabs
- value={activeTab}
- onValueChange={(value) => void setTab(value)}
- className="space-y-4"
- >
- <TabsList aria-label={t("tabsLabel")}>
- {tabs.map((tab) =>
- tab.hidden ? null : (
- <TabsTrigger
- key={tab.value}
- value={tab.value}
- className={tab.className}
- >
- {tab.shortLabel ? (
- <>
- <span className="hidden md:inline">{tab.label}</span>
- <span className="md:hidden">{tab.shortLabel}</span>
- </>
- ) : (
- tab.label
- )}
- </TabsTrigger>
- )
- )}
- </TabsList>
- <TabsContent value={activeTab} className="space-y-4">
- {children}
- </TabsContent>
- </Tabs>
+ <MapTabsSwitchContext.Provider value={switchTab}>
+ <Tabs
+ value={optimisticTab}
+ onValueChange={switchTab}
+ className="space-y-4"
+ >
+ <TabsList ref={listRef} aria-label={t("tabsLabel")}>
+ {tabs.map((tab) =>
+ tab.hidden ? null : (
+ <TabsTrigger
+ key={tab.value}
+ value={tab.value}
+ className={tab.className}
+ data-prefetch-href={tabHref(tab.value)}
+ onPointerEnter={() => prefetchTab(tab.value)}
+ onFocus={() => prefetchTab(tab.value)}
+ >
+ {tab.shortLabel ? (
+ <>
+ <span className="hidden md:inline">{tab.label}</span>
+ <span className="md:hidden">{tab.shortLabel}</span>
+ </>
+ ) : (
+ tab.label
+ )}
+ </TabsTrigger>
+ )
+ )}
+ </TabsList>
+ <TabsContent value={optimisticTab} className="relative space-y-4">
+ <div
+ aria-busy={showStaleOverlay}
+ className={cn(
+ "space-y-4 transition-opacity duration-200",
+ showStaleOverlay && "pointer-events-none opacity-40"
+ )}
+ >
+ {cachedContent ?? children}
+ </div>
+ {showStaleOverlay ? (
+ <div className="pointer-events-none absolute inset-x-0 top-0 flex justify-center pt-12">
+ <DotMatrixLoader label={t("loadingTab")} />
+ </div>
+ ) : null}
+ </TabsContent>
+ </Tabs>
+ </MapTabsSwitchContext.Provider>
);
}
@@ -68,14 +173,24 @@ export function useReplayTimeParam() {
}
export function useGoToReplay() {
- const [, setTab] = useQueryState("tab", parseAsString);
+ const switchTab = useContext(MapTabsSwitchContext);
+ // Fallback for use outside MapTabs; shallow:false so the server actually
+ // re-renders the active tab (the default shallow update only touches the URL).
+ const [, setTab] = useQueryState(
+ "tab",
+ parseAsString.withOptions({ shallow: false })
+ );
const [, setTime] = useQueryState("t", parseAsFloat);
return useCallback(
(matchTime: number) => {
void setTime(matchTime);
- void setTab("replay");
+ if (switchTab) {
+ switchTab("replay");
+ } else {
+ void setTab("replay");
+ }
},
- [setTab, setTime]
+ [switchTab, setTab, setTime]
);
}
diff --git a/apps/web/src/components/map/player-card.tsx b/apps/web/src/components/map/player-card.tsx
index c6d6c8e62..ffdc48ba0 100644
--- a/apps/web/src/components/map/player-card.tsx
+++ b/apps/web/src/components/map/player-card.tsx
@@ -4,14 +4,17 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrimService } from "@/data/scrim";
import { AppRuntime } from "@/data/runtime";
import { Effect } from "effect";
-import { getHeroNames, toHero } from "@/lib/utils";
-import { getTranslations } from "next-intl/server";
+import type { Locale } from "@/i18n/config";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
+import { toHero } from "@/lib/utils";
-type Props = { id: number; playerName: string };
+type Props = { id: number; playerName: string; locale: Locale };
-export async function PlayerCard({ playerName, id }: Props) {
- const t = await getTranslations("mapPage.compare.playerCard");
- const heroNames = await getHeroNames();
+export async function PlayerCard({ playerName, id, locale }: Props) {
+ const [t, heroesT] = await Promise.all([
+ getLocaleTranslations(locale, "mapPage.compare.playerCard"),
+ getLocaleTranslations(locale, "heroes"),
+ ]);
const playerStatsByFinalRound = await AppRuntime.runPromise(
ScrimService.pipe(
@@ -30,7 +33,13 @@ export async function PlayerCard({ playerName, id }: Props) {
if (heroesPlayed.length === 0) return null;
if (heroesPlayed.length === 1) {
- return <SpecificHero playerStats={playerStats} showTable={false} />;
+ return (
+ <SpecificHero
+ playerStats={playerStats}
+ showTable={false}
+ locale={locale}
+ />
+ );
}
return (
@@ -39,12 +48,16 @@ export async function PlayerCard({ playerName, id }: Props) {
<TabsTrigger value="all-heroes">{t("allHeroes.title")}</TabsTrigger>
{heroesPlayed.map((hero) => (
<TabsTrigger key={hero} value={hero}>
- {heroNames.get(toHero(hero)) ?? hero}
+ {heroesT.has(toHero(hero)) ? heroesT(toHero(hero)) : hero}
</TabsTrigger>
))}
</TabsList>
<TabsContent value="all-heroes" className="space-y-4">
- <AllHeroes playerStats={playerStats} showTable={false} />
+ <AllHeroes
+ playerStats={playerStats}
+ showTable={false}
+ locale={locale}
+ />
</TabsContent>
{heroesPlayed.map((hero) => (
<TabsContent key={hero} value={hero} className="space-y-4">
@@ -53,6 +66,7 @@ export async function PlayerCard({ playerName, id }: Props) {
(stat) => stat.player_hero === hero
)}
showTable={false}
+ locale={locale}
/>
</TabsContent>
))}
diff --git a/apps/web/src/components/map/replay/replay-tab.tsx b/apps/web/src/components/map/replay/replay-tab.tsx
index b01d30cd4..c31eaa38b 100644
--- a/apps/web/src/components/map/replay/replay-tab.tsx
+++ b/apps/web/src/components/map/replay/replay-tab.tsx
@@ -1,16 +1,33 @@
import { ReplayService } from "@/data/map";
import { AppRuntime } from "@/data/runtime";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
import { Effect } from "effect";
-import { getTranslations } from "next-intl/server";
+import { cacheLife, cacheTag } from "next/cache";
import { ReplayViewer } from "./replay-viewer";
-export async function ReplayTab({ id }: { id: number }) {
+export async function ReplayTab({
+ id,
+ mapId,
+ locale,
+}: {
+ /** The MapData id used to load replay data. */
+ id: number;
+ /** The Map id, used only for cache tagging/invalidation. */
+ mapId: number;
+ locale: Locale;
+}) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(mapId));
+
const [data, t] = await Promise.all([
AppRuntime.runPromise(
ReplayService.pipe(Effect.flatMap((svc) => svc.getReplayData(id)))
),
- getTranslations("mapPage.replay"),
+ getLocaleTranslations(locale, "mapPage.replay"),
]);
if (data.type === "no_calibration") {
diff --git a/apps/web/src/components/map/routes/routes-tab.tsx b/apps/web/src/components/map/routes/routes-tab.tsx
index 2b0dd7b05..ccf6599a1 100644
--- a/apps/web/src/components/map/routes/routes-tab.tsx
+++ b/apps/web/src/components/map/routes/routes-tab.tsx
@@ -1,19 +1,39 @@
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { RouteMiningService } from "@/data/map/route-mining-service";
+import type { Locale } from "@/i18n/config";
+import { mapTag } from "@/lib/cache-tags";
import { loadCalibration } from "@/lib/map-calibration/load-calibration";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import prisma from "@/lib/prisma";
-import { getTranslations } from "next-intl/server";
+import { cacheLife, cacheTag } from "next/cache";
import { RoutesView } from "./routes-view";
import { RoutesControlTabs } from "./routes-control-tabs";
import { RoutesEmptyState } from "./empty-state";
-export async function RoutesTab({ id }: { id: number }) {
+export async function RoutesTab({
+ id,
+ mapId,
+ locale,
+}: {
+ /** The MapData id used to load route analysis. */
+ id: number;
+ /** The Map id, used only for cache tagging/invalidation. */
+ mapId: number;
+ locale: Locale;
+}) {
+ "use cache";
+ // The rendered output embeds a presigned image URL that expires in 3600s
+ // (loadCalibration) — cap the entry's absolute age well under that so a
+ // cached render can never serve a dead URL.
+ cacheLife({ stale: 300, revalidate: 900, expire: 1800 });
+ cacheTag(mapTag(mapId));
+
const [result, t] = await Promise.all([
AppRuntime.runPromise(
RouteMiningService.pipe(Effect.flatMap((svc) => svc.getRouteAnalysis(id)))
),
- getTranslations("mapPage.routes"),
+ getLocaleTranslations(locale, "mapPage.routes"),
]);
if (result === null) {
diff --git a/apps/web/src/components/map/tempo/tempo-chart-server.tsx b/apps/web/src/components/map/tempo/tempo-chart-server.tsx
index 881f303a7..5aa8f1dc4 100644
--- a/apps/web/src/components/map/tempo/tempo-chart-server.tsx
+++ b/apps/web/src/components/map/tempo/tempo-chart-server.tsx
@@ -1,17 +1,20 @@
import { Effect } from "effect";
import { AppRuntime } from "@/data/runtime";
import { TempoService } from "@/data/map";
-import { getTranslations } from "next-intl/server";
+import type { Locale } from "@/i18n/config";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import { TempoChart } from "./tempo-chart";
type TempoChartServerProps = {
id: number;
+ locale: Locale;
team1Color: string;
team2Color: string;
};
export async function TempoChartServer({
id,
+ locale,
team1Color,
team2Color,
}: TempoChartServerProps) {
@@ -19,7 +22,7 @@ export async function TempoChartServer({
AppRuntime.runPromise(
TempoService.pipe(Effect.flatMap((svc) => svc.getTempoChartData(id)))
),
- getTranslations("mapPage.events.tempo"),
+ getLocaleTranslations(locale, "mapPage.events.tempo"),
]);
if (!data) {
diff --git a/apps/web/src/components/player/all-heroes.tsx b/apps/web/src/components/player/all-heroes.tsx
index d610b2dea..7cb22e928 100644
--- a/apps/web/src/components/player/all-heroes.tsx
+++ b/apps/web/src/components/player/all-heroes.tsx
@@ -5,6 +5,8 @@ import {
} from "@/components/player/stat-panel";
import { StatsTable } from "@/components/player/stats-table";
import { CardIcon } from "@/components/ui/card-icon";
+import type { Locale } from "@/i18n/config";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import { cn, round, toMins } from "@/lib/utils";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
import type { PlayerStat } from "@/generated/prisma/client";
@@ -13,11 +15,23 @@ import { getTranslations } from "next-intl/server";
export async function AllHeroes({
playerStats,
showTable = true,
+ locale,
}: {
playerStats: PlayerStat[];
showTable?: boolean;
+ /**
+ * Required when rendered inside a "use cache" scope (e.g. via the map
+ * compare tab) — `getTranslations` reads the LOCALE cookie, which is
+ * forbidden there. Uncached request-time call sites may omit it.
+ */
+ locale?: Locale;
}) {
- const t = await getTranslations("mapPage.compare.playerCard.allHeroes");
+ const t = locale
+ ? await getLocaleTranslations(
+ locale,
+ "mapPage.compare.playerCard.allHeroes"
+ )
+ : await getTranslations("mapPage.compare.playerCard.allHeroes");
const hero = playerStats[0].player_hero as HeroName;
const role = heroRoleMapping[hero];
diff --git a/apps/web/src/components/player/specific-hero.tsx b/apps/web/src/components/player/specific-hero.tsx
index d4f0a5f2a..1341234fb 100644
--- a/apps/web/src/components/player/specific-hero.tsx
+++ b/apps/web/src/components/player/specific-hero.tsx
@@ -12,7 +12,9 @@ import {
getMultipleStatComparisons,
type StatCardComparison,
} from "@/lib/stat-card-helpers";
+import type { Locale } from "@/i18n/config";
import type { ValidStatColumn } from "@/lib/stat-percentiles";
+import { getLocaleTranslations } from "@/lib/metadata-i18n";
import { cn, getHeroNames, round, toHero, toMins } from "@/lib/utils";
import { type HeroName, heroRoleMapping } from "@/types/heroes";
import type { PlayerStat } from "@/generated/prisma/client";
@@ -21,17 +23,37 @@ import { getTranslations } from "next-intl/server";
export async function SpecificHero({
playerStats,
showTable = true,
+ locale,
}: {
playerStats: PlayerStat[];
showTable?: boolean;
+ /**
+ * Required when rendered inside a "use cache" scope (e.g. via the map
+ * compare tab) — `getTranslations`/`getHeroNames` read the LOCALE cookie,
+ * which is forbidden there. Uncached request-time call sites may omit it.
+ */
+ locale?: Locale;
}) {
- const t = await getTranslations("mapPage.compare.playerCard.specificHero");
- const heroNames = await getHeroNames();
+ const t = locale
+ ? await getLocaleTranslations(
+ locale,
+ "mapPage.compare.playerCard.specificHero"
+ )
+ : await getTranslations("mapPage.compare.playerCard.specificHero");
const hero = playerStats[0].player_hero as HeroName;
const playerStat = playerStats[0];
const role = heroRoleMapping[hero];
- const heroDisplayName = heroNames.get(toHero(hero)) ?? hero;
+
+ const heroKey = toHero(hero);
+ let heroDisplayName: string;
+ if (locale) {
+ const heroesT = await getLocaleTranslations(locale, "heroes");
+ heroDisplayName = heroesT.has(heroKey) ? heroesT(heroKey) : hero;
+ } else {
+ const heroNames = await getHeroNames();
+ heroDisplayName = heroNames.get(heroKey) ?? hero;
+ }
const statsToCompare: { stat: ValidStatColumn; value: number }[] = [
{ stat: "eliminations", value: playerStat.eliminations },
diff --git a/apps/web/src/components/skeletons/page-content-skeleton.tsx b/apps/web/src/components/skeletons/page-content-skeleton.tsx
new file mode 100644
index 000000000..043c90b05
--- /dev/null
+++ b/apps/web/src/components/skeletons/page-content-skeleton.tsx
@@ -0,0 +1,16 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Generic content-area skeleton for pages whose request data now streams in
+// behind a <Suspense> boundary. Use as the Suspense fallback for routes that
+// don't have a more specific loading.tsx skeleton to reuse, so the content
+// region shows a skeleton instead of dropping to a blank while data loads.
+export function PageContentSkeleton() {
+ return (
+ <div className="flex-1 space-y-4 px-6 pt-6 pb-12 md:px-8">
+ <Skeleton className="h-5 w-40" />
+ <Skeleton className="h-8 w-56" />
+ <Skeleton className="h-4 w-80 max-w-full" />
+ <Skeleton className="mt-4 h-72 w-full rounded-xl" />
+ </div>
+ );
+}
diff --git a/apps/web/src/components/stats/team/team-stats-content.tsx b/apps/web/src/components/stats/team/team-stats-content.tsx
index ec94ae578..01f5e65ed 100644
--- a/apps/web/src/components/stats/team/team-stats-content.tsx
+++ b/apps/web/src/components/stats/team/team-stats-content.tsx
@@ -3,7 +3,7 @@
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import type { ReactNode } from "react";
-import { DotMatrixLoader } from "./dot-matrix-loader";
+import { DotMatrixLoader } from "@/components/dot-matrix-loader";
import { useRangeTransition } from "./range-transition-context";
/**
diff --git a/apps/web/src/components/team-switcher-provider.tsx b/apps/web/src/components/team-switcher-provider.tsx
index 3677a99fa..da6c1df39 100644
--- a/apps/web/src/components/team-switcher-provider.tsx
+++ b/apps/web/src/components/team-switcher-provider.tsx
@@ -1,7 +1,15 @@
"use client";
import { parseAsInteger, useQueryState } from "nuqs";
-import React, { createContext } from "react";
+import React, {
+ createContext,
+ Suspense,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
export const TeamSwitcherContext = createContext({
teamId: undefined as number | undefined,
@@ -11,24 +19,55 @@ export const TeamSwitcherContext = createContext({
},
});
+/**
+ * Holds the selected team in state and mirrors it to the `?team=` search
+ * param via a Suspense-wrapped sync child. Reading the param directly here
+ * (nuqs `useQueryState` → `useSearchParams`) would block PPR prerendering of
+ * every layout child, since URL data only exists at request time. First paint
+ * sees `teamId: undefined`; the param syncs in immediately after.
+ */
export function TeamSwitcherProvider({
children,
}: {
children: React.ReactNode;
}) {
- const [teamId, setTeamIdRaw] = useQueryState("team", parseAsInteger);
+ const [teamId, setTeamIdState] = useState<number | undefined>(undefined);
+ const writeParam = useRef<((id: number | null) => void) | null>(null);
- const setTeamId = React.useCallback(
- (id: number | undefined) => {
- void setTeamIdRaw(id ?? null);
- },
- [setTeamIdRaw]
- );
+ const setTeamId = useCallback((id: number | undefined) => {
+ // Optimistic: consumers update immediately, the URL follows.
+ setTeamIdState(id);
+ writeParam.current?.(id ?? null);
+ }, []);
+
+ const value = useMemo(() => ({ teamId, setTeamId }), [teamId, setTeamId]);
- const value = React.useMemo(
- () => ({ teamId: teamId ?? undefined, setTeamId }),
- [teamId, setTeamId]
+ return (
+ <TeamSwitcherContext value={value}>
+ <Suspense fallback={null}>
+ <TeamQueryParamSync onChange={setTeamIdState} writeParam={writeParam} />
+ </Suspense>
+ {children}
+ </TeamSwitcherContext>
);
+}
+
+function TeamQueryParamSync({
+ onChange,
+ writeParam,
+}: {
+ onChange: (id: number | undefined) => void;
+ writeParam: React.RefObject<((id: number | null) => void) | null>;
+}) {
+ const [param, setParam] = useQueryState("team", parseAsInteger);
+
+ useEffect(() => {
+ writeParam.current = (id) => void setParam(id);
+ }, [setParam, writeParam]);
+
+ useEffect(() => {
+ onChange(param ?? undefined);
+ }, [param, onChange]);
- return <TeamSwitcherContext value={value}>{children}</TeamSwitcherContext>;
+ return null;
}
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index 208386482..b21655e70 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -591,10 +591,13 @@ function SidebarMenuSkeleton({
}: React.ComponentProps<"div"> & {
showIcon?: boolean;
}) {
- // Random width between 50 to 90%.
- const [width] = React.useState(() => {
- return `${Math.floor(Math.random() * 40) + 50}%`;
- });
+ // Random width between 50 to 90%, set after mount so render stays
+ // deterministic (Math.random() during render is disallowed under Cache
+ // Components).
+ const [width, setWidth] = React.useState("70%");
+ React.useEffect(() => {
+ setWidth(`${Math.floor(Math.random() * 40) + 50}%`);
+ }, []);
return (
<div
diff --git a/apps/web/src/data/cached/map-cache.ts b/apps/web/src/data/cached/map-cache.ts
new file mode 100644
index 000000000..e905c4ba3
--- /dev/null
+++ b/apps/web/src/data/cached/map-cache.ts
@@ -0,0 +1,105 @@
+import "server-only";
+
+import { MatchStoryService } from "@/data/map/match-story-service";
+import { PlayerService } from "@/data/player";
+import { AppRuntime } from "@/data/runtime";
+import { mapTag, scrimTag } from "@/lib/cache-tags";
+import { getFightInitiationForMapData } from "@/lib/fight-initiation";
+import prisma from "@/lib/prisma";
+import { Effect } from "effect";
+import { cacheLife, cacheTag } from "next/cache";
+
+// A map's stats are immutable once it's uploaded — adding more maps to the
+// scrim never changes an existing map's data. Cache the per-map reads
+// indefinitely and invalidate `map:${mapId}` only when that map is removed or
+// its winner changes (see the scrim mutation routes).
+
+export async function getCachedMostPlayedHeroes(mapId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
+ return AppRuntime.runPromise(
+ PlayerService.pipe(Effect.flatMap((svc) => svc.getMostPlayedHeroes(mapId)))
+ );
+}
+
+export async function getCachedMatchStory(mapId: number, mapDataId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
+ // A story failure must never break the map page — the tab just hides.
+ return AppRuntime.runPromise(
+ MatchStoryService.pipe(
+ Effect.flatMap((svc) => svc.getMatchStory(mapDataId)),
+ Effect.catchAll(() => Effect.succeed(null))
+ )
+ );
+}
+
+/** Map name + team name shown in the map page frame. Immutable after upload. */
+export async function getCachedMapDetails(mapId: number, mapDataId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
+ return prisma.matchStart.findFirst({
+ where: { MapDataId: mapDataId },
+ select: { map_name: true, team_1_name: true },
+ orderBy: { id: "asc" },
+ });
+}
+
+/**
+ * Replay code + VOD link for the map page frame. Both are user-editable:
+ * replayCode edits go through update-scrim-options (revalidates the scrim
+ * tag) and VOD edits through /api/vod (revalidates the map tag).
+ */
+export async function getCachedMapRow(scrimId: number, mapId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
+ cacheTag(scrimTag(scrimId));
+ return prisma.map.findFirst({
+ where: { id: mapId },
+ select: { replayCode: true, vod: true },
+ });
+}
+
+/** Hero bans for the map header. Immutable after upload. */
+export async function getCachedHeroBans(mapId: number, mapDataId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
+ return prisma.heroBan.findMany({
+ where: { MapDataId: mapDataId },
+ orderBy: { id: "asc" },
+ });
+}
+
+/**
+ * Guest-mode visibility for the map page frame. Toggled via
+ * update-scrim-options, which revalidates the scrim tag.
+ */
+export async function getCachedScrimVisibility(scrimId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return prisma.scrim.findFirst({
+ where: { id: scrimId },
+ select: { guestMode: true },
+ });
+}
+
+/**
+ * Fight-initiation analysis for the initiation tab. Derived purely from
+ * immutable match events; failures degrade to "not available" so a bad log
+ * never breaks the tab (and errors are not cached).
+ */
+export async function getCachedFightInitiation(
+ mapId: number,
+ mapDataId: number
+) {
+ "use cache";
+ cacheLife("hours");
+ cacheTag(mapTag(mapId));
+ return getFightInitiationForMapData(mapDataId);
+}
diff --git a/apps/web/src/data/cached/map-viewer.ts b/apps/web/src/data/cached/map-viewer.ts
new file mode 100644
index 000000000..eba56f7e8
--- /dev/null
+++ b/apps/web/src/data/cached/map-viewer.ts
@@ -0,0 +1,52 @@
+import "server-only";
+
+import { AppRuntime } from "@/data/runtime";
+import { UserService } from "@/data/user";
+import { auth, isAuthedToViewMap, type Session } from "@/lib/auth";
+import { getColorblindMode } from "@/lib/server-utils";
+import type { User } from "@/generated/prisma/browser";
+import { Effect } from "effect";
+import { cacheLife } from "next/cache";
+
+export type MapViewerContext =
+ | { canView: false }
+ | {
+ canView: true;
+ session: Session | null;
+ user: User | null;
+ team1Color: string;
+ team2Color: string;
+ };
+
+/**
+ * The per-viewer request work for a map page render — access gate, session,
+ * user row, and colorblind palette — in one `"use cache: private"` scope.
+ *
+ * Private caching serves two purposes: it lets Next's runtime prefetch
+ * (`prefetch = 'allow-runtime'` on the map page) execute this and everything
+ * behind it ahead of a tab click (uncached session/DB reads would otherwise
+ * abort the prefetch at the surrounding Suspense boundary), and it lets the
+ * browser reuse the result across tab navigations within the stale window.
+ * Results live only in the browser's memory, never on the server.
+ */
+export async function getMapViewerContext(
+ scrimId: number,
+ mapId: number
+): Promise<MapViewerContext> {
+ "use cache: private";
+ // stale >= 30s is required for runtime prefetching; "minutes" keeps access
+ // revocation lag bounded at the profile's 5-minute client stale window.
+ cacheLife("minutes");
+
+ if (!(await isAuthedToViewMap(scrimId, mapId))) {
+ return { canView: false };
+ }
+
+ const session = await auth();
+ const user = await AppRuntime.runPromise(
+ UserService.pipe(Effect.flatMap((svc) => svc.getUser(session?.user?.email)))
+ );
+ const { team1, team2 } = await getColorblindMode(user?.id ?? "");
+
+ return { canView: true, session, user, team1Color: team1, team2Color: team2 };
+}
diff --git a/apps/web/src/data/cached/scrim-cache.ts b/apps/web/src/data/cached/scrim-cache.ts
new file mode 100644
index 000000000..85da9df69
--- /dev/null
+++ b/apps/web/src/data/cached/scrim-cache.ts
@@ -0,0 +1,73 @@
+import "server-only";
+
+import { AppRuntime } from "@/data/runtime";
+import {
+ ScrimOverviewService,
+ ScrimPositionalArtifactsService,
+ ScrimPositionalStatsService,
+ ScrimService,
+} from "@/data/scrim";
+import { ScrimInitiationService } from "@/data/scrim/initiation-service";
+import { scrimTag } from "@/lib/cache-tags";
+import { Effect } from "effect";
+import { cacheLife, cacheTag } from "next/cache";
+
+// Scrim-level aggregates depend on the full set of maps in the scrim, so unlike
+// per-map reads they change when maps are added, removed, or edited. They're
+// tagged `scrim:${scrimId}` and invalidated from the scrim mutation routes.
+
+export async function getCachedScrim(scrimId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return AppRuntime.runPromise(
+ ScrimService.pipe(Effect.flatMap((svc) => svc.getScrim(scrimId)))
+ );
+}
+
+export async function getCachedScrimOverview(scrimId: number, teamId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return AppRuntime.runPromise(
+ ScrimOverviewService.pipe(
+ Effect.flatMap((svc) => svc.getScrimOverview(scrimId, teamId))
+ )
+ );
+}
+
+export async function getCachedScrimPositionalStats(scrimId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return AppRuntime.runPromise(
+ ScrimPositionalStatsService.pipe(
+ Effect.flatMap((svc) => svc.getScrimPositionalStats(scrimId))
+ )
+ );
+}
+
+export async function getCachedScrimPositionalArtifacts(
+ scrimId: number,
+ teamId: number
+) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return AppRuntime.runPromise(
+ ScrimPositionalArtifactsService.pipe(
+ Effect.flatMap((svc) => svc.getScrimPositionalArtifacts(scrimId, teamId))
+ )
+ );
+}
+
+export async function getCachedScrimInitiation(scrimId: number) {
+ "use cache";
+ cacheLife("max");
+ cacheTag(scrimTag(scrimId));
+ return AppRuntime.runPromise(
+ ScrimInitiationService.pipe(
+ Effect.flatMap((svc) => svc.getScrimInitiation(scrimId))
+ )
+ );
+}
diff --git a/apps/web/src/data/cached/team-cache.ts b/apps/web/src/data/cached/team-cache.ts
new file mode 100644
index 000000000..1d8c171a7
--- /dev/null
+++ b/apps/web/src/data/cached/team-cache.ts
@@ -0,0 +1,35 @@
+import "server-only";
+
+import { AppRuntime } from "@/data/runtime";
+import { type TeamDateRange, TeamStatsService } from "@/data/team";
+import { getTeamSubstituteNames } from "@/data/team/substitutes";
+import { teamStatsTag } from "@/lib/cache-tags";
+import { Effect } from "effect";
+import { cacheLife, cacheTag } from "next/cache";
+
+// Team stats change whenever a scrim is uploaded to (or removed from) the team,
+// so they're tagged `team-stats:${teamId}` and invalidated from the scrim
+// mutation routes. `cacheLife('days')` is a safety net in case an invalidation
+// is ever missed; the per-request date range is passed in as part of the key,
+// never read inside the cache scope.
+
+export async function getCachedTeamWinrates(
+ teamId: number,
+ dateRange: TeamDateRange | undefined
+) {
+ "use cache";
+ cacheLife("days");
+ cacheTag(teamStatsTag(teamId));
+ return AppRuntime.runPromise(
+ TeamStatsService.pipe(
+ Effect.flatMap((svc) => svc.getTeamWinrates(teamId, dateRange))
+ )
+ );
+}
+
+export async function getCachedTeamSubstituteNames(teamId: number) {
+ "use cache";
+ cacheLife("days");
+ cacheTag(teamStatsTag(teamId));
+ return getTeamSubstituteNames(teamId);
+}
diff --git a/apps/web/src/data/scrim/overview-service.ts b/apps/web/src/data/scrim/overview-service.ts
index 2ad545402..c11a58655 100644
--- a/apps/web/src/data/scrim/overview-service.ts
+++ b/apps/web/src/data/scrim/overview-service.ts
@@ -2161,12 +2161,14 @@ export const make: Effect.Effect<
deaths: aggregated.deaths,
heroDamageDealt: aggregated.heroDamageDealt,
healingDealt: aggregated.healingDealt,
+ damageBlocked: aggregated.damageBlocked,
heroTimePlayed: aggregated.heroTimePlayed,
kdRatio,
eliminationsPer10: aggregated.eliminationsPer10,
deathsPer10: aggregated.deathsPer10,
heroDamagePer10: aggregated.heroDamagePer10,
healingDealtPer10: aggregated.healingDealtPer10,
+ damageBlockedPer10: aggregated.damageBlockedPer10,
firstDeathCount: totalFirstDeaths,
firstDeathRate:
totalFights > 0 ? (totalFirstDeaths / totalFights) * 100 : 0,
@@ -2213,7 +2215,7 @@ export const make: Effect.Effect<
player.primaryHero,
player.heroDamageDealt,
player.healingDealt,
- 0,
+ player.damageBlocked,
player.deaths,
player.eliminations
);
diff --git a/apps/web/src/data/scrim/types.ts b/apps/web/src/data/scrim/types.ts
index 50a17342e..4245f1fef 100644
--- a/apps/web/src/data/scrim/types.ts
+++ b/apps/web/src/data/scrim/types.ts
@@ -140,12 +140,14 @@ export type PlayerScrimPerformance = {
deaths: number;
heroDamageDealt: number;
healingDealt: number;
+ damageBlocked: number;
heroTimePlayed: number;
kdRatio: number;
eliminationsPer10: number;
deathsPer10: number;
heroDamagePer10: number;
healingDealtPer10: number;
+ damageBlockedPer10: number;
firstDeathCount: number;
firstDeathRate: number;
teamFirstDeathCount: number;
diff --git a/apps/web/src/hooks/use-predictive-prefetch.ts b/apps/web/src/hooks/use-predictive-prefetch.ts
index 00d854b1f..5789e5391 100644
--- a/apps/web/src/hooks/use-predictive-prefetch.ts
+++ b/apps/web/src/hooks/use-predictive-prefetch.ts
@@ -7,7 +7,6 @@ import {
type Sample,
type Vec,
} from "@/lib/predictive-prefetch";
-import type { Route } from "next";
import { useRouter } from "next/navigation";
import type { RefObject } from "react";
import { useEffect, useRef } from "react";
@@ -36,6 +35,12 @@ export type PredictivePrefetchOptions = {
coneAngleDeg?: number;
minSpeed?: number;
enabled?: boolean;
+ /**
+ * "auto" (default) prefetches the App Shell; "full" issues a runtime
+ * prefetch that includes request data — only useful when the destination
+ * route sets `prefetch = 'allow-runtime'`.
+ */
+ prefetchKind?: "auto" | "full";
/**
* When provided, called each animation frame with the full detection state.
* Used only by the debug overlay; absent in normal use (zero overhead).
@@ -43,6 +48,27 @@ export type PredictivePrefetchOptions = {
onFrame?: (frame: PredictivePrefetchDebugFrame) => void;
};
+/**
+ * Prefetch a route with an explicit kind. `kind: "full"` issues a runtime
+ * prefetch (request data included) when the destination route sets
+ * `prefetch = 'allow-runtime'`. Centralized here because `typedRoutes`
+ * narrows the router's `prefetch` signature to `(href)` even though the
+ * runtime accepts an options argument, and the `PrefetchKind` enum lives in
+ * next's internals (its FULL value is the string "full").
+ */
+export function prefetchRoute(
+ router: ReturnType<typeof useRouter>,
+ href: string,
+ kind: "auto" | "full"
+): void {
+ (
+ router.prefetch as unknown as (
+ href: string,
+ options?: { kind: "auto" | "full" }
+ ) => void
+ )(href, kind === "full" ? { kind } : undefined);
+}
+
// Rolling sample window for the velocity estimate.
const SAMPLE_WINDOW_MS = 50;
const MAX_SAMPLES = 6;
@@ -62,6 +88,7 @@ export function usePredictivePrefetch(
coneAngleDeg = 30,
minSpeed = 0.15,
enabled = true,
+ prefetchKind = "auto",
onFrame,
} = options;
@@ -93,9 +120,11 @@ export function usePredictivePrefetch(
if (!container || !cursor) return;
const velocity = estimateVelocity(samples);
+ // Anchors plus non-link targets (e.g. tab triggers) that opt in via
+ // data-prefetch-href.
const anchors = Array.from(
- container.querySelectorAll<HTMLAnchorElement>(
- 'a[href^="/"]:not([href^="//"])'
+ container.querySelectorAll<HTMLElement>(
+ 'a[href^="/"]:not([href^="//"]), [data-prefetch-href^="/"]:not([data-prefetch-href^="//"])'
)
);
@@ -105,7 +134,9 @@ export function usePredictivePrefetch(
: null;
for (const anchor of anchors) {
- const href = anchor.getAttribute("href");
+ const href =
+ anchor.getAttribute("href") ??
+ anchor.getAttribute("data-prefetch-href");
// Same-origin paths only: reject protocol-relative ("//host") and the
// back-slash variant browsers normalize to it, plus in-page hashes.
if (
@@ -130,7 +161,7 @@ export function usePredictivePrefetch(
optsRef.current
);
if (heading && !already) {
- router.prefetch(href as Route);
+ prefetchRoute(router, href, prefetchKind);
prefetched.add(href);
}
@@ -179,5 +210,5 @@ export function usePredictivePrefetch(
window.removeEventListener("pointermove", handlePointerMove);
if (frame) cancelAnimationFrame(frame);
};
- }, [containerRef, router, enabled]);
+ }, [containerRef, router, enabled, prefetchKind]);
}
diff --git a/apps/web/src/instrumentation-node.ts b/apps/web/src/instrumentation-node.ts
index c0cf75290..e1d9db8c2 100644
--- a/apps/web/src/instrumentation-node.ts
+++ b/apps/web/src/instrumentation-node.ts
@@ -15,7 +15,6 @@ import {
import {
BatchSpanProcessor,
NodeTracerProvider,
- SimpleSpanProcessor,
} from "@opentelemetry/sdk-trace-node";
import {
ATTR_SERVICE_NAME,
@@ -74,11 +73,10 @@ export function registerNode() {
const provider = new NodeTracerProvider({
resource: RESOURCE,
- spanProcessors: [
- IS_PROD
- ? new BatchSpanProcessor(otlpTraceExporter)
- : new SimpleSpanProcessor(otlpTraceExporter),
- ],
+ // BatchSpanProcessor exports on a timer rather than synchronously on span
+ // end, so trace export never reads Date.now() inside a Cache Components
+ // prerender pass (which the dev server runs per request).
+ spanProcessors: [new BatchSpanProcessor(otlpTraceExporter)],
});
registerInstrumentations({
@@ -188,9 +186,7 @@ const EffectTracingLive = NodeSdk.layer(() => ({
[ATTR_DEPLOYMENT_ENVIRONMENT_NAME]: ENVIRONMENT,
},
},
- spanProcessor: IS_PROD
- ? new BatchSpanProcessor(new OTLPTraceExporter(OTLP_CONFIG))
- : new SimpleSpanProcessor(new OTLPTraceExporter(OTLP_CONFIG)),
+ spanProcessor: new BatchSpanProcessor(new OTLPTraceExporter(OTLP_CONFIG)),
metricReader: new PeriodicExportingMetricReader({
exporter: new OTLPMetricExporter(METRIC_EXPORTER_CONFIG),
exportIntervalMillis: 10_000,
diff --git a/apps/web/src/instrumentation.ts b/apps/web/src/instrumentation.ts
index 258741260..298bf9a39 100644
--- a/apps/web/src/instrumentation.ts
+++ b/apps/web/src/instrumentation.ts
@@ -7,6 +7,11 @@ type RequestErrorArgs = Parameters<Instrumentation.onRequestError>;
export async function register() {
if (process.env.NEXT_RUNTIME !== "nodejs") return;
+ // OpenTelemetry generates span IDs with Math.random(), which Cache Components
+ // disallows during prerendering. Build-time prerenders need no telemetry;
+ // runtime requests still register and export traces.
+ if (process.env.NEXT_PHASE === "phase-production-build") return;
+
const { registerNode } = await import("./instrumentation-node");
registerNode();
}
diff --git a/apps/web/src/lib/cache-tags.ts b/apps/web/src/lib/cache-tags.ts
new file mode 100644
index 000000000..17bcb2626
--- /dev/null
+++ b/apps/web/src/lib/cache-tags.ts
@@ -0,0 +1,29 @@
+import { revalidateTag } from "next/cache";
+
+// Tag helpers for the cached data readers under `src/data/cached`. Kept in one
+// place so the tag format stays in sync between the readers and the mutation
+// routes that invalidate them.
+
+export function scrimTag(scrimId: number) {
+ return `scrim:${scrimId}`;
+}
+
+export function mapTag(mapId: number) {
+ return `map:${mapId}`;
+}
+
+export function teamStatsTag(teamId: number) {
+ return `team-stats:${teamId}`;
+}
+
+export function revalidateScrim(scrimId: number) {
+ revalidateTag(scrimTag(scrimId), "max");
+}
+
+export function revalidateMap(mapId: number) {
+ revalidateTag(mapTag(mapId), "max");
+}
+
+export function revalidateTeamStats(teamId: number) {
+ revalidateTag(teamStatsTag(teamId), "max");
+}
diff --git a/apps/web/src/lib/flags-helpers.ts b/apps/web/src/lib/flags-helpers.ts
index 8fd5c8fac..376e6e84e 100644
--- a/apps/web/src/lib/flags-helpers.ts
+++ b/apps/web/src/lib/flags-helpers.ts
@@ -4,7 +4,6 @@ import {
dataLabeling,
faceitScouting,
mapComparison,
- newLandingPage,
overviewCard,
positionalData,
queryBuilder,
@@ -14,6 +13,70 @@ import {
tournament,
ultimateImpactTool,
} from "@/lib/flags";
+import { logger } from "@/lib/axiom/server";
+import { FLAGS_CODE_HEADER, pageFlags } from "@/lib/flags-precompute";
+import { getPrecomputed } from "flags/next";
+import { headers } from "next/headers";
+
+type PageFlag = (typeof pageFlags)[number];
+
+async function getFlagsCode(): Promise<string | null> {
+ return (await headers()).get(FLAGS_CODE_HEADER);
+}
+
+/**
+ * Read one flag's value from the code precomputed in `proxy.ts`. This is the
+ * only supported way to read a flag in render code (pages, layouts, server
+ * components): decoding is pure computation, so PPR's cache-warming and final
+ * prerender passes always agree. A missing code (proxy matcher gap, build
+ * time) deterministically yields `false` — the same request never sees two
+ * different values. Route handlers and server actions call flags live instead.
+ */
+export async function getFlag(f: PageFlag): Promise<boolean> {
+ const code = await getFlagsCode();
+ if (!code) {
+ logger.warn(
+ `flags: request has no precomputed flags code; "${f.key}" falls back to false`
+ );
+ return false;
+ }
+ return getPrecomputed(f, pageFlags, code);
+}
+
+/** Precomputed equivalent of `resolveAllFlags` for render code. */
+export async function getAllFlags(): Promise<FeatureFlags> {
+ const [
+ mapComparisonEnabled,
+ overviewCardEnabled,
+ scoutingEnabled,
+ faceitScoutingEnabled,
+ dataLabelingEnabled,
+ simulationToolEnabled,
+ ultimateImpactToolEnabled,
+ tempoChartEnabled,
+ positionalDataEnabled,
+ aiChatEnabled,
+ tournamentEnabled,
+ coachingCanvasEnabled,
+ queryBuilderEnabled,
+ ] = await Promise.all(pageFlags.map((f) => getFlag(f)));
+
+ return {
+ scoutingEnabled,
+ faceitScoutingEnabled,
+ mapComparisonEnabled,
+ overviewCardEnabled,
+ dataLabelingEnabled,
+ simulationToolEnabled,
+ ultimateImpactToolEnabled,
+ tempoChartEnabled,
+ aiChatEnabled,
+ positionalDataEnabled,
+ tournamentEnabled,
+ coachingCanvasEnabled,
+ queryBuilderEnabled,
+ };
+}
export type FeatureFlags = {
scoutingEnabled: boolean;
@@ -24,7 +87,6 @@ export type FeatureFlags = {
simulationToolEnabled: boolean;
ultimateImpactToolEnabled: boolean;
tempoChartEnabled: boolean;
- newLandingPageEnabled: boolean;
aiChatEnabled: boolean;
positionalDataEnabled: boolean;
tournamentEnabled: boolean;
@@ -32,6 +94,13 @@ export type FeatureFlags = {
queryBuilderEnabled: boolean;
};
+/**
+ * Live evaluation of every flag. ONLY for route handlers and server actions,
+ * which are never prerendered. Render code must use `getAllFlags`/`getFlag`
+ * instead — a live evaluation that transiently fails falls back to
+ * `defaultValue` in one prerender pass but not the other, desyncing the
+ * passes' `use cache` calls (HANGING_PROMISE_REJECTION).
+ */
export async function resolveAllFlags(): Promise<FeatureFlags> {
const [
scoutingEnabled,
@@ -42,7 +111,6 @@ export async function resolveAllFlags(): Promise<FeatureFlags> {
simulationToolEnabled,
ultimateImpactToolEnabled,
tempoChartEnabled,
- newLandingPageEnabled,
aiChatEnabled,
positionalDataEnabled,
tournamentEnabled,
@@ -57,7 +125,6 @@ export async function resolveAllFlags(): Promise<FeatureFlags> {
simulationTool(),
ultimateImpactTool(),
tempoChart(),
- newLandingPage(),
aiChat(),
positionalData(),
tournament(),
@@ -74,7 +141,6 @@ export async function resolveAllFlags(): Promise<FeatureFlags> {
simulationToolEnabled,
ultimateImpactToolEnabled,
tempoChartEnabled,
- newLandingPageEnabled,
aiChatEnabled,
positionalDataEnabled,
tournamentEnabled,
@@ -93,7 +159,6 @@ export function toFlagValues(flags: FeatureFlags): Record<string, boolean> {
"simulation-tool": flags.simulationToolEnabled,
"ultimate-impact-tool": flags.ultimateImpactToolEnabled,
"tempo-chart": flags.tempoChartEnabled,
- "new-landing-page": flags.newLandingPageEnabled,
"ai-chat": flags.aiChatEnabled,
"positional-data": flags.positionalDataEnabled,
tournament: flags.tournamentEnabled,
diff --git a/apps/web/src/lib/flags-precompute.ts b/apps/web/src/lib/flags-precompute.ts
new file mode 100644
index 000000000..abb121b63
--- /dev/null
+++ b/apps/web/src/lib/flags-precompute.ts
@@ -0,0 +1,49 @@
+import {
+ aiChat,
+ coachingCanvas,
+ dataLabeling,
+ faceitScouting,
+ mapComparison,
+ overviewCard,
+ positionalData,
+ queryBuilder,
+ scoutingTool,
+ simulationTool,
+ tempoChart,
+ tournament,
+ ultimateImpactTool,
+} from "@/lib/flags";
+
+/**
+ * Request header carrying the precomputed flags code from `proxy.ts` to
+ * render code. Read via `getFlag`/`getAllFlags` in `flags-helpers.ts`.
+ *
+ * These live outside `flags.ts` on purpose: the Flags Explorer discovery
+ * endpoint (`.well-known/vercel/flags`) treats every export of that module
+ * as a flag definition.
+ */
+export const FLAGS_CODE_HEADER = "x-flags-code";
+
+/**
+ * Every flag, in a FIXED order (the order is part of the precompute
+ * encoding). `proxy.ts` evaluates this group once per page request; render
+ * code decodes the result instead of evaluating live. Live evaluation can
+ * fall back to `defaultValue` on a transient error in only one of PPR's two
+ * prerender passes, which desyncs the passes' `use cache` calls and causes
+ * HANGING_PROMISE_REJECTION. Add new flags to the END of this array.
+ */
+export const pageFlags = [
+ mapComparison,
+ overviewCard,
+ scoutingTool,
+ faceitScouting,
+ dataLabeling,
+ simulationTool,
+ ultimateImpactTool,
+ tempoChart,
+ positionalData,
+ aiChat,
+ tournament,
+ coachingCanvas,
+ queryBuilder,
+] as const;
diff --git a/apps/web/src/lib/flags.ts b/apps/web/src/lib/flags.ts
index 0adaa274e..4cbb5fa2d 100644
--- a/apps/web/src/lib/flags.ts
+++ b/apps/web/src/lib/flags.ts
@@ -16,14 +16,47 @@ type Entities = {
};
};
+/**
+ * Retry an idempotent read a few times on a transient failure. `identify` does
+ * two DB reads (session + user/teams) that run during PPR's prerender; a
+ * one-off pool/connection blip ("Connection closed") there makes the flag fall
+ * back to its defaultValue in only one of the two prerender passes, so the
+ * passes disagree on the flag/entities cache key and log an "Unexpected cache
+ * miss". Retrying the reads keeps the outcome stable across a blip. Both ops
+ * are read-only and idempotent, so replaying them is safe.
+ */
+async function withDbRetry<T>(op: () => Promise<T>, attempts = 3): Promise<T> {
+ let lastError: unknown;
+ for (let attempt = 0; attempt < attempts; attempt++) {
+ try {
+ return await op();
+ } catch (error) {
+ lastError = error;
+ if (attempt < attempts - 1) {
+ await new Promise((resolve) => setTimeout(resolve, 50 * (attempt + 1)));
+ }
+ }
+ }
+ throw lastError;
+}
+
const identify = dedupe(async (): Promise<Entities> => {
- const session = await auth();
+ const session = await withDbRetry(() => auth());
if (!session) return { user: undefined, teams: undefined };
- const user = await prisma.user.findUnique({
- where: { email: session?.user?.email },
- include: { teams: true },
- });
+ const user = await withDbRetry(() =>
+ prisma.user.findUnique({
+ where: { email: session?.user?.email },
+ // `teams` feeds `idArray` below, which becomes part of the flag
+ // evaluation entities. Under `partialPrefetching`, flags are precomputed
+ // during prerendering, so a non-deterministic team order makes the
+ // cache-warming and final prerender passes disagree on the cache key
+ // ("Unexpected cache miss after cache warming phase"). Order
+ // deterministically to keep the entities — and therefore the cache key —
+ // stable across passes.
+ include: { teams: { orderBy: { id: "asc" } } },
+ })
+ );
return {
user: user
@@ -186,18 +219,6 @@ export const positionalData = flag<boolean, Entities>({
identify,
});
-export const newLandingPage = flag<boolean, Entities>({
- key: "new-landing-page",
- adapter: vercelAdapter(),
- options: [
- { value: true, label: "Enabled" },
- { value: false, label: "Disabled" },
- ],
- defaultValue: false,
- description: "Show the redesigned landing page",
- identify,
-});
-
export const aiChat = flag<boolean, Entities>({
key: "ai-chat",
adapter: vercelAdapter(),
diff --git a/apps/web/src/lib/map-data-resolver.ts b/apps/web/src/lib/map-data-resolver.ts
index 92ea814ce..474fb9708 100644
--- a/apps/web/src/lib/map-data-resolver.ts
+++ b/apps/web/src/lib/map-data-resolver.ts
@@ -1,13 +1,30 @@
+import { mapTag } from "@/lib/cache-tags";
import prisma from "@/lib/prisma";
+import { cacheLife, cacheTag } from "next/cache";
/**
* Resolves a Map.id to its corresponding MapData.id.
* URL route params use Map.id, but event tables reference MapData.id.
+ *
+ * Cached: the mapping is immutable once uploaded (re-uploads add rows, but the
+ * oldest row stays pinned below), and the result feeds nearly every cached map
+ * read — caching it also lets runtime prefetches advance past it. Invalidated
+ * via `map:${mapId}` on map removal.
*/
export async function resolveMapDataId(mapId: number): Promise<number> {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
const mapData = await prisma.mapData.findFirst({
where: { mapId },
select: { id: true },
+ // A map can have more than one MapData row (e.g. a re-upload). Without an
+ // explicit order, `findFirst` returns an arbitrary row that can differ
+ // between calls — and this id feeds cached-function arguments (e.g.
+ // getCachedMatchStory), so a non-deterministic result breaks the cache key
+ // between PPR's warming and final prerender passes ("Unexpected cache miss
+ // after cache warming phase"). Pin the oldest row for a stable result.
+ orderBy: { id: "asc" },
});
if (!mapData) {
const directCheck = await prisma.mapData.findUnique({
@@ -23,15 +40,23 @@ export async function resolveMapDataId(mapId: number): Promise<number> {
/**
* Resolves a Map.id to MapData.id only when the map belongs to the route scrim.
* Use this for request-controlled route params so MapData.id fallbacks cannot
- * cross resource boundaries.
+ * cross resource boundaries. Cached for the same reasons as `resolveMapDataId`.
*/
export async function resolveScrimMapDataId(
scrimId: number,
mapId: number
): Promise<number> {
+ "use cache";
+ cacheLife("max");
+ cacheTag(mapTag(mapId));
const mapData = await prisma.mapData.findFirst({
where: { scrimId, mapId },
select: { id: true },
+ // Deterministic pick: a map can have multiple MapData rows and this id is a
+ // cached-function argument across every map tab, so an unordered `findFirst`
+ // makes the cache key differ between PPR passes ("Unexpected cache miss
+ // after cache warming phase" → dynamic "use cache" hanging promise).
+ orderBy: { id: "asc" },
});
if (!mapData) {
throw new Error(`No MapData found for scrimId=${scrimId}, mapId=${mapId}`);
diff --git a/apps/web/src/lib/metadata-i18n.ts b/apps/web/src/lib/metadata-i18n.ts
new file mode 100644
index 000000000..af37e4592
--- /dev/null
+++ b/apps/web/src/lib/metadata-i18n.ts
@@ -0,0 +1,60 @@
+import { defaultLocale, type Locale } from "@/i18n/config";
+import { createTranslator } from "next-intl";
+import enMessages from "../../messages/en.json";
+
+/**
+ * Cookie-free translator for `generateMetadata`.
+ *
+ * next-intl's `getTranslations` always resolves the per-request locale through
+ * the request config (`getUserLocale` → `cookies()`), which forces every
+ * route's `<head>` to render dynamically under Cache Components. Metadata is
+ * instead resolved in the default locale from the statically-imported catalog
+ * so it can be prerendered. Page content is still localized at runtime via the
+ * `NextIntlClientProvider` in the root layout.
+ */
+export function getMetadataTranslations(namespace?: string) {
+ return getStaticTranslations(namespace);
+}
+
+/**
+ * The same cookie-free, default-locale translator for static-shell UI:
+ * `loading.tsx` skeletons and Suspense fallbacks. Fallbacks must be
+ * prerenderable — `getTranslations` reads the LOCALE cookie and would force
+ * the shell dynamic. The localized content replaces them when it streams.
+ */
+export function getStaticTranslations(namespace?: string) {
+ // The app does not augment next-intl's global `Messages` type, so cast to the
+ // translator's default (loosely-typed) options instead of having it infer a
+ // strict namespace union from the imported catalog.
+ return createTranslator({
+ locale: defaultLocale,
+ messages: enMessages,
+ namespace,
+ } as Parameters<typeof createTranslator>[0]);
+}
+
+/**
+ * Cookie-free translator for an EXPLICIT locale, for use inside `"use cache"`
+ * scopes. `getTranslations` resolves the locale from the LOCALE cookie, and
+ * request APIs are forbidden inside public cache scopes — so cached server
+ * components take the locale as a prop (making it part of the cache key) and
+ * translate through this instead.
+ */
+export async function getLocaleTranslations(
+ locale: Locale,
+ namespace?: string
+) {
+ const messages =
+ locale === defaultLocale
+ ? enMessages
+ : (
+ (await import(`../../messages/${locale}.json`)) as {
+ default: typeof enMessages;
+ }
+ ).default;
+ return createTranslator({
+ locale,
+ messages,
+ namespace,
+ } as Parameters<typeof createTranslator>[0]);
+}
diff --git a/apps/web/src/lib/mvp-score.ts b/apps/web/src/lib/mvp-score.ts
index 59932fec5..8a8a47613 100644
--- a/apps/web/src/lib/mvp-score.ts
+++ b/apps/web/src/lib/mvp-score.ts
@@ -232,10 +232,16 @@ export async function calculateMVPScoreFromStats({
if (validStats.length === 0) return null;
- // Only evaluate the most-played hero to avoid bias towards frequent swaps
- const mostPlayedRow = validStats.reduce((prev, current) =>
- prev.hero_time_played > current.hero_time_played ? prev : current
- );
+ // Only evaluate the most-played hero to avoid bias towards frequent swaps.
+ // Break exact-time ties on a stable field (player_hero) rather than array
+ // position — otherwise an unordered `playerStats` order could pick a
+ // different hero between PPR passes and desync the downstream stat cache.
+ const mostPlayedRow = validStats.reduce((prev, current) => {
+ if (current.hero_time_played !== prev.hero_time_played) {
+ return current.hero_time_played > prev.hero_time_played ? current : prev;
+ }
+ return current.player_hero < prev.player_hero ? current : prev;
+ });
const heroScore = await calculateHeroMVPScore(
playerName,
diff --git a/apps/web/src/lib/parser/client.ts b/apps/web/src/lib/parser/client.ts
index 2bc7b2cbe..0322ff5eb 100644
--- a/apps/web/src/lib/parser/client.ts
+++ b/apps/web/src/lib/parser/client.ts
@@ -205,6 +205,17 @@ export async function parseDataFromTXT(file: File) {
? await file?.text()
: (file as unknown as string);
+ return parseLogText(fileContent);
+}
+
+/**
+ * Parse already-read log text into structured `ParserData`. Split out from
+ * `parseDataFromTXT` so callers that need the raw text for other reasons (the
+ * bulk uploader reads it once to also run corruption detection and to log how
+ * many bytes the file actually yielded) can parse without a second `File.text()`
+ * read. Pure and synchronous: same text in -> same data out.
+ */
+export function parseLogText(fileContent: string): ParserData {
const lines = fileContent
.split("\n")
.map((line) => splitLinePreservingCoords(line));
diff --git a/apps/web/src/lib/parser/persistence.ts b/apps/web/src/lib/parser/persistence.ts
index a8812e8f7..675778ee4 100644
--- a/apps/web/src/lib/parser/persistence.ts
+++ b/apps/web/src/lib/parser/persistence.ts
@@ -136,13 +136,21 @@ async function insertMapEventRows(
let done = 0;
onProgress?.(0, total);
- await Promise.all(
- tasks.map(async ([, run], i) => {
- await run();
- done += weights[i];
- onProgress?.(done, total);
- })
- );
+ // Run the inserts SEQUENTIALLY, not under Promise.all. During ingestion `db`
+ // is an interactive-transaction client pinned to a single Postgres
+ // connection, and a connection can only execute one query at a time. Firing
+ // all event-type inserts concurrently issues overlapping queries on that one
+ // connection, which the pg driver only tolerates by queueing them (now a
+ // deprecation warning: "Calling client.query() when the client is already
+ // executing a query") and a future pg release will reject outright. Serial
+ // execution keeps one in-flight query per connection and still streams
+ // weighted progress after each event type commits.
+ for (let i = 0; i < tasks.length; i++) {
+ const [, run] = tasks[i];
+ await run();
+ done += weights[i];
+ onProgress?.(done, total);
+ }
}
export async function createNewScrimFromParsedData(
diff --git a/apps/web/src/lib/query-builder/compute/player-outliers.ts b/apps/web/src/lib/query-builder/compute/player-outliers.ts
index c444185ad..7da4dcc23 100644
--- a/apps/web/src/lib/query-builder/compute/player-outliers.ts
+++ b/apps/web/src/lib/query-builder/compute/player-outliers.ts
@@ -150,6 +150,9 @@ export async function computePlayerOutliers(
const mapDataIds = Array.from(scopedMapIds);
const playerStats = await prisma.playerStat.findMany({
where: { MapDataId: { in: mapDataIds } },
+ // Deterministic order so downstream Map insertion order (which decides the
+ // primary-hero tie-break below) is stable across renders.
+ orderBy: [{ MapDataId: "asc" }, { id: "asc" }],
});
const maxTimeByMap = new Map<number, number>();
@@ -193,7 +196,8 @@ export async function computePlayerOutliers(
(totals) => {
const primaryHero =
Array.from(totals.heroTimes.entries()).sort(
- (a, b) => b[1] - a[1]
+ // Time desc, then hero name asc so exact ties resolve deterministically.
+ (a, b) => b[1] - a[1] || (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0)
)[0]?.[0] ?? "Unknown";
const role = determineRole(primaryHero as HeroName);
const statDefs = statDefsForRole(role);
diff --git a/apps/web/src/lib/stat-percentiles.ts b/apps/web/src/lib/stat-percentiles.ts
index f228a8017..65d6354e0 100644
--- a/apps/web/src/lib/stat-percentiles.ts
+++ b/apps/web/src/lib/stat-percentiles.ts
@@ -1,7 +1,7 @@
import prisma from "@/lib/prisma";
import type { HeroName } from "@/types/heroes";
import { Prisma } from "@/generated/prisma/client";
-import { unstable_cache } from "next/cache";
+import { cacheLife, cacheTag } from "next/cache";
// These baselines scan the whole PlayerStat table per hero (the app's biggest
// rows-read offender) yet are global, slowly-changing population statistics —
@@ -444,9 +444,16 @@ function buildMultiStatComparisonQuery({
`;
}
-async function compareMultipleStatsToDistributionUncached(
+export async function compareMultipleStatsToDistribution(
params: MultiStatComparisonParams
): Promise<MultiStatComparisonResult | null> {
+ "use cache";
+ cacheLife({
+ revalidate: HERO_BASELINE_TTL_SECONDS,
+ expire: HERO_BASELINE_TTL_SECONDS * 4,
+ });
+ cacheTag(HERO_BASELINE_TAG);
+
const query = buildMultiStatComparisonQuery(params);
const result =
await prisma.$queryRaw<{ hero: string; comparisons: StatComparison[] }[]>(
@@ -463,12 +470,6 @@ async function compareMultipleStatsToDistributionUncached(
};
}
-export const compareMultipleStatsToDistribution = unstable_cache(
- compareMultipleStatsToDistributionUncached,
- ["multi-stat-comparison"],
- { revalidate: HERO_BASELINE_TTL_SECONDS, tags: [HERO_BASELINE_TAG] }
-);
-
function buildStatDistributionBaselineQuery({
hero,
stat,
@@ -522,20 +523,21 @@ function buildStatDistributionBaselineQuery({
`;
}
-async function getStatDistributionBaselineUncached(
+export async function getStatDistributionBaseline(
params: StatDistributionBaselineParams
): Promise<StatDistributionBaseline | null> {
+ "use cache";
+ cacheLife({
+ revalidate: HERO_BASELINE_TTL_SECONDS,
+ expire: HERO_BASELINE_TTL_SECONDS * 4,
+ });
+ cacheTag(HERO_BASELINE_TAG);
+
const query = buildStatDistributionBaselineQuery(params);
const result = await prisma.$queryRaw<StatDistributionBaseline[]>(query);
return result[0] ?? null;
}
-export const getStatDistributionBaseline = unstable_cache(
- getStatDistributionBaselineUncached,
- ["stat-distribution-baseline"],
- { revalidate: HERO_BASELINE_TTL_SECONDS, tags: [HERO_BASELINE_TAG] }
-);
-
export type {
StatDistributionBaseline,
StatDistributionBaselineParams,
diff --git a/apps/web/src/lib/usage/queries.ts b/apps/web/src/lib/usage/queries.ts
index 9658c3a8f..deb1a933f 100644
--- a/apps/web/src/lib/usage/queries.ts
+++ b/apps/web/src/lib/usage/queries.ts
@@ -2,7 +2,7 @@ import "server-only";
import prisma from "@/lib/prisma";
import type { UsageEnv } from "@/generated/prisma/client";
-import { unstable_cache } from "next/cache";
+import { cacheLife } from "next/cache";
import { FUNNELS, computeFunnel, type FunnelStep } from "./funnels";
import { dayKey } from "./rollup";
@@ -170,10 +170,11 @@ async function loadFunnels(
}));
}
-export function getFunnels(env: UsageEnv, days = 30): Promise<FunnelResult[]> {
- return unstable_cache(
- () => loadFunnels(env, days),
- ["usage-funnels", env, String(days)],
- { revalidate: 60 * 60 * 24 } // daily
- )();
+export async function getFunnels(
+ env: UsageEnv,
+ days = 30
+): Promise<FunnelResult[]> {
+ "use cache";
+ cacheLife("days");
+ return loadFunnels(env, days);
}
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index e33108327..aa6d55869 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -292,7 +292,13 @@ export function ultimateStartToKillEvent(
*/
export async function translateMapName(name: string) {
const t = await getTranslations("maps");
- return t(toKebabCase(name));
+ const key = toKebabCase(name);
+ // The "maps" catalog is keyed by map slug and has no entry for unknown or
+ // fallback names (e.g. a map imported with an empty map_name resolves to the
+ // literal "Map" -> "map"). next-intl has no English fallback, so t("map")
+ // throws MISSING_MESSAGE and 500s the map page's generateMetadata. Degrade to
+ // the raw name instead of throwing when the slug isn't in the catalog.
+ return t.has(key) ? t(key) : name;
}
/**
@@ -304,7 +310,10 @@ export async function translateMapName(name: string) {
*/
export function useMapName(name: string) {
const t = useTranslations("maps");
- return t(toKebabCase(name));
+ const key = toKebabCase(name);
+ // See translateMapName: fall back to the raw name when the slug isn't in the
+ // "maps" catalog so an unknown/empty map name can't throw MISSING_MESSAGE.
+ return t.has(key) ? t(key) : name;
}
/**
diff --git a/apps/web/src/lib/win-probability/artifact-store.ts b/apps/web/src/lib/win-probability/artifact-store.ts
index bdfcc3b15..8850b532b 100644
--- a/apps/web/src/lib/win-probability/artifact-store.ts
+++ b/apps/web/src/lib/win-probability/artifact-store.ts
@@ -1,11 +1,13 @@
import { Logger } from "@/lib/logger";
import { r2 } from "@/lib/r2";
+import { cacheLife, cacheTag, revalidateTag } from "next/cache";
import { featureHash } from "./features";
import type { ModelArtifact } from "./model";
const MODEL_PREFIX = "wp-models";
const LATEST_KEY = `${MODEL_PREFIX}/latest.json`;
-export const ARTIFACT_TTL_MS = 60 * 60 * 1000;
+/** Cache tag for the live model artifact; busted by `publishArtifact`. */
+const ARTIFACT_TAG = "wp-artifact";
type LatestPointer = { key: string; modelVersion: number };
@@ -33,12 +35,6 @@ function parseArtifact(raw: string): ModelArtifact | null {
}
}
-let cache: { artifact: ModelArtifact | null; fetchedAt: number } | null = null;
-
-export function __resetArtifactCacheForTests(): void {
- cache = null;
-}
-
async function fetchLatest(): Promise<ModelArtifact | null> {
try {
const pointerRaw = await r2.download(LATEST_KEY);
@@ -68,17 +64,24 @@ async function fetchLatest(): Promise<ModelArtifact | null> {
}
/**
- * TTL-cached loader. Returns null — never throws — on any failure; callers
- * hide the WP surface when no model is servable. Failures are cached too,
- * so an R2 outage costs one attempt per TTL window.
+ * Loads the live model artifact. Returns null — never throws — on any failure;
+ * callers hide the WP surface when no model is servable (failures are cached
+ * too, so an R2 outage costs one fetch per revalidation window).
+ *
+ * Wrapped in `use cache` so Next governs the TTL. This is deliberate: the old
+ * hand-rolled `Date.now()` module TTL read the wall clock, and this loader is
+ * the FIRST call inside `getCachedMatchStory`'s `use cache` body — so that
+ * `Date.now()` executed inside a cache scope, turning `getCachedMatchStory`
+ * into a dynamic `use cache` that never committed. The result: a
+ * HANGING_PROMISE_REJECTION and an 8.9MB model re-download on every map render.
+ * `fetchLatest()` takes no arguments and reads only the deterministic
+ * `featureHash()`, so it is safe to cache; `publishArtifact` busts the tag.
*/
export async function loadLatestArtifact(): Promise<ModelArtifact | null> {
- if (cache !== null && Date.now() - cache.fetchedAt < ARTIFACT_TTL_MS) {
- return cache.artifact;
- }
- const artifact = await fetchLatest();
- cache = { artifact, fetchedAt: Date.now() };
- return artifact;
+ "use cache";
+ cacheLife("hours");
+ cacheTag(ARTIFACT_TAG);
+ return fetchLatest();
}
/** Versioned publish: model object first, pointer advance last — a crash
@@ -108,5 +111,8 @@ export async function publishArtifact(
),
contentType: "application/json",
});
+ // Drop the cached artifact so the freshly-published model is served
+ // immediately instead of waiting out the `cacheLife` window.
+ revalidateTag(ARTIFACT_TAG, "hours");
return { key, modelVersion };
}
diff --git a/apps/web/src/proxy.ts b/apps/web/src/proxy.ts
index 8549fef5a..42260a42c 100644
--- a/apps/web/src/proxy.ts
+++ b/apps/web/src/proxy.ts
@@ -4,16 +4,60 @@ import {
httpRequestDuration,
} from "@/lib/axiom/metrics";
import { logger } from "@/lib/axiom/server";
+import { FLAGS_CODE_HEADER, pageFlags } from "@/lib/flags-precompute";
import { transformMiddlewareRequest } from "@axiomhq/nextjs";
+import { precompute } from "flags/next";
import type { NextFetchEvent, NextRequest } from "next/server";
import { NextResponse } from "next/server";
-export function proxy(request: NextRequest, event: NextFetchEvent) {
+/**
+ * Paths that never read flags during render: API route handlers and server
+ * actions evaluate flags live, and static/well-known endpoints don't use
+ * them. Skipping avoids the identify DB reads on those requests.
+ */
+function shouldPrecomputeFlags(pathname: string): boolean {
+ return !(
+ pathname.startsWith("/api/") ||
+ pathname.startsWith("/.well-known/") ||
+ pathname.startsWith("/monitoring")
+ );
+}
+
+/**
+ * Evaluate all page flags exactly once per request and forward the signed
+ * result to the app on a request header. Render code decodes it via
+ * `getFlag`/`getAllFlags` — pure computation — so PPR's two prerender passes
+ * always see identical flag values. (A live evaluation that transiently fails
+ * in one pass silently flips to `defaultValue` and desyncs the passes'
+ * `use cache` calls: the HANGING_PROMISE_REJECTION class.) On precompute
+ * failure we forward WITHOUT the header: every reader then deterministically
+ * falls back to false for this request.
+ */
+async function withPrecomputedFlags(
+ request: NextRequest
+): Promise<NextResponse> {
+ if (!shouldPrecomputeFlags(request.nextUrl.pathname)) {
+ return NextResponse.next();
+ }
+ try {
+ const code = await precompute(pageFlags);
+ const requestHeaders = new Headers(request.headers);
+ requestHeaders.set(FLAGS_CODE_HEADER, code);
+ return NextResponse.next({ request: { headers: requestHeaders } });
+ } catch (error) {
+ logger.warn("flags: precompute failed; falling back to defaults", {
+ error,
+ });
+ return NextResponse.next();
+ }
+}
+
+export async function proxy(request: NextRequest, event: NextFetchEvent) {
const start = performance.now();
logger.info(...transformMiddlewareRequest(request));
- const response = NextResponse.next();
+ const response = await withPrecomputedFlags(request);
const pathname = request.nextUrl.pathname;
const method = request.method;
diff --git a/apps/web/test/flags-precomputed.test.ts b/apps/web/test/flags-precomputed.test.ts
new file mode 100644
index 000000000..92a537131
--- /dev/null
+++ b/apps/web/test/flags-precomputed.test.ts
@@ -0,0 +1,73 @@
+import { flag, serialize } from "flags/next";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+process.env.FLAGS_SECRET = "dGVzdC1zZWNyZXQtdGVzdC1zZWNyZXQtdGVzdC1zZWNyZXQ";
+
+const flagA = flag<boolean>({
+ key: "flag-a",
+ options: [{ value: true }, { value: false }],
+ defaultValue: false,
+ decide: () => true,
+});
+const flagB = flag<boolean>({
+ key: "flag-b",
+ options: [{ value: true }, { value: false }],
+ defaultValue: false,
+ decide: () => false,
+});
+const testGroup = [flagA, flagB] as const;
+
+const requestHeaders = new Map<string, string>();
+vi.mock("next/headers", () => ({
+ headers: () =>
+ Promise.resolve({
+ get: (name: string) => requestHeaders.get(name) ?? null,
+ }),
+}));
+vi.mock("@/lib/flags-precompute", () => ({
+ FLAGS_CODE_HEADER: "x-flags-code",
+ pageFlags: testGroup,
+}));
+vi.mock("@/lib/axiom/server", () => ({
+ logger: { warn: vi.fn() },
+}));
+// flags-helpers also re-exports a live resolver over the real flag module,
+// whose import chain reaches Stripe/Prisma env setup — stub it out.
+vi.mock("@/lib/flags", () => {
+ function stub() {
+ return Promise.resolve(false);
+ }
+ return {
+ aiChat: stub,
+ coachingCanvas: stub,
+ dataLabeling: stub,
+ faceitScouting: stub,
+ mapComparison: stub,
+ newLandingPage: stub,
+ overviewCard: stub,
+ positionalData: stub,
+ queryBuilder: stub,
+ scoutingTool: stub,
+ simulationTool: stub,
+ tempoChart: stub,
+ tournament: stub,
+ ultimateImpactTool: stub,
+ };
+});
+
+describe("getFlag", () => {
+ beforeEach(() => requestHeaders.clear());
+
+ it("decodes the precomputed value from the request header", async () => {
+ const { getFlag } = await import("@/lib/flags-helpers");
+ const code = await serialize(testGroup, [true, false]);
+ requestHeaders.set("x-flags-code", code);
+ await expect(getFlag(flagA)).resolves.toBe(true);
+ await expect(getFlag(flagB)).resolves.toBe(false);
+ });
+
+ it("falls back to false when the header is missing", async () => {
+ const { getFlag } = await import("@/lib/flags-helpers");
+ await expect(getFlag(flagA)).resolves.toBe(false);
+ });
+});
diff --git a/apps/web/test/win-probability/artifact-store.test.ts b/apps/web/test/win-probability/artifact-store.test.ts
index f8f33bee6..ab1b68e91 100644
--- a/apps/web/test/win-probability/artifact-store.test.ts
+++ b/apps/web/test/win-probability/artifact-store.test.ts
@@ -1,6 +1,6 @@
import { featureHash } from "@/lib/win-probability/features";
import type { ModelArtifact } from "@/lib/win-probability/model";
-import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { beforeEach, describe, expect, test, vi } from "vitest";
const download = vi.fn();
const upload = vi.fn();
@@ -13,9 +13,16 @@ vi.mock("@/lib/r2", () => ({
vi.mock("@/lib/logger", () => ({
Logger: { warn: vi.fn(), info: vi.fn(), error: vi.fn() },
}));
+// `loadLatestArtifact` is now a `use cache` function; caching + TTL are Next's
+// responsibility (governed by `cacheLife`), not a hand-rolled module cache.
+// Outside the Next runtime these are no-ops so we can exercise the fetch logic.
+vi.mock("next/cache", () => ({
+ cacheLife: vi.fn(),
+ cacheTag: vi.fn(),
+ revalidateTag: vi.fn(),
+}));
import {
- __resetArtifactCacheForTests,
loadLatestArtifact,
publishArtifact,
} from "@/lib/win-probability/artifact-store";
@@ -37,15 +44,9 @@ function artifact(overrides: Partial<ModelArtifact> = {}): ModelArtifact {
}
beforeEach(() => {
- vi.useFakeTimers();
download.mockReset();
upload.mockReset();
upload.mockResolvedValue({ key: "x" });
- __resetArtifactCacheForTests();
-});
-
-afterEach(() => {
- vi.useRealTimers();
});
function stubDownloads(pointerVersion: number, model: ModelArtifact) {
@@ -65,25 +66,17 @@ function stubDownloads(pointerVersion: number, model: ModelArtifact) {
}
describe("loadLatestArtifact", () => {
- test("loads via the pointer and caches within the TTL", async () => {
+ test("resolves the live model via the pointer", async () => {
stubDownloads(2, artifact());
- const first = await loadLatestArtifact();
- expect(first?.modelVersion).toBe(2);
- expect(download).toHaveBeenCalledTimes(2); // pointer + model
-
- await loadLatestArtifact();
- expect(download).toHaveBeenCalledTimes(2); // cached
-
- vi.advanceTimersByTime(61 * 60 * 1000);
- await loadLatestArtifact();
- expect(download).toHaveBeenCalledTimes(4); // TTL expired → refetched
+ const result = await loadLatestArtifact();
+ expect(result?.modelVersion).toBe(2);
+ expect(download).toHaveBeenCalledWith("wp-models/latest.json");
+ expect(download).toHaveBeenCalledWith("wp-models/model-v2.json");
});
- test("returns null on download failure without throwing, and caches the failure", async () => {
+ test("returns null on download failure without throwing", async () => {
download.mockRejectedValue(new Error("boom"));
expect(await loadLatestArtifact()).toBeNull();
- expect(await loadLatestArtifact()).toBeNull();
- expect(download).toHaveBeenCalledTimes(1); // one attempt per TTL window
});
test("returns null on feature hash mismatch", async () => {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb575e691..231c080ca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -199,7 +199,7 @@ importers:
version: 0.2.2(@axiomhq/js@1.7.0)
'@axiomhq/nextjs':
specifier: ^0.2.2
- version: 0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
+ version: 0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
'@axiomhq/react':
specifier: ^0.2.2
version: 0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -223,7 +223,7 @@ importers:
version: 0.63.0(@effect/platform@0.96.0(effect@3.21.4))(@opentelemetry/api@1.9.1)(@opentelemetry/resources@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-logs@0.219.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-metrics@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-base@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-node@2.8.0(@opentelemetry/api@1.9.1))(@opentelemetry/sdk-trace-web@2.6.0(@opentelemetry/api@1.9.1))(@opentelemetry/semantic-conventions@1.41.1)(effect@3.21.4)
'@flags-sdk/vercel':
specifier: ^1.0.1
- version: 1.4.2(@aws-sdk/credential-provider-web-identity@3.972.55)(flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
+ version: 1.4.2(@aws-sdk/credential-provider-web-identity@3.972.55)(flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
'@floating-ui/react':
specifier: ^0.27.16
version: 0.27.19(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -238,7 +238,7 @@ importers:
version: 5.4.0(react-hook-form@7.80.0(react@19.2.3))
'@next/third-parties':
specifier: ^16.1.1
- version: 16.2.9(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 16.2.9(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
'@opentelemetry/api':
specifier: ^1.9.1
version: 1.9.1
@@ -418,16 +418,16 @@ importers:
version: 1.38.0
'@vercel/analytics':
specifier: ^2.0.1
- version: 2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
'@vercel/blob':
specifier: ^2.4.1
version: 2.4.1
'@vercel/edge-config':
specifier: ^1.4.0
- version: 1.4.3(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
+ version: 1.4.3(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
'@vercel/flags-core':
specifier: ^1.0.1
- version: 1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
+ version: 1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
'@vercel/functions':
specifier: ^3.1.0
version: 3.7.3(@aws-sdk/credential-provider-web-identity@3.972.55)(ws@8.21.0)
@@ -436,10 +436,10 @@ importers:
version: 3.0.0
'@vercel/speed-insights':
specifier: ^1.2.0
- version: 1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
'@vercel/toolbar':
specifier: ^0.2.6
- version: 0.2.6(@vercel/analytics@2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
+ version: 0.2.6(@vercel/analytics@2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
'@xstate/store':
specifier: ^3.17.1
version: 3.17.5(react@19.2.3)
@@ -457,7 +457,7 @@ importers:
version: 1.0.0
better-auth:
specifier: ^1.6.20
- version: 1.6.20(@opentelemetry/api@1.9.1)(@prisma/client@7.8.0(@typescript/typescript6@6.0.1)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)))(mysql2@3.15.3)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(pg@8.22.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vitest@3.2.6(@types/debug@4.1.13)(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
+ version: 1.6.20(@opentelemetry/api@1.9.1)(@prisma/client@7.8.0(@typescript/typescript6@6.0.1)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)))(mysql2@3.15.3)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(pg@8.22.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vitest@3.2.6(@types/debug@4.1.13)(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
cheerio:
specifier: ^1.2.0
version: 1.2.0
@@ -484,7 +484,7 @@ importers:
version: 8.6.0(react@19.2.3)
flags:
specifier: ^4.0.3
- version: 4.2.0(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+ version: 4.2.0(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
framer-motion:
specifier: ^12.23.13
version: 12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -493,7 +493,7 @@ importers:
version: 7.4.2
geist:
specifier: ^1.5.1
- version: 1.7.2(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
+ version: 1.7.2(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))
input-otp:
specifier: ^1.4.2
version: 1.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -513,26 +513,26 @@ importers:
specifier: ^5.1.5
version: 5.1.16
next:
- specifier: 16.2.9
- version: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ specifier: 16.3.0-preview.5
+ version: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
next-axiom:
specifier: ^1.9.2
- version: 1.10.0(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 1.10.0(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
next-intl:
specifier: ^4.9.2
- version: 4.13.0(@swc/helpers@0.5.17)(@typescript/typescript6@6.0.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 4.13.0(@swc/helpers@0.5.17)(@typescript/typescript6@6.0.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
next-seo:
specifier: ^7.2.0
- version: 7.2.0(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 7.2.0(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
next-themes:
specifier: ^0.4.6
version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
nextstepjs:
specifier: ^2.1.2
- version: 2.2.0(motion@12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+ version: 2.2.0(motion@12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
nuqs:
specifier: ^2.8.9
- version: 2.8.9(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ version: 2.8.9(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
pg:
specifier: ^8.21.0
version: 8.22.0
@@ -1877,8 +1877,8 @@ packages:
'@next/env@16.2.6':
resolution: {integrity: sha512-gd8HoHN4ufj73WmR3JmVolrpJR47ILK6LouP5xElPglaVxir6e1a7VzvTvDWkOoPXT9rkkTzyCxBu4yeZfZwcw==}
- '@next/env@16.2.9':
- resolution: {integrity: sha512-ki5VxxXfzD/9TDe13wyeTKIjQTAwBVpnr8KhRDUr8ltMUq1/NBpWNT5tiPoxiGl+PHM4X2ahSOiPk6iAimIzPg==}
+ '@next/env@16.3.0-preview.5':
+ resolution: {integrity: sha512-XqdVR0utAWMsVc1OIyO48D32vrdmC4/uAgI3Ds088YlOO4vfGKXXVyvkGFkOZkOK0xg7bNYNfJAarX4A0tYqGg==}
'@next/swc-darwin-arm64@16.2.6':
resolution: {integrity: sha512-ZJGkkcNfYgrrMkqOdZ7zoLa1TOy0qpcMfk/z4Mh/FKUz40gVO+HNQWqmLxf67Z5WB64DRp0dhEbyHfel+6sJUg==}
@@ -1886,8 +1886,8 @@ packages:
cpu: [arm64]
os: [darwin]
- '@next/swc-darwin-arm64@16.2.9':
- resolution: {integrity: sha512-HkfxNYUCmcct0Xsqib5KxqMSHV4AHJq857BNRchyBDs4YS19aHzVfn1kDuBYKqLLQBjXgnkIsjV2Kd4d2wzYhw==}
+ '@next/swc-darwin-arm64@16.3.0-preview.5':
+ resolution: {integrity: sha512-PPWAJGoIkzVpz5hOD9V/qGNdkBuWj3QXhjQU8BQ1FXlMy6xsy4+aD/3UoasKy/HYInW4h1LqdQtDhiQkLYrrMA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -1898,8 +1898,8 @@ packages:
cpu: [x64]
os: [darwin]
- '@next/swc-darwin-x64@16.2.9':
- resolution: {integrity: sha512-7IAtK4MeybpqRV9GRABWEhJ62mOS+rzWOzOTFie4cSEtm12xsoOMJRcECoZx3FHPzFAqN/IJtHqWAFOLfl152w==}
+ '@next/swc-darwin-x64@16.3.0-preview.5':
+ resolution: {integrity: sha512-UPN/RS1H+kr9fgJrbFoH7bs1b9q2/G5cFe+uUf0nP4Hlgfl8NzfTBHEJKTfLAGqi1Qemwuyd29pvRy2vwEjL5g==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -1910,8 +1910,8 @@ packages:
cpu: [arm64]
os: [linux]
- '@next/swc-linux-arm64-gnu@16.2.9':
- resolution: {integrity: sha512-hBD75iWpUtkL9SmQmcRhmLomn9jgkPzCEkbOcLgHymPEKzv+6ONy13RRiIEz/iEObjkS2Jlb5gYS2XGoS3X4rw==}
+ '@next/swc-linux-arm64-gnu@16.3.0-preview.5':
+ resolution: {integrity: sha512-kh+bKgk9ZIlmxMkEPnQZXtKc7/AyUyIS9jXgbKt4hWyxXEEZVDmXhiU2bh1zZpthMr/l09wz9z6CvfXtCWUJBA==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -1922,8 +1922,8 @@ packages:
cpu: [arm64]
os: [linux]
- '@next/swc-linux-arm64-musl@16.2.9':
- resolution: {integrity: sha512-qZTI3pf9SGc/obr8NkQAekBxmp1QK+kVm+VAf3BALLfFAj+1kUhkTxmrWpVos9R/UYIA8AWX2p6cGI5WdwzVUA==}
+ '@next/swc-linux-arm64-musl@16.3.0-preview.5':
+ resolution: {integrity: sha512-m09/acXFGhlp+U6m7Wn0AqsmLqars3qI9eBXDpPJm4h/XVS9HPHNzWGy2BI7F1iLoFX59Uy0tcau9ey7JVud3w==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -1934,8 +1934,8 @@ packages:
cpu: [x64]
os: [linux]
- '@next/swc-linux-x64-gnu@16.2.9':
- resolution: {integrity: sha512-xm0HfRNX+UkH4R3c18ynswjj5o5uEj/7iI9p9omdtTSIsRCzQqkGMA+10nzJ4EHnYC3as65IMhbbl5fWRUWHYg==}
+ '@next/swc-linux-x64-gnu@16.3.0-preview.5':
+ resolution: {integrity: sha512-/EBiqRjLZJWJo6Keq9upJfhrP+tNpePy1beBfOL+tUn68inwNiJEjx+0Lgve99Zur8kSk9TgSmDmwgQxX4iM+g==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -1946,8 +1946,8 @@ packages:
cpu: [x64]
os: [linux]
- '@next/swc-linux-x64-musl@16.2.9':
- resolution: {integrity: sha512-QumimHkGEG6vM3PfEDWKyKen03NcqLOkeKB1EfcPe7VxzmEiCa4jNnMyBn/US5zcd/VE1CI+O8Ovb3lfjVHfGw==}
+ '@next/swc-linux-x64-musl@16.3.0-preview.5':
+ resolution: {integrity: sha512-lUCiPFoecSGkM8aeY6UAgQDiJjR3DhPsI036mznlHFg89ZLoeRdo521N4nmk6EpbPpNzRujgiboBkbuyexDgCg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -1958,8 +1958,8 @@ packages:
cpu: [arm64]
os: [win32]
- '@next/swc-win32-arm64-msvc@16.2.9':
- resolution: {integrity: sha512-hzQpKZvw8rAwI6A2uQh6SacCSvNAXaIkPNsWwzqqfRiIMiXMfH936skDhz1OO6KpvdKkJrgHHtqQOq5PIXOvdQ==}
+ '@next/swc-win32-arm64-msvc@16.3.0-preview.5':
+ resolution: {integrity: sha512-Nr4e3dRB86gElIgysL/L7dr9tuRLIq3looK8hLxnYDLUvLza2Tu/7Ik/X6DSRGejIrbZsYjnH3S4xYeAAf7Prw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -1970,8 +1970,8 @@ packages:
cpu: [x64]
os: [win32]
- '@next/swc-win32-x64-msvc@16.2.9':
- resolution: {integrity: sha512-qr2VL3Ce5QrwgO2yh1ujSBawrimjVKX8FGF/cOynmdYKJY0BdHpGVNIRK1tqONB10Vkm25Ub1BD2bkjWs4+96w==}
+ '@next/swc-win32-x64-msvc@16.3.0-preview.5':
+ resolution: {integrity: sha512-Svg+VCRUbyNsBuh96hN+1ael8dNXqVQVZqOe9tqFlF4mUzIk5CQFcn5VsZPrz8GNP9HCxJfrfy3PM0cXoSXliw==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -7557,8 +7557,8 @@ packages:
sass:
optional: true
- next@16.2.9:
- resolution: {integrity: sha512-MEOJiq/UvuezAdqVSceHbqDgZt1kDw2tpGVOlsdIoJsQdbN2JY2hpVG4xnXGkbdJUOEWhnRfiu/O4Hpc9Juwww==}
+ next@16.3.0-preview.5:
+ resolution: {integrity: sha512-I5rVC4VcvAL1FPr6AY5WEQUSe6o1Bt0Oa/qH5hfPhci4FRMCPeAQ95tgxFOgJDk2wME1K009k0bjS17nQ0Bq1w==}
engines: {node: '>=20.9.0'}
hasBin: true
peerDependencies:
@@ -7854,6 +7854,10 @@ packages:
points-on-path@0.2.1:
resolution: {integrity: sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==}
+ postcss@8.5.10:
+ resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
+ engines: {node: ^10 || ^12 || >=14}
+
postcss@8.5.15:
resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
engines: {node: ^10 || ^12 || >=14}
@@ -9553,10 +9557,10 @@ snapshots:
optionalDependencies:
'@axiomhq/js': 1.7.0
- '@axiomhq/nextjs@0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))':
+ '@axiomhq/nextjs@0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))':
dependencies:
'@axiomhq/logging': 0.2.2(@axiomhq/js@1.7.0)
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
'@axiomhq/react@0.2.2(@axiomhq/logging@0.2.2(@axiomhq/js@1.7.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
dependencies:
@@ -10091,10 +10095,10 @@ snapshots:
'@eslint/core': 1.2.1
levn: 0.4.1
- '@flags-sdk/vercel@1.4.2(@aws-sdk/credential-provider-web-identity@3.972.55)(flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)':
+ '@flags-sdk/vercel@1.4.2(@aws-sdk/credential-provider-web-identity@3.972.55)(flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)':
dependencies:
- '@vercel/flags-core': 1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
- flags: 4.2.0(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+ '@vercel/flags-core': 1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)
+ flags: 4.2.0(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
transitivePeerDependencies:
- '@aws-sdk/credential-provider-web-identity'
- '@openfeature/server-sdk'
@@ -10407,59 +10411,59 @@ snapshots:
'@next/env@16.2.6': {}
- '@next/env@16.2.9': {}
+ '@next/env@16.3.0-preview.5': {}
'@next/swc-darwin-arm64@16.2.6':
optional: true
- '@next/swc-darwin-arm64@16.2.9':
+ '@next/swc-darwin-arm64@16.3.0-preview.5':
optional: true
'@next/swc-darwin-x64@16.2.6':
optional: true
- '@next/swc-darwin-x64@16.2.9':
+ '@next/swc-darwin-x64@16.3.0-preview.5':
optional: true
'@next/swc-linux-arm64-gnu@16.2.6':
optional: true
- '@next/swc-linux-arm64-gnu@16.2.9':
+ '@next/swc-linux-arm64-gnu@16.3.0-preview.5':
optional: true
'@next/swc-linux-arm64-musl@16.2.6':
optional: true
- '@next/swc-linux-arm64-musl@16.2.9':
+ '@next/swc-linux-arm64-musl@16.3.0-preview.5':
optional: true
'@next/swc-linux-x64-gnu@16.2.6':
optional: true
- '@next/swc-linux-x64-gnu@16.2.9':
+ '@next/swc-linux-x64-gnu@16.3.0-preview.5':
optional: true
'@next/swc-linux-x64-musl@16.2.6':
optional: true
- '@next/swc-linux-x64-musl@16.2.9':
+ '@next/swc-linux-x64-musl@16.3.0-preview.5':
optional: true
'@next/swc-win32-arm64-msvc@16.2.6':
optional: true
- '@next/swc-win32-arm64-msvc@16.2.9':
+ '@next/swc-win32-arm64-msvc@16.3.0-preview.5':
optional: true
'@next/swc-win32-x64-msvc@16.2.6':
optional: true
- '@next/swc-win32-x64-msvc@16.2.9':
+ '@next/swc-win32-x64-msvc@16.3.0-preview.5':
optional: true
- '@next/third-parties@16.2.9(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
+ '@next/third-parties@16.2.9(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
dependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
third-party-capital: 1.0.20
@@ -13711,9 +13715,9 @@ snapshots:
'@use-gesture/core': 10.3.1
react: 19.2.7
- '@vercel/analytics@2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
+ '@vercel/analytics@2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
'@vercel/blob@2.4.1':
@@ -13743,21 +13747,21 @@ snapshots:
'@opentelemetry/api': 1.9.1
next: 16.2.6(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
- '@vercel/edge-config@1.4.3(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))':
+ '@vercel/edge-config@1.4.3(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))':
dependencies:
'@vercel/edge-config-fs': 0.1.0
optionalDependencies:
'@opentelemetry/api': 1.9.1
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
- '@vercel/flags-core@1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)':
+ '@vercel/flags-core@1.5.1(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(ws@8.21.0)':
dependencies:
'@vercel/functions': 3.7.3(@aws-sdk/credential-provider-web-identity@3.972.55)(ws@8.21.0)
'@vercel/oidc': 3.5.0
jose: 5.2.1
js-xxhash: 4.0.0
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
transitivePeerDependencies:
- '@aws-sdk/credential-provider-web-identity'
- ws
@@ -13779,7 +13783,7 @@ snapshots:
dependencies:
'@upstash/redis': 1.38.0
- '@vercel/microfrontends@2.3.6(@vercel/analytics@2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))':
+ '@vercel/microfrontends@2.3.6(@vercel/analytics@2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))':
dependencies:
'@next/env': 16.0.10
'@types/md5': 2.3.6
@@ -13794,9 +13798,9 @@ snapshots:
path-to-regexp: 6.3.0
semver: 7.8.5
optionalDependencies:
- '@vercel/analytics': 2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
- '@vercel/speed-insights': 1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ '@vercel/analytics': 2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ '@vercel/speed-insights': 1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0)
@@ -13818,22 +13822,22 @@ snapshots:
'@vercel/cli-exec': 1.0.0
jose: 5.10.0
- '@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
+ '@vercel/speed-insights@1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3)':
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
- '@vercel/toolbar@0.2.6(@vercel/analytics@2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))':
+ '@vercel/toolbar@0.2.6(@vercel/analytics@2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))':
dependencies:
'@tinyhttp/app': 1.3.0
- '@vercel/microfrontends': 2.3.6(@vercel/analytics@2.0.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
+ '@vercel/microfrontends': 2.3.6(@vercel/analytics@2.0.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(@vercel/speed-insights@1.3.1(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vite@7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0))
chokidar: 3.6.0
execa: 5.1.1
find-up: 5.0.0
get-port: 5.1.1
strip-ansi: 6.0.1
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
vite: 7.3.6(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0)
transitivePeerDependencies:
@@ -14031,7 +14035,7 @@ snapshots:
baseline-browser-mapping@2.10.38: {}
- better-auth@1.6.20(@opentelemetry/api@1.9.1)(@prisma/client@7.8.0(@typescript/typescript6@6.0.1)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)))(mysql2@3.15.3)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(pg@8.22.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vitest@3.2.6(@types/debug@4.1.13)(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0)):
+ better-auth@1.6.20(@opentelemetry/api@1.9.1)(@prisma/client@7.8.0(@typescript/typescript6@6.0.1)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)))(mysql2@3.15.3)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(pg@8.22.0)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(vitest@3.2.6(@types/debug@4.1.13)(@types/node@20.19.43)(jiti@2.7.0)(lightningcss@1.32.0)(sass@1.101.0)(tsx@4.20.5)(yaml@2.9.0)):
dependencies:
'@better-auth/core': 1.6.20(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(@opentelemetry/api@1.9.1)(better-call@1.3.6(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.3.0)
'@better-auth/drizzle-adapter': 1.6.20(@better-auth/core@1.6.20(@better-auth/utils@0.4.2)(@better-fetch/fetch@1.3.1)(@opentelemetry/api@1.9.1)(better-call@1.3.6(zod@4.4.3))(jose@6.2.3)(kysely@0.29.2)(nanostores@1.3.0))(@better-auth/utils@0.4.2)
@@ -14053,7 +14057,7 @@ snapshots:
optionalDependencies:
'@prisma/client': 7.8.0(@typescript/typescript6@6.0.1)(prisma@7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))
mysql2: 3.15.3
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
pg: 8.22.0
prisma: 7.8.0(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(@typescript/typescript6@6.0.1)(magicast@0.5.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
react: 19.2.3
@@ -15024,13 +15028,13 @@ snapshots:
locate-path: 6.0.0
path-exists: 4.0.0
- flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+ flags@4.2.0(@opentelemetry/api@1.9.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
dependencies:
'@edge-runtime/cookies': 5.0.2
jose: 5.10.0
optionalDependencies:
'@opentelemetry/api': 1.9.1
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
@@ -15172,9 +15176,9 @@ snapshots:
fuse.js@7.4.2: {}
- geist@1.7.2(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)):
+ geist@1.7.2(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)):
dependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
generate-function@2.3.1:
dependencies:
@@ -16400,10 +16404,10 @@ snapshots:
negotiator@1.0.0: {}
- next-axiom@1.10.0(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
+ next-axiom@1.10.0(@aws-sdk/credential-provider-web-identity@3.972.55)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
dependencies:
'@vercel/functions': 2.2.13(@aws-sdk/credential-provider-web-identity@3.972.55)
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
use-deep-compare: 1.3.0(react@19.2.3)
whatwg-fetch: 3.6.20
@@ -16412,14 +16416,14 @@ snapshots:
next-intl-swc-plugin-extractor@4.13.0: {}
- next-intl@4.13.0(@swc/helpers@0.5.17)(@typescript/typescript6@6.0.1)(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
+ next-intl@4.13.0(@swc/helpers@0.5.17)(@typescript/typescript6@6.0.1)(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
dependencies:
'@formatjs/intl-localematcher': 0.8.10
'@parcel/watcher': 2.5.1
'@swc/core': 1.15.43(@swc/helpers@0.5.17)
icu-minify: 4.13.0
negotiator: 1.0.0
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
next-intl-swc-plugin-extractor: 4.13.0
po-parser: 2.1.1
react: 19.2.3
@@ -16434,9 +16438,9 @@ snapshots:
next: 16.2.6(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(sass@1.101.0)
react: 19.2.7
- next-seo@7.2.0(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
+ next-seo@7.2.0(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
dependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
react: 19.2.3
next-themes@0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
@@ -16503,25 +16507,25 @@ snapshots:
- '@babel/core'
- babel-plugin-macros
- next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0):
+ next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0):
dependencies:
- '@next/env': 16.2.9
+ '@next/env': 16.3.0-preview.5
'@swc/helpers': 0.5.15
baseline-browser-mapping: 2.10.38
caniuse-lite: 1.0.30001799
- postcss: 8.5.15
+ postcss: 8.5.10
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
styled-jsx: 5.1.6(@babel/core@7.29.7)(react@19.2.3)
optionalDependencies:
- '@next/swc-darwin-arm64': 16.2.9
- '@next/swc-darwin-x64': 16.2.9
- '@next/swc-linux-arm64-gnu': 16.2.9
- '@next/swc-linux-arm64-musl': 16.2.9
- '@next/swc-linux-x64-gnu': 16.2.9
- '@next/swc-linux-x64-musl': 16.2.9
- '@next/swc-win32-arm64-msvc': 16.2.9
- '@next/swc-win32-x64-msvc': 16.2.9
+ '@next/swc-darwin-arm64': 16.3.0-preview.5
+ '@next/swc-darwin-x64': 16.3.0-preview.5
+ '@next/swc-linux-arm64-gnu': 16.3.0-preview.5
+ '@next/swc-linux-arm64-musl': 16.3.0-preview.5
+ '@next/swc-linux-x64-gnu': 16.3.0-preview.5
+ '@next/swc-linux-x64-musl': 16.3.0-preview.5
+ '@next/swc-win32-arm64-msvc': 16.3.0-preview.5
+ '@next/swc-win32-x64-msvc': 16.3.0-preview.5
'@opentelemetry/api': 1.9.1
babel-plugin-react-compiler: 1.0.0
sass: 1.101.0
@@ -16530,13 +16534,13 @@ snapshots:
- '@babel/core'
- babel-plugin-macros
- nextstepjs@2.2.0(motion@12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+ nextstepjs@2.2.0(motion@12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
dependencies:
motion: 12.42.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
react: 19.2.3
react-dom: 19.2.3(react@19.2.3)
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
node-addon-api@7.1.1: {}
@@ -16559,12 +16563,12 @@ snapshots:
dependencies:
boolbase: 1.0.0
- nuqs@2.8.9(next@16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
+ nuqs@2.8.9(next@16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0))(react@19.2.3):
dependencies:
'@standard-schema/spec': 1.0.0
react: 19.2.3
optionalDependencies:
- next: 16.2.9(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
+ next: 16.3.0-preview.5(@babel/core@7.29.7)(@opentelemetry/api@1.9.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(sass@1.101.0)
nypm@0.6.6:
dependencies:
@@ -16899,6 +16903,12 @@ snapshots:
path-data-parser: 0.1.0
points-on-curve: 0.2.0
+ postcss@8.5.10:
+ dependencies:
+ nanoid: 3.3.15
+ picocolors: 1.1.1
+ source-map-js: 1.2.1
+
postcss@8.5.15:
dependencies:
nanoid: 3.3.15