/** * Loading states specific to the pull request surface — the first list, a search under way, * and a detail panel opening — use bars in the geometry of the content they stand for, pulsing * on one composited layer. Diff loading uses the shared diff-panel skeleton instead. * * Deliberately not the app's shimmer skeleton. The sweep is a `transform` animation per bar — * compositor-safe, but a layer for every bar on screen — and its white highlight over the * near-white `muted` base all but disappears in light mode. Here one `animate-ghost-pulse` on the * container is a single opacity animation however many bars sit under it, and the bars take * their tone from `muted-foreground` at low alpha, which reads on both themes. */import { cn } from "~/lib/utils"; function GhostBar({ className }: { className?: string | undefined }) {  return <div aria-hidden className={cn("h-3 rounded bg-muted-foreground/15", className)} />;} /** Widths cycle rather than randomize, so the ghost renders the same on every pass. */const TITLE_WIDTHS = ["w-3/5", "w-2/5", "w-1/2", "w-2/3", "w-2/5", "w-3/5", "w-1/2"];const META_WIDTHS = ["w-2/5", "w-1/3", "w-2/5", "w-1/4", "w-1/3", "w-2/5", "w-1/3"]; /** Rows in the list's own grid — glyph, title over meta, time over diffstat. */export function PullRequestListGhost({  rows = 7,  caption,}: {  rows?: number;  /** Said where the group headers speak, for the states with something to say — a search. */  caption?: string;}) {  return (    <div      role="status"      aria-label={caption ?? "Loading pull requests"}      className="animate-ghost-pulse space-y-0.5"    >      {caption ? (        <p className="px-3 pb-1 text-xs font-medium text-muted-foreground/70">{caption}</p>      ) : null}      {Array.from({ length: rows }, (_, index) => (        <div          key={index}          className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 rounded-lg px-3 py-2"        >          <GhostBar className="size-4 rounded-full" />          <div className="min-w-0 space-y-1.5">            <GhostBar className={cn("h-3.5", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />            <GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />          </div>          <div className="flex flex-col items-end gap-1.5">            <GhostBar className="w-12" />            <GhostBar className="w-16" />          </div>        </div>      ))}    </div>  );} /** * The detail panel's current expanded shape. Keeping the chrome, summary facts, and description * boundaries in the ghost prevents the loaded pull request from replacing one layout with * another a moment later. */export function PullRequestDetailGhost() {  return (    <div      role="status"      aria-label="Loading pull request"      className="animate-ghost-pulse flex h-full min-h-0 flex-col overflow-hidden bg-background"    >      <div className="shrink-0 border-b border-border/60">        <div className="flex h-7 items-center justify-between gap-3 px-4">          <div className="flex min-w-0 flex-1 items-center gap-1.5">            <GhostBar className="w-24" />            <GhostBar className="w-9" />          </div>          <div className="flex shrink-0 items-center gap-1">            <GhostBar className="h-5 w-16 rounded-md" />            <GhostBar className="size-5 rounded-md" />          </div>        </div>         <div className="px-4 pb-4 pt-1">          <GhostBar className="h-5 w-4/5 max-w-md" />          <div className="mt-2 flex items-center gap-1.5">            <GhostBar className="size-4 rounded-full" />            <GhostBar className="w-24" />          </div>          <div className="mt-4 flex min-w-0 items-center gap-2">            <GhostBar className="h-6 w-24 rounded-md" />            <GhostBar className="size-3 rounded-full" />            <GhostBar className="h-6 w-32 rounded-md" />            <div className="ml-auto flex shrink-0 items-center gap-2">              <GhostBar className="w-10" />              <GhostBar className="w-20" />            </div>          </div>        </div>         <div className="flex min-h-10 items-center justify-between gap-3 border-t border-border/60 px-4 py-2">          <div className="flex items-center gap-1 p-0.5">            <GhostBar className="h-6 w-16 rounded-md" />            <GhostBar className="h-6 w-16 rounded-md" />            <GhostBar className="h-6 w-12 rounded-md" />          </div>          <GhostBar className="w-20" />        </div>      </div>       <div className="min-h-0 flex-1 overflow-hidden">        <section className="px-4 py-3">          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">            <div className="flex items-center gap-1.5">              <GhostBar className="size-3.5 rounded-full" />              <GhostBar className="w-14" />            </div>            <div className="flex items-center gap-1">              <GhostBar className="size-4 rounded-full" />              <GhostBar className="size-4 rounded-full" />              <GhostBar className="ml-1 size-5 rounded-md" />            </div>          </div>          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">            <div className="flex items-center gap-1.5">              <GhostBar className="size-3.5 rounded-full" />              <GhostBar className="w-10" />            </div>            <div className="flex items-center gap-1">              <GhostBar className="h-5 w-24 rounded-full" />              <GhostBar className="h-5 w-20 rounded-full" />            </div>          </div>          <div className="grid min-h-8 grid-cols-[6rem_minmax(0,1fr)] items-center gap-2">            <div className="flex items-center gap-1.5">              <GhostBar className="size-3.5 rounded-full" />              <GhostBar className="w-14" />            </div>            <GhostBar className="w-20" />          </div>        </section>         <section className="border-t border-border/60">          <div className="flex min-h-11 items-center gap-1.5 px-4 py-3">            <GhostBar className="h-4 w-24" />            <GhostBar className="size-3.5 rounded-full" />          </div>          <div className="space-y-2 px-4 pb-4">            <GhostBar className="w-full" />            <GhostBar className="w-11/12" />            <GhostBar className="w-4/5" />            <GhostBar className="w-2/3" />          </div>        </section>      </div>    </div>  );} /** People-shaped: an avatar and a name, in the reviewer picker's own row height. */export function PullRequestPeopleGhost({ rows = 4 }: { rows?: number }) {  return (    <div role="status" aria-label="Loading people" className="animate-ghost-pulse space-y-1 p-1">      {Array.from({ length: rows }, (_, index) => (        <div key={index} className="flex h-7 items-center gap-2 rounded-md px-2">          <GhostBar className="size-4 rounded-full" />          <GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />        </div>      ))}    </div>  );} /** The timeline's own shape: dots on the rail, a line and a date to each. */export function PullRequestTimelineGhost({ rows = 6 }: { rows?: number }) {  return (    <div role="status" aria-label="Loading timeline" className="animate-ghost-pulse px-4 py-5">      <div className="relative ml-2 border-l border-border/70 pl-5">        {Array.from({ length: rows }, (_, index) => (          <div key={index} className="relative pb-5">            <GhostBar className="absolute -left-[1.55rem] top-1 size-2 rounded-full" />            <GhostBar className={cn("h-3.5", TITLE_WIDTHS[index % TITLE_WIDTHS.length])} />            <GhostBar className="mt-1.5 w-16" />          </div>        ))}      </div>    </div>  );} /** A compact placeholder for the conversation while the core detail is already readable. */export function PullRequestConversationGhost({ rows = 3 }: { rows?: number }) {  return (    <div      role="status"      aria-label="Loading pull request conversation"      className="animate-ghost-pulse space-y-4 py-2"    >      {Array.from({ length: rows }, (_, index) => (        <div key={index} className="flex items-start gap-2">          <GhostBar className="size-5 shrink-0 rounded-full" />          <div className="flex-1 space-y-1.5">            <GhostBar className={META_WIDTHS[index % META_WIDTHS.length]} />            <GhostBar className="w-full" />            <GhostBar className="w-3/4" />          </div>        </div>      ))}    </div>  );}