overview: one endpoint, live projections and a response cache (m36)

admin/src/routes.tsx

@@ -32,18 +32,15 @@ import {
 	groupsQuery,
 	healthQuery,
 	localRecordsQuery,
+	overviewQuery,
 	queriesInfiniteQuery,
 	queryDetailQuery,
 	rulesQuery,
 	settingsQuery,
-	statsClientsQuery,
-	statsQuery,
-	statsRoutesQuery,
-	statsTypesQuery,
-	timeseriesQuery,
 	upstreamsQuery,
 } from "@/lib/queries";
 import { DEFAULT_PERIOD, parsePeriod } from "@/features/overview/period";
+import { OverviewPending } from "@/features/overview/OverviewFrame";
 import {
 	validateGroupId,
 	validateProtectionSearch,
@@ -168,26 +165,28 @@ const overviewRoute = createRoute({
 	}),
 	loaderDeps: ({ search }): { period: Period } => ({ period: search.period ?? DEFAULT_PERIOD }),
 	/**
-	 * Started here, awaited nowhere. Every panel reads these with `useQuery` and
-	 * owns its own loading and error surface, so awaiting would trade that whole
-	 * contract for one blocking navigation: the page would sit on the slowest of
-	 * five requests and then appear complete, instead of the four that answered
-	 * rendering beside the one still in flight. The rejections are caught only to
-	 * keep them from going unhandled; the panels state them.
+	 * Started here, awaited nowhere. The page reads these with `useQuery` and owns
+	 * its own loading and error surface, so awaiting would trade that contract for
+	 * one blocking navigation: nothing at all until the request answered, rather
+	 * than the heading and the period picker while it is in flight. The rejections
+	 * are caught only to keep them from going unhandled; the page states them.
 	 */
 	loader: ({ context, deps }) => {
 		const start = (promise: Promise<unknown>) => void promise.catch(() => {});
 		start(context.queryClient.ensureQueryData(healthQuery()));
-		start(context.queryClient.ensureQueryData(statsQuery(deps.period)));
-		start(context.queryClient.ensureQueryData(timeseriesQuery(deps.period)));
-		start(context.queryClient.ensureQueryData(statsClientsQuery(deps.period)));
+		start(context.queryClient.ensureQueryData(overviewQuery(deps.period)));
 		// The registered names the client chart labels its series with. Started here
 		// so the lookup is not a second round trip after the page chunk lands.
 		start(context.queryClient.ensureQueryData(clientsQuery()));
-		start(context.queryClient.ensureQueryData(statsTypesQuery(deps.period)));
-		start(context.queryClient.ensureQueryData(statsRoutesQuery(deps.period)));
 	},
 	component: lazyRouteComponent(() => import("@/features/overview/OverviewPage")),
+	/**
+	 * The page's own loading surface, rendered while its chunk is still in flight.
+	 * The default pending component would put a second, differently-placed
+	 * "Loading…" before it, which reads as a stutter rather than one wait.
+	 * `OverviewFrame` is a separate module so this import leaves the charts lazy.
+	 */
+	pendingComponent: OverviewPending,
 });
 
 /**