// Every page in this group is server-rendered per request (they all read
// from Supabase), so without this the browser sits on the previous page with
// no feedback until the server answers — on the employee list, long enough
// to look broken.
export default function Loading() {
  return (
    <div className="flex flex-col gap-4" role="status" aria-label="Wird geladen">
      <div className="h-9 w-64 animate-pulse rounded bg-border-subtle" />
      <div className="flex flex-wrap gap-3">
        {[240, 160, 160].map((w, i) => (
          <div key={i} style={{ width: w }} className="h-10 animate-pulse rounded bg-border-subtle" />
        ))}
      </div>
      <div className="overflow-hidden rounded border border-border bg-white">
        {Array.from({ length: 8 }, (_, i) => (
          <div key={i} className="flex items-center gap-4 border-b border-border-subtle px-4 py-3 last:border-0">
            <div className="h-9 w-9 shrink-0 animate-pulse rounded-full bg-border-subtle" />
            <div className="flex flex-1 flex-col gap-1.5">
              <div className="h-3.5 w-48 animate-pulse rounded bg-border-subtle" />
              <div className="h-3 w-32 animate-pulse rounded bg-border-subtle" />
            </div>
            <div className="hidden h-3.5 w-24 animate-pulse rounded bg-border-subtle sm:block" />
            <div className="hidden h-3.5 w-20 animate-pulse rounded bg-border-subtle md:block" />
          </div>
        ))}
      </div>
      <span className="sr-only">Daten werden geladen…</span>
    </div>
  );
}