Loading skeletons

import { MetricCard, Skeleton, Spinner, SpinnerLabel } from "@nexera-ui/react";

/** Loading skeletons: page and panel placeholders that keep the layout steady while data loads. */
export default function LoadingSkeletons() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="flex flex-wrap items-end justify-between gap-3">
          <div className="grid gap-1">
            <h2 className="text-heading-h2 text-primary">People</h2>
            <p className="text-body-default text-secondary">
              Everyone at Northwind, by team and location.
            </p>
          </div>
          <SpinnerLabel>Loading people</SpinnerLabel>
        </header>

        <section
          aria-label="Headcount summary"
          aria-busy="true"
          className="grid gap-4 @3xl:grid-cols-3"
        >
          <MetricCard label="Headcount" value="" isLoading loadingLabel="Loading headcount" />
          <MetricCard
            label="Joiners this month"
            value=""
            isLoading
            loadingLabel="Loading joiners"
          />
          <MetricCard label="Out today" value="" isLoading loadingLabel="Loading absences" />
        </section>

        <div className="grid gap-6 @5xl:grid-cols-[1fr_20rem]">
          <section
            aria-labelledby="skeleton-directory"
            aria-busy="true"
            className="grid content-start gap-3 rounded-xl border border-default bg-surface p-4"
          >
            <h3 id="skeleton-directory" className="text-heading-h4 text-primary">
              Directory
            </h3>
            <div className="grid gap-3 overflow-x-auto">
              <Skeleton type="table-row" />
              <Skeleton type="table-row" />
              <Skeleton type="table-row" />
              <Skeleton type="table-row" />
              <Skeleton type="table-row" />
            </div>
          </section>

          <div className="grid content-start gap-4">
            <section
              aria-labelledby="skeleton-joiners"
              aria-busy="true"
              className="grid gap-3 rounded-xl border border-default bg-surface p-4"
            >
              <h3 id="skeleton-joiners" className="text-heading-h4 text-primary">
                New joiners
              </h3>
              <Skeleton type="avatar-row" />
              <Skeleton type="avatar-row" />
              <Skeleton type="avatar-row" />
            </section>
            <section
              aria-labelledby="skeleton-chart"
              aria-busy="true"
              className="grid gap-3 rounded-xl border border-default bg-surface p-4"
            >
              <h3 id="skeleton-chart" className="text-heading-h4 text-primary">
                Headcount by team
              </h3>
              <div className="grid h-40 place-items-center rounded-lg bg-sunken">
                <Spinner size="lg" label="Loading chart" />
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  );
}