mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-10 21:32:18 +00:00
Marc-André Bombeck
cb883e1470
- Resurface the selected hero score rings on the Today hero: the Settings picker's selection and drag order render again as a calm ring cluster beneath the health ring, each ring in its wellness hue, flat-painted, and linking to its existing detail surface (score anatomy pages, medications). The health ring now opens the Insights overview like its cluster siblings. Empty selection keeps the hero exactly as before. - Per-metric identity accents on the daily rail via the existing --tile-* hue vocabulary: a soft inset edge (stress for tension windows, strain for ECG pointers, primary for dose and coach cards); the same mark ties the ECG cross-link and the intraday pulse card shell to their rail siblings. Utility items (sync, preventive care) stay accent-less. - Quiet "reached" treatment for the milestone card: a soft success halo over the theme card plus a one-shot spring reveal on --ring-spring, with its reduced-motion fallback beside the keyframes. - The Today hero carries the one sanctioned atmosphere wash (a faint primary mix over the card in the wellness-tile pattern); the loading skeleton shares it so the swap changes content, never the surface. - Skeleton primitive upgraded from the whole-block pulse to a single soft shimmer sweep, reduced-motion guarded in globals.css; dependent test assertions repointed. - Ring link / dose-tally aria strings restored in all six locales.
35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import * as React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* Shimmering placeholder used while data is loading. Wrap text-equivalent
|
|
* shapes so the page does not jump when real content arrives.
|
|
*
|
|
* v1.29.0 — the whole-block `animate-pulse` throb is upgraded to a single
|
|
* soft `skeleton-shimmer` sweep (a `--foreground`-mix gradient gliding
|
|
* across the muted base, defined in `globals.css`), so every loading
|
|
* surface shares one calm loading language. Honours
|
|
* `prefers-reduced-motion` via the shimmer's own CSS guard, which
|
|
* collapses it to the static muted block.
|
|
*
|
|
* Pattern: render the same layout the loaded UI will render, with each
|
|
* dynamic block replaced by a `<Skeleton className="h-X w-Y" />`.
|
|
*/
|
|
function Skeleton({
|
|
className,
|
|
...props
|
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
|
return (
|
|
<div
|
|
data-slot="skeleton"
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
className={cn("bg-muted/60 skeleton-shimmer rounded-md", className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Skeleton };
|