51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T18c9,"use client"; import { useEffect, useMemo, useRef, useState, type ComponentProps, type ReactNode, type Ref, } from "react"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } function prefersReducedMotion() { return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true; } const easeOut = (t: number) => 1 - (1 - t) ** 3; // While `ready` is false the count creeps toward this and waits. const WAITING_CEILING = 90; type PreloaderPhase = "loading" | "done" | "gone"; interface PreloaderProps extends Omit, "children"> { /** The shortest time it stays on screen, in ms. */ duration?: number; /** Whether whatever it waits for has arrived. While false, the count stops short of 90. */ ready?: boolean; /** Called once, when the overlay has faded out and unmounted. */ onComplete?: () => void; /** Accessible name of the progress bar. */ label?: string; /** How long the fade out takes, in ms. */ exitDuration?: number; /** What it shows: anything, or a function of the progress from 0 to 100. */ children?: ReactNode | ((progress: number) => ReactNode); } /** * A full-screen cover for the first load: it counts from 0 to 100 over at * least `duration`, waits at 90 while `ready` is false, then fades out and * unmounts itself. The count is written to `--preloader-progress` (0 to 1) * once per frame for bars like `PreloaderBar`, and handed to `children` as * a whole number when it is a function. * * It is a `progressbar` with a name and a value. Keep the page behind it * `inert` until `onComplete`, so keyboard and screen reader users cannot * wander into content they cannot see. With `prefers-reduced-motion` it * skips the count and the fade and leaves as soon as `ready` is true. * Without JavaScript it never covers the page. * * @example * const [loaded, setLoaded] = useState(false); * setLoaded(true)}> * {(progress) => ( *

* {progress}% * *

* )} * *

…

*/ function Preloader({ duration = 1500, ready = true, onComplete, label = "Loading", exitDuration = 500, children, className, style, ref, ...props }: PreloaderProps) { const root = useRef(null); const mergedRef = useMemo(() => mergeRefs(ref, root), [ref]); const [progress, setProgress] = useState(0); const [phase, setPhase] = useState("loading"); const value = useRef(0); const started = useRef(null); const onCompleteRef = useRef(onComplete); useEffect(() => { onCompleteRef.current = onComplete; }); // Count once per frame, straight into a CSS variable; React only hears whole numbers. useEffect(() => { if (phase !== "loading") return; const node = root.current; let frame = 0; const write = (next: number) => { value.current = next; node?.style.setProperty("--preloader-progress", String(next / 100)); setProgress(Math.round(next)); }; if (prefersReducedMotion()) { if (!ready) return; frame = requestAnimationFrame(() => { write(100); setPhase("done"); }); return () => cancelAnimationFrame(frame); } const span = Math.max(duration, 1); let last = 0; const tick = (now: number) => { started.current ??= now; const elapsed = now - started.current; const step = last ? now - last : 16; last = now; const t = Math.min(elapsed / span, 1); const goal = ready ? 100 * easeOut(t) : WAITING_CEILING * (1 - Math.exp((-3 * elapsed) / span)); // Glide toward the goal and never back. const next = Math.max( value.current, value.current + (goal - value.current) * Math.min(1, step / 80) ); if (ready && t >= 1 && next >= 99.5) { write(100); setPhase("done"); return; } write(next); frame = requestAnimationFrame(tick); }; frame = requestAnimationFrame(tick); return () => cancelAnimationFrame(frame); }, [phase, ready, duration]); // Fade out, then leave. useEffect(() => { if (phase !== "done") return; const timer = setTimeout( () => { setPhase("gone"); onCompleteRef.current?.(); }, prefersReducedMotion() ? 0 : Math.max(0, exitDuration) ); return () => clearTimeout(timer); }, [phase, exitDuration]); if (phase === "gone") return null; return (

{typeof children === "function" ? children(progress) : children}

); } /** * A thin bar that fills with the preloader's progress, through a `scaleX` * transform of `--preloader-progress`. Colour the fill with * `[&>[data-slot=preloader-bar-fill]]:bg-…`. */ function PreloaderBar({ className, ...props }: ComponentProps<"div">) { return (

); } export { Preloader, PreloaderBar, type PreloaderProps }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L51",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/default/ui/preloader.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]