vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

perf(web): add dashboard hydration observability

Browse source
This commit is contained in:
vince 2026-06-20 14:58:25 +02:00
parent b6de67f081
commit 328f6e00bf
5 changed files with 339 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

39
apps/web/src/lib/client/dashboard-refresh.test.ts
View file

@ -2,7 +2,9 @@ import { describe, expect, test } from "vitest";
import {
attachDashboardRefreshLifecycle,
collectVisibleDashboardModelIds,
createDashboardPerformanceMarks,
createDashboardRefreshDelay,
dashboardPerformanceMarks,
createDashboardTileSnapshotStore,
createDashboardTileBackoff,
createDashboardRequestAborter,
@ -131,6 +133,8 @@ describe("dashboard refresh lifecycle", () => {
calls.push(item);
},
items: ["a", "b", "c"],
onAllItemsSettled: () => calls.push("all-settled"),
onVisibleItemsSettled: () => calls.push("visible-settled"),
signal: new AbortController().signal,
waitForIdle: async () => {
calls.push("idle");
@ -139,11 +143,18 @@ describe("dashboard refresh lifecycle", () => {
});
await waitFor(() => calls.includes("idle"));
expect(calls).toEqual(["b", "idle"]);
expect(calls).toEqual(["b", "visible-settled", "idle"]);
idleReleases.shift()?.();
await hydration;
expect(calls).toEqual(["b", "idle", "a", "c"]);
expect(calls).toEqual([
"b",
"visible-settled",
"idle",
"a",
"c",
"all-settled",
]);
});
test("splits visible hydration items while preserving document order", () => {
@ -247,6 +258,30 @@ describe("dashboard refresh lifecycle", () => {
expect(delay.nextDelayMs(1_000)).toBe(1_100);
});
test("marks dashboard performance milestones once per shell run", () => {
const marks: string[] = [];
const performanceMarks = createDashboardPerformanceMarks({
mark: (name) => marks.push(name),
});
performanceMarks.markShellLoad();
performanceMarks.markFirstTileReady();
performanceMarks.markFirstTileReady();
performanceMarks.markVisibleTilesReady();
performanceMarks.markAllTilesSettled();
performanceMarks.markShellLoad();
performanceMarks.markFirstTileReady();
expect(marks).toEqual([
dashboardPerformanceMarks.shellLoad,
dashboardPerformanceMarks.firstTileReady,
dashboardPerformanceMarks.visibleTilesReady,
dashboardPerformanceMarks.allTilesSettled,
dashboardPerformanceMarks.shellLoad,
dashboardPerformanceMarks.firstTileReady,
]);
});
test("backs off failed tile keys and resets after success", () => {
const backoff = createDashboardTileBackoff();