chadtmiller.com/pds.js

Switch repository

Loading…

import { Skeleton } from '#/components/atoms/skeleton.jsx';
import { COLUMN } from '#/lib/layout.js';

/** One row's shape: a name line, a description, a line of readings. */
function RepoRowSkeleton({ width }) {
  return (
    <div className="flex items-start gap-6 border-border border-b px-4 py-4 last:border-b-0">
      <div className="flex min-w-0 flex-1 flex-col gap-2.5">
        <Skeleton className={`h-[18px] ${width}`} />
        <Skeleton className="h-4 w-3/5 max-w-md" />
        <Skeleton className="h-3.5 w-2/5 max-w-xs" />
      </div>
      <Skeleton className="hidden h-3 w-36 shrink-0 self-center sm:block" />
    </div>
  );
}

/**
 * The repository listing, before any records arrive, in the shape the
 * listing takes: its band, the profile column, and the rows. Only a first
 * visit sees it; a revisit paints the cached rows instead.
 */
export function RepoListSkeleton() {
  return (
    <div className="flex min-h-0 flex-1 flex-col" aria-hidden="true">
      <div className="flex min-h-12 shrink-0 items-center border-border border-b px-(--gutter)">
        <Skeleton className="h-4 w-28" />
      </div>
      <div
        className={`${COLUMN} flex min-h-0 flex-1 flex-col gap-6 overflow-hidden px-(--gutter) py-5 lg:flex-row lg:items-start`}
      >
        <div className="flex w-full shrink-0 flex-col gap-5 lg:w-72">
          <div className="flex items-center gap-3">
            <Skeleton className="size-16 rounded-full" />
            <div className="flex flex-col gap-2">
              <Skeleton className="h-4 w-32" />
              <Skeleton className="h-3 w-24" />
            </div>
          </div>
          <Skeleton className="h-3 w-2/3" />
          <Skeleton className="h-3 w-1/2" />
        </div>
        <div className="min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-card">
          <RepoRowSkeleton width="w-40" />
          <RepoRowSkeleton width="w-52" />
          <RepoRowSkeleton width="w-32" />
          <RepoRowSkeleton width="w-44" />
        </div>
      </div>
    </div>
  );
}