mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 13:01:00 +00:00
Marc-André Bombeck
675c70eba8
`/` runs its reads server-side and hands them to TanStack through a HydrationBoundary, so the first HTML already carries real tiles. React threw that away on every cold load. The app shell hydrates first and its mount answers `/api/auth/me`; the dashboard sits below `loading.tsx`, hydrates later, and its first client render therefore read an account the server never had. That disagreed with the streamed HTML, React reported #418 and re-rendered the whole page. The prefetch paid for its queries and delivered none of its paint. The account payload is now withheld from the hydration render wherever it is only rendered. `useAccountOnceMounted()` answers null until the component has mounted, which is what the server rendered, and hands the payload over on the next render. The dashboard page, the caregiver card, the getting-started checklist, the achievements tile and the unit labels read it that way. `useAuth` itself still reads the cache, because the document vault redirects off `user.modules` and a first render claiming "no account" bounces it to `/`. Two tiles disagreed without any account involved. A query reports `isLoading` true on the client's first render and false on the server, so both now gate on whether the cell holds an answer. Nothing in CI ran the shipped configuration: the suite's server turns the prefetch off so route mocks keep governing the dashboard. A second server runs it on, and one spec asserts that no hydration error is reported and that the tile node the server streamed is still the node in the DOM once the page settles. Measured over nine cold loads with the CPU throttled 4x: seven bailouts before and none after, median LCP 869 ms before and 145 ms after. FCP and the time to the first tile in the DOM are unchanged, because the streamed paint was never the problem. Keeping it was.
99 lines
4.0 KiB
TypeScript
99 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* v1.32.26 — the single client choke point for metric/imperial display.
|
|
*
|
|
* Reads the user's `unitPreference` from the cached `/api/auth/me` payload
|
|
* (`useAuth`, keyed under `queryKeys.authMe()`, invalidated by the settings
|
|
* select on change — no extra fetch) and hands back preference-bound sugar
|
|
* over `getDisplayTransform`. Every render surface that shows a measurement
|
|
* value or unit for a type in `TRANSFORMS` resolves through this hook, so the
|
|
* preference is honoured in exactly one place and no surface hardcodes a unit
|
|
* string or scale.
|
|
*
|
|
* The underlying `display-transform.ts` module stays pure and server-safe (it
|
|
* is imported by an API route); only this thin wrapper is a client hook.
|
|
*/
|
|
import { useMemo } from "react";
|
|
|
|
import { useAccountOnceMounted, useAuth } from "@/hooks/use-auth";
|
|
import {
|
|
applyDisplayTransform,
|
|
applyDisplayTransformDelta,
|
|
getDisplayTransform,
|
|
invertDisplayTransform,
|
|
hasDisplayTransform,
|
|
type DisplayTransform,
|
|
type UnitPreference,
|
|
} from "@/lib/measurements/display-transform";
|
|
|
|
export interface UnitDisplay {
|
|
/** Resolved preference ("metric" by default / on a stale payload). */
|
|
preference: UnitPreference;
|
|
/** The full transform for a type under the current preference. */
|
|
transformFor: (type: string) => DisplayTransform;
|
|
/** Convert a raw canonical ABSOLUTE value to the display value. */
|
|
toDisplay: (type: string, rawValue: number) => number;
|
|
/** Convert a display ABSOLUTE value back to canonical (entry boundary). */
|
|
fromDisplay: (type: string, displayValue: number) => number;
|
|
/** Convert a DELTA / slope / SD — factor only, never the affine offset. */
|
|
toDisplayDelta: (type: string, deltaValue: number) => number;
|
|
/** The display unit symbol for a type under the current preference. */
|
|
unitFor: (type: string) => string;
|
|
/** Display decimal places for a type under the current preference. */
|
|
decimalsFor: (type: string) => number;
|
|
/** True when a type actually rescales under preference (vs identity). */
|
|
isTransformed: (type: string) => boolean;
|
|
}
|
|
|
|
export function useUnitDisplay(): UnitDisplay {
|
|
const { user } = useAuth();
|
|
return useDisplayForPreference(user?.unitPreference);
|
|
}
|
|
|
|
/**
|
|
* The same sugar, with the preference withheld from the SSR pass and the
|
|
* hydration render.
|
|
*
|
|
* A surface that paints inside a streamed page boundary hydrates after the app
|
|
* shell has already answered `/api/auth/me`, so an imperial account renders
|
|
* "lb" on the hydration render where the server — which has no account payload
|
|
* at all — rendered "kg". React calls that a mismatch and discards the streamed
|
|
* tree; on `/` that is the whole RSC prefetch. Reading the preference one
|
|
* render later costs nothing the server had anyway. See
|
|
* `useAccountOnceMounted`.
|
|
*
|
|
* Kept separate from `useUnitDisplay` rather than folded into it: most callers
|
|
* render only after their own data lands, well past mount, and would pay a
|
|
* needless indirection for a hazard they do not have.
|
|
*/
|
|
export function useUnitDisplayOnceMounted(): UnitDisplay {
|
|
const user = useAccountOnceMounted();
|
|
return useDisplayForPreference(user?.unitPreference);
|
|
}
|
|
|
|
function useDisplayForPreference(
|
|
rawPreference: string | null | undefined,
|
|
): UnitDisplay {
|
|
const preference: UnitPreference =
|
|
rawPreference === "imperial" ? "imperial" : "metric";
|
|
|
|
return useMemo<UnitDisplay>(() => {
|
|
const transformFor = (type: string) =>
|
|
getDisplayTransform(type, preference);
|
|
return {
|
|
preference,
|
|
transformFor,
|
|
toDisplay: (type, rawValue) =>
|
|
applyDisplayTransform(rawValue, transformFor(type)),
|
|
fromDisplay: (type, displayValue) =>
|
|
invertDisplayTransform(displayValue, transformFor(type)),
|
|
toDisplayDelta: (type, deltaValue) =>
|
|
applyDisplayTransformDelta(deltaValue, transformFor(type)),
|
|
unitFor: (type) => transformFor(type).displayUnit,
|
|
decimalsFor: (type) => transformFor(type).decimals,
|
|
isTransformed: (type) => hasDisplayTransform(type),
|
|
};
|
|
}, [preference]);
|
|
}
|