4e: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"] 4f: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"] 50:T1324,"use client" /* LoadCut: a placeholder becomes real without a jump, and fast data never flashes a skeleton. */ import * as React from "react" import { nextLoadPhase, parseHold, type LoadEvent, type LoadPhase } from "@/lib/keyframery/load" import { easingOf, emitCut, reducedMotion, scaled } from "@/lib/keyframery/motion" import { optedOut } from "@/lib/keyframery/state" export type LoadCutProps = { loading: boolean skeleton: React.ReactNode children?: React.ReactNode /** How long to wait before showing the skeleton (ms). Defaults to --kf-hold (300ms). */ hold?: number /** Once shown, the skeleton stays at least this long (ms), so it never flashes. */ minShow?: number pace?: number /** "none" swaps skeleton and content without a dissolve. */ cut?: "dissolve" | "none" className?: string } export function LoadCut({ loading, skeleton, children, hold, minShow = 400, pace, cut, className }: LoadCutProps) { const ref = React.useRef(null) const [phase, setPhase] = React.useState(loading ? "waiting" : "content") const go = React.useCallback((e: LoadEvent) => setPhase((p) => nextLoadPhase(p, e)), []) const shownAt = React.useRef(0) const lastHeight = React.useRef(null) const lastPhase = React.useRef(phase) // `loading` drives the phase. Adjusted during render, as React recommends for state that follows a prop, // so there is no extra commit with a stale phase. const [seenLoading, setSeenLoading] = React.useState(loading) if (seenLoading !== loading) { setSeenLoading(loading) setPhase((p) => nextLoadPhase(p, loading ? "loading" : "loaded")) } // Once the content has been on screen, a new load keeps it visible during the hold instead of a blank space. const [hadContent, setHadContent] = React.useState(!loading) if (phase === "content" && !hadContent) setHadContent(true) React.useEffect(() => { if (phase !== "waiting") return const ms = hold ?? parseHold(ref.current ? getComputedStyle(ref.current).getPropertyValue("--kf-hold") : null) const t = setTimeout(() => go("held"), ms) return () => clearTimeout(t) }, [phase, hold, go]) React.useEffect(() => { if (phase !== "skeleton" || loading) return const t = setTimeout(() => go("shown"), Math.max(0, minShow - (performance.now() - shownAt.current))) return () => clearTimeout(t) }, [phase, loading, minShow, go]) React.useLayoutEffect(() => { const el = ref.current const was = lastPhase.current lastPhase.current = phase if (!el) return const from = lastHeight.current const to = el.getBoundingClientRect().height lastHeight.current = to if (was === phase) return const off = optedOut(el) || reducedMotion() if (phase === "skeleton") { shownAt.current = performance.now() if (!off) el.animate([{ opacity: 0 }, { opacity: 1 }], { duration: scaled(120, el), easing: easingOf(el) }) return } const resized = (phase === "settling" || (phase === "content" && was === "waiting")) && from !== null && Math.abs(to - from) > 1 if (resized && !off) { el.animate( [ { height: `${from}px`, overflow: "clip" }, { height: `${to}px`, overflow: "clip" }, ], { duration: scaled(240, el), easing: easingOf(el) }, ) } if (phase !== "settling") return const ms = off ? 0 : scaled(240, el) if (!off) { el.querySelector('[data-kf-load="skeleton"]')?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: ms, easing: easingOf(el, "exit"), fill: "forwards" }) el.querySelector('[data-kf-load="content"]')?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: easingOf(el) }) emitCut({ cut: "dissolve", component: "load", phase: "enter", ms: Math.round(ms) }) } const t = setTimeout(() => go("settled"), ms) return () => clearTimeout(t) }, [phase, go]) const style = pace ? ({ "--kf-pace": pace } as React.CSSProperties) : undefined const props = { ref, "data-slot": "load-cut", "data-cut": cut === "none" ? "none" : undefined, "aria-busy": loading || undefined, className, style, } if (phase === "content") return

{children}

if (phase === "waiting") { return (

{hadContent ? ( children ) : ( )}

) } if (phase === "skeleton") return

{skeleton}

return (

{children}

) } 51:T589,/** LoadCut's pure parts: its phases and the hold time. */ export type LoadPhase = "content" | "waiting" | "skeleton" | "settling" export type LoadEvent = "loading" | "loaded" | "held" | "shown" | "settled" /** * content --loading--> waiting the skeleton's space is reserved, invisible, for --kf-hold * waiting --loaded--> content the data was fast: the skeleton is never seen * waiting --held--> skeleton still loading: show it * skeleton --shown--> settling loaded, and the skeleton has been up long enough: dissolve * settling --settled--> content * any --loading--> waiting (a skeleton already on screen stays) */ export function nextLoadPhase(phase: LoadPhase, event: LoadEvent): LoadPhase { switch (event) { case "loading": return phase === "skeleton" ? "skeleton" : "waiting" case "loaded": return phase === "waiting" ? "content" : phase case "held": return phase === "waiting" ? "skeleton" : phase case "shown": return phase === "skeleton" ? "settling" : phase case "settled": return phase === "settling" ? "content" : phase } } /** --kf-hold as milliseconds ("300ms", "0.3s"); 300 when missing or unreadable. */ export function parseHold(raw: string | null | undefined): number { const m = (raw ?? "").trim().match(/^(\d*\.?\d+)(ms|s)$/) if (!m) return 300 return m[2] === "s" ? Number(m[1]) * 1000 : Number(m[1]) } 4d:["$","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,["$","$L4e",null,{"namespace":"@keyframery","registryDependencies":["@keyframery/cuts"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"components/keyframery/load-cut.tsx","content":"$50","type":"registry:component","target":"components/keyframery/load-cut.tsx"},{"path":"lib/keyframery/load.ts","content":"$51","type":"registry:lib","target":"lib/keyframery/load.ts"}],"className":"h-[70svh] min-h-80"}]]}]