/** * 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. * * The bars share the app-wide `Skeleton` tone (`muted-foreground` at low alpha, which reads on * both themes) and the single `animate-skeleton` pulse, applied once on the container so any * number of bars costs one opacity animation. */import type { PullRequestListEntry } from "@t3tools/contracts";import { ArrowLeftIcon } from "lucide-react"; import { cn } from "~/lib/utils";import { formatRelativeTimeLabel } from "~/timestampFormat"; import { pullRequestLabelColor } from "./pullRequestList.logic";import {  PullRequestActorLabel,  PullRequestDiffStat,  pullRequestChecksStatePresentation,  resolvePullRequestState,} from "./pullRequestPresentation"; 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="motion-safe:animate-skeleton 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({ seed }: { seed?: PullRequestListEntry | null }) {  const statePresentation = seed    ? resolvePullRequestState({        state: seed.state,        isDraft: seed.isDraft,      })    : null;  const checksPresentation = seed?.checksState    ? pullRequestChecksStatePresentation(seed.checksState)    : null;   return (    <div      role="status"      aria-label="Loading pull request"      className={cn(        "flex h-full min-h-0 flex-col overflow-hidden bg-background",        !seed && "motion-safe:animate-skeleton",      )}    >      <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">            {seed && statePresentation ? (              <>                <span className="min-w-0 truncate text-xs font-medium text-muted-foreground">                  {seed.repository}                </span>                <span                  className={cn("shrink-0 text-xs font-medium", statePresentation.toneClassName)}                >                  #{seed.number}                </span>              </>            ) : (              <>                <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">          {seed ? (            <h1 className="truncate text-base font-semibold leading-snug">{seed.title}</h1>          ) : (            <GhostBar className="h-5 w-4/5 max-w-md" />          )}          <div className="mt-2 flex items-center gap-1.5">            {seed ? (              <>                <PullRequestActorLabel                  actor={seed.author}                  className="font-medium"                  tooltip={false}                />                <span className="text-xs text-muted-foreground">                  updated {formatRelativeTimeLabel(seed.updatedAt)}                </span>              </>            ) : (              <>                <GhostBar className="size-4 rounded-full" />                <GhostBar className="w-24" />              </>            )}          </div>          <div className="mt-4 flex min-w-0 items-center gap-2">            {seed ? (              <span className="flex min-w-0 flex-1 items-center gap-1.5 font-mono text-xs text-muted-foreground/70">                <code className="min-w-0 max-w-[40%] shrink-0 truncate">{seed.baseBranch}</code>                <ArrowLeftIcon                  aria-label="receives changes from"                  className="size-3.5 shrink-0 opacity-60"                />                <code className="min-w-0 flex-1 truncate">{seed.headBranch}</code>              </span>            ) : (              <>                <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" />              {seed ? (                <PullRequestDiffStat                  additions={seed.additions}                  deletions={seed.deletions}                  className="font-mono text-xs"                />              ) : (                <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>          {checksPresentation ? (            <span              className={cn(                "inline-flex items-center gap-1.5 text-xs",                checksPresentation.toneClassName,              )}            >              <checksPresentation.Icon aria-hidden className="size-3.5" />              {checksPresentation.label}            </span>          ) : (            <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">              {seed ? (                seed.labels.slice(0, 3).map((label) => {                  const color = pullRequestLabelColor(label.color);                  return (                    <span                      key={label.name}                      className="inline-flex h-5 max-w-32 items-center gap-1 truncate rounded-full border border-border/70 bg-muted/40 px-2 text-[10px] text-muted-foreground"                    >                      <span                        aria-hidden                        className="size-2 shrink-0 rounded-full bg-muted-foreground"                        {...(color ? { style: { backgroundColor: color } } : {})}                      />                      <span className="truncate">{label.name}</span>                    </span>                  );                })              ) : (                <>                  <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="motion-safe:animate-skeleton 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="motion-safe:animate-skeleton 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="motion-safe:animate-skeleton 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>  );}