Blame · skeleton.tsx

9e346cc	1	interface SkeletonProps {
9e346cc	2	className?: string;
9e346cc	3	width?: string;
9e346cc	4	height?: string;
9e346cc	5	}
9e346cc	6
9e346cc	7	export function Skeleton({ className = "", width, height = "0.875rem" }: SkeletonProps) {
9e346cc	8	return (
9e346cc	9	<div
9e346cc	10	className={`skeleton ${className}`}
9e346cc	11	style={{
9e346cc	12	width: width ?? "100%",
9e346cc	13	height,
9e346cc	14	minHeight: height,
9e346cc	15	}}
9e346cc	16	/>
9e346cc	17	);
9e346cc	18	}
9e346cc	19
9e346cc	20	const FILE_WIDTHS = [120, 90, 140, 80, 110];
9e346cc	21
9e346cc	22	/** A row skeleton that mimics a file tree row. */
9e346cc	23	export function FileRowSkeleton({ index = 0 }: { index?: number }) {
9e346cc	24	return (
9e346cc	25	<div className="flex items-center gap-2 py-1.5 px-3">
9e346cc	26	<Skeleton width="16px" height="16px" />
9e346cc	27	<Skeleton width={`${FILE_WIDTHS[index % FILE_WIDTHS.length]}px`} height="0.875rem" />
9e346cc	28	</div>
9e346cc	29	);
9e346cc	30	}
9e346cc	31
9e346cc	32	/** A full page skeleton for repo/code views. */
9e346cc	33	export function RepoSkeleton() {
9e346cc	34	return (
9e346cc	35	<div className="max-w-3xl mx-auto px-4 py-6">
9e346cc	36	<div
9e346cc	37	style={{ border: "1px solid var(--border-subtle)" }}
9e346cc	38	>
e33d237	39	{Array.from({ length: 6 }).map((_, i) => (
9e346cc	40	<div
9e346cc	41	key={i}
9e346cc	42	style={{
9e346cc	43	borderTop: i > 0 ? "1px solid var(--divide)" : undefined,
9e346cc	44	}}
9e346cc	45	>
9e346cc	46	<FileRowSkeleton index={i} />
9e346cc	47	</div>
9e346cc	48	))}
9e346cc	49	</div>
9e346cc	50	</div>
9e346cc	51	);
9e346cc	52	}
9e346cc	53
36387cc	54	const CODE_WIDTHS = [280, 200, 320, 160, 240, 300, 180, 260, 140, 220, 290, 170];
36387cc	55
36387cc	56	/** A skeleton for file/blob views (code viewer). */
36387cc	57	export function BlobSkeleton() {
36387cc	58	return (
36387cc	59	<div className="px-4 py-6">
36387cc	60	<div style={{ border: "1px solid var(--border-subtle)" }}>
36387cc	61	<div
36387cc	62	className="flex items-center gap-4 px-3 py-2"
36387cc	63	style={{
36387cc	64	backgroundColor: "var(--bg-inset)",
36387cc	65	borderBottom: "1px solid var(--border-subtle)",
36387cc	66	}}
36387cc	67	>
36387cc	68	<Skeleton width="40px" height="0.75rem" />
36387cc	69	<Skeleton width="55px" height="0.75rem" />
36387cc	70	</div>
36387cc	71	<div className="py-1">
36387cc	72	{Array.from({ length: 12 }).map((_, i) => (
36387cc	73	<div key={i} className="flex items-center gap-4 px-3 py-0.5">
36387cc	74	<Skeleton width="20px" height="0.75rem" />
36387cc	75	<Skeleton width={`${CODE_WIDTHS[i % CODE_WIDTHS.length]}px`} height="0.75rem" />
36387cc	76	</div>
36387cc	77	))}
36387cc	78	</div>
36387cc	79	</div>
36387cc	80	</div>
36387cc	81	);
36387cc	82	}
36387cc	83
9e346cc	84	const LIST_WIDTHS = [200, 170, 230, 150];
9e346cc	85	const LIST_SUB_WIDTHS = [100, 80, 120, 90];
9e346cc	86
9e346cc	87	/** A skeleton for list pages (repos, commits, MRs). */
9e346cc	88	export function ListSkeleton({ rows = 4 }: { rows?: number }) {
9e346cc	89	return (
9e346cc	90	<div
9e346cc	91	style={{ border: "1px solid var(--border-subtle)" }}
9e346cc	92	>
9e346cc	93	{Array.from({ length: rows }).map((_, i) => (
9e346cc	94	<div
9e346cc	95	key={i}
9e346cc	96	className="py-2.5 px-3"
9e346cc	97	style={{
9e346cc	98	borderTop: i > 0 ? "1px solid var(--divide)" : undefined,
9e346cc	99	}}
9e346cc	100	>
9e346cc	101	<Skeleton width={`${LIST_WIDTHS[i % LIST_WIDTHS.length]}px`} height="0.875rem" className="mb-1.5" />
9e346cc	102	<Skeleton width={`${LIST_SUB_WIDTHS[i % LIST_SUB_WIDTHS.length]}px`} height="0.65rem" />
9e346cc	103	</div>
9e346cc	104	))}
9e346cc	105	</div>
9e346cc	106	);
9e346cc	107	}