import { Skeleton } from '@/components/Skeleton'

/**
 * Skelett statt Spinner: die Struktur steht sofort, die Daten fallen hinein.
 * Ohne diese Grenze wartet die Navigation stumm, bis der Server fertig ist -
 * man klickt und es passiert scheinbar nichts. Siehe docs/09-performance-und-ux.md.
 */
export default function Loading() {
  return (
    <main className="mx-auto max-w-(--container-measure) px-6 py-10">
      <Skeleton className="h-[1.5rem]" width="14rem" />
      <div className="mt-8 space-y-6">
        <div>
          <Skeleton className="h-[0.8rem]" width="6rem" />
          <Skeleton className="mt-2 h-[2.1rem]" />
        </div>
        <div>
          <Skeleton className="h-[0.8rem]" width="8rem" />
          <Skeleton className="mt-2 h-[2.1rem]" />
        </div>
        <Skeleton className="h-[2.1rem]" width="12rem" />
      </div>
    </main>
  )
}