Files
temetro/frontend/components/charts/chart-loading-label.tsx
T
Khalid Abdi 321a6298a4 frontend: pharmacy inventory, lab add-result & analysis charts
- Pharmacy: the sidebar entry now expands into Pharmacy + a new Inventory page
  (searchable medication stock with derived in-stock/low/out availability,
  backed by /api/inventory). Fix the dispensing-queue "Expiring" badge so it
  only flags courses ending within the next 7 days, not ones already elapsed.
- Lab "Add analysis result": the patient picker no longer lists patients until
  you type and supports arrow-key + Enter selection; the test field offers a
  catalog of common analyses with an Advanced option (custom analysis + ref
  range); submitted results now show immediately in a Recent results feed.
- Analysis: add a Live panel (real-time line chart) and replace the flat trend
  sparklines with bklit-ui area + bar charts (installed from the @bklit shadcn
  registry; chart CSS variables wired into the theme for light and dark).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-12 19:22:07 +03:00

57 lines
1.4 KiB
TypeScript

"use client";
import { motion } from "motion/react";
import { cn } from "@/lib/utils";
import { ShimmeringText } from "@/components/shimmering-text";
import {
LINE_LOADING_PULSE_EASE,
LOADING_LABEL_EXIT_S,
LOADING_LABEL_EXIT_Y_PX,
} from "./line-loading-timing";
export interface ChartLoadingLabelProps {
/** Label shown centered over the chart. */
text?: string;
className?: string;
/** Animate down, fade, and blur during loading → ready handoff. */
exiting?: boolean;
}
export function ChartLoadingLabel({
text = "Loading",
className,
exiting = false,
}: ChartLoadingLabelProps) {
if (!text.trim()) {
return null;
}
return (
<motion.div
animate={{
y: exiting ? LOADING_LABEL_EXIT_Y_PX : 0,
opacity: exiting ? 0 : 1,
filter: exiting ? "blur(2px)" : "blur(0px)",
}}
aria-live="polite"
className={cn(
"pointer-events-none absolute inset-0 flex items-center justify-center",
className
)}
initial={false}
role="status"
transition={{
duration: LOADING_LABEL_EXIT_S,
ease: [...LINE_LOADING_PULSE_EASE],
}}
>
<ShimmeringText
className="font-medium text-sm tracking-wide [--color:var(--muted-foreground)] [--shimmering-color:var(--foreground)]"
text={text}
/>
</motion.div>
);
}
export default ChartLoadingLabel;