Spaces:
Sleeping
Sleeping
| "use client"; | |
| import { useEffect, useState } from "react"; | |
| import { cx, Spinner } from "@/components/ui"; | |
| import { exitMs, usePresence } from "@/utils/motion"; | |
| /** | |
| * Loading veil over the content area (`absolute`: the nearest positioned ancestor is the episode | |
| * page's content column, which keeps the same geometry from the data-loading shell to the loaded | |
| * page, so the spinner holds its spot through both phases while the header and sidebar stay put). | |
| * | |
| * - `visible={false}` fades the veil out (with clicks passing through) and then unmounts it, so | |
| * the content appears through it instead of popping. | |
| * - `appear={false}` is for taking over from the previous phase's veil: it shows at once, without | |
| * replaying the fade-in (which would read as a blink) or announcing the status a second time. | |
| * A later reopen of the same instance fades in again. Taking over with nothing left to load | |
| * (`visible={false}` from the start, e.g. a view with no loading phase of its own) plays the | |
| * previous veil's fade-out from here instead of letting it vanish. | |
| */ | |
| export default function Loading({ | |
| visible = true, | |
| appear = true, | |
| }: { | |
| visible?: boolean; | |
| appear?: boolean; | |
| } = {}) { | |
| const presence = usePresence(visible, "--duration-fast", 250); | |
| const [handoff, setHandoff] = useState(!appear && !visible); | |
| useEffect(() => { | |
| if (!handoff) return; | |
| const t = window.setTimeout( | |
| () => setHandoff(false), | |
| exitMs("--duration-fast", 250), | |
| ); | |
| return () => window.clearTimeout(t); | |
| }, [handoff]); | |
| const state = handoff && presence === "closed" ? "closing" : presence; | |
| const [fresh, setFresh] = useState(appear); | |
| if (state === "closed" && !fresh) setFresh(true); | |
| if (state === "closed") return null; | |
| const closing = state === "closing"; | |
| return ( | |
| <div | |
| data-state={state} | |
| inert={closing} | |
| aria-hidden={closing || undefined} | |
| role={fresh ? "status" : undefined} | |
| aria-live={fresh ? "polite" : undefined} | |
| className={cx( | |
| "absolute inset-0 z-10 flex flex-col items-center justify-center bg-bg/70 backdrop-blur-md", | |
| // Opacity only: never animate the blur radius of a layer this size. `starting:` only | |
| // applies to a veil mounted already closing (the hand-off above): it fades from opaque. | |
| "transition-opacity duration-(--duration-fast) ease-(--ease-out)", | |
| closing | |
| ? "pointer-events-none opacity-0 starting:opacity-100" | |
| : "opacity-100", | |
| )} | |
| > | |
| <div | |
| className={cx( | |
| "flex flex-col items-center gap-3", | |
| fresh && "animate-fade-in", | |
| )} | |
| > | |
| {/* The rotation lives on this div, not on the SVG: a transformed HTML box runs on the | |
| compositor, so it keeps spinning while the main thread is busy decoding parquet and | |
| building charts. Stepped like the shared Spinner. */} | |
| <div className="h-7 w-7 animate-spin text-fg-secondary [animation-duration:900ms] [animation-timing-function:steps(12)] [will-change:transform]"> | |
| <Spinner className="h-7 w-7 animate-none!" /> | |
| </div> | |
| <div className="text-center"> | |
| <h1 className="text-13 font-medium text-fg-secondary">Loading</h1> | |
| <p className="mt-0.5 text-2xs text-fg-secondary"> | |
| Preparing data and videos | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |